How to compress and merge JS files in node

This time I will show you how to compress and merge JS files in node. What are the precautions for compressing and merging JS files in node? The following is a practical case, let's take a look.

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 calls

shell command:

Merge and compress the two JS files start.js and test.js

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

API call:

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

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

This is a very smart method with a total of 2 parameters

The first parameter*

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

1. The string parameter

is what we write

javascript The code can be directly used as a string parameter parameter function, but it needs a second parameter to tell the function, which is the javascript source code string

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

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

String path

This is the default support of the function One way is to directly give a single parameter to a JavaScript file path that needs to be compressed. Of course, it can also be two parameters.

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

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

The array specifies multiple paths

You 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"]);

The second one Parameter *

Parameter description

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

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 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}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!

Recommended reading:

How to modify the value in vue request data

How vue and vue-i18n implement background data Multi-language switching

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