Home  >  Article  >  Web Front-end  >  How to use UglifyJS to compress and merge JS files under node

How to use UglifyJS to compress and merge JS files under node

亚连
亚连Original
2018-05-31 17:47:131580browse

Below I will share with you a method of using UglifyJS to compress and merge JS files under node. It has a good reference value and I hope it will be helpful to everyone.

The latest version of UglifyJS is now 2.8.13. Its main function is JS compression and merging. Go directly to the tutorial below:

Installation:

<span style="font-size:18px;color:#006600;">npm install uglify-js -g</span>

Install uglifyjs as a global variable so that we can use it anywhere.

<span style="color:#006600;">下面是shell命令的中文解释:
* source-map [string],生成source map文件。
* –source-map-root [string], 指定生成source map的源文件位置。
* –source-map-url [string], 指定source map的网站访问地址。
* –source-map-include-sources,设置源文件被包含到source map中。
* –in-source-map,自定义source map,用于其他工具生成的source map。
* –screw-ie8, 用于生成完全兼容IE6-8的代码。
* –expr, 解析一个表达式或JSON。
* -p, –prefix [string], 跳过原始文件名的前缀部分,用于指定源文件、source map和输出文件的相对路径。
* -o, –output [string], 输出到文件。
* -b, –beautify [string], 输出带格式化的文件。
* -m, –mangle [string], 输出变量名替换后的文件。
* -r, –reserved [string], 保留变量名,排除mangle过程。
* -c, –compress [string], 输出压缩后的文件。
* -d, –define [string], 全局定义。
* -e, –enclose [string], 把所有代码合并到一个函数中,并提供一个可配置的参数列表。
* –comments [string], 增加注释参数,如@license、@preserve。
* –preamble [string], 增加注释描述。
* –stats, 显示运行状态。
* –acorn, 用Acorn做解析。
* –spidermonkey, 解析SpiderMonkey格式的文件,如JSON。
* –self, 把UglifyJS2做为依赖库一起打包。
* –wrap, 把所有代码合并到一个函数中。
* –export-all, 和–wrap一起使用,自动输出到全局环境。
* –lint, 显示环境的异常信息。
* -v, –verbose, 打印运行日志详细。
* -V, –version, 打印版本号。
* –noerr, 忽略错误命令行参数。</span>

# How to use UglifyJS2

> There are 2 ways to use UglifyJS2

1. Shell command call

2. API call

shell command:

Merge and compress start.js, test.js These two JS files

~> uglifyjs start.js test.js -o new.min.js --source-map new.min.js.map

API Call:

var fs = require(&#39;fs&#39;);
var uglifyjs = require("uglify-js");
var result = uglifyjs.minify("../test.js",{
 mangle:false
});

A basic core method minify above, let’s look at this method separately

This is a very smart Method, a total of 2 parameters

The first parameter*

The first parameter can be a string, path, or path array;

1. The string parameter

is the javascript code we wrote. It can be directly used as a string parameter parameter function, but there needs to be a second parameter to tell the function, which is the javascript source code string

var result = uglifyjs.minify("var fun=function(){ alert(&#39;itKingOne博客&#39;);};",{
 mangle:false,
 fromString:true,
});

The first parameter above is passed into the javascript source code. The second parameter formString: true tells the minify function that the previous parameters need to be compressed. JavaScript source code.

String path

This is a method supported by the function by default. You can directly give a JavaScript file that needs to be compressed with a separate parameter. Path, of course, can also have 2 parameters.

var result = uglifyjs.minify("../test.js");

The above function will be executed and the test.js in my parent directory will be compressed. The default is one parameter When, it represents the file path

The array specifies multiple paths

can have one parameter, but this parameter is an array['Path 1','Path 2',' Path 3'] Similar to this, the result is that all the javascript in the above path is compressed and returned to the result object. Later we will talk about the result return value separately.

var result = uglifyjs.minify([ "../test.js", "../mian.js"]);

Second parameter*

Parameter description

romString attribute (default false) specifies that the string in the first parameter is the javascript source code

The mangle attribute defaults to true; when specified as false, it means that obfuscated compression will not be performed

The width and max-line-len attributes follow the instructions, here should refer to the length of the compressed file

outSourceMap The attribute is used to specify the value of the file attribute after the function return value result.map string is converted into Object

The sourceRoot attribute is used to specify the value of the sourceRoot attribute after the function return value result.map string is converted into Object

Return value result *

The return value result is an object. The code attribute corresponds to the compressed script

{"code":"这里是压缩后的 javascript 脚本","map":null}

The above is I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

WeChat applet implements skin-changing function

nodejs implements the method of parsing xml string into object Example

Detailed explanation of user rights management of nodejs acl

The above is the detailed content of How to use UglifyJS to compress and merge JS files under node. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn