UglifyJS中文文档

本文档译自UglifyJS3文档。

此前翻译的UglifyJS2中文文档已挪到本项目UglifyJS2分支。

喜欢的话请收藏、给个赞/star吧！谢谢！

转载请注明原文链接（https://github.com/LiPinghai/UglifyJSDocCN/blob/master/README.md ）与作者信息。

译序

由于webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin），其命令webpack -p即表示调用UglifyJS来压缩代码，还有不少webpack插件如html-webpack-plugin也会默认使用UglifyJS。因此我们其实经常要用到它，但UglifyJS本身配置较复杂/选项繁多，又没有中文文档，使用起来如坠云雾。鉴于此特翻译此文，谬误甚多，敬请斧正。

词典：

parse       解释
compress    压缩
mangle      混淆
beautify    美化
minify      最小化
CLI         命令行工具
sourcemap   编译后代码对源码的映射，用于网页调试
AST         抽象语法树
name        名字，包括变量名、函数名、属性名
toplevel    顶层作用域
unreachable 不可达代码
option      选项/配置
STDIN       标准输入，指在命令行中直接输入
STDOUT      标准输出
STDERR      标准错误输出
side effects函数副作用，即函数除了返回外还产生别的作用，比如改了全局变量
shebang     释伴（#!）

以下为正文：

UglifyJS 3

UglifyJS 是一个js 解释器、最小化器、压缩器、美化器工具集（parser, minifier, compressor or beautifier toolkit）。

注意:

• uglify-js@3 的API 和 CLI已简化，不再向后兼容 uglify-js@2.
• UglifyJS 2.x 文档在这里.
• uglify-js 只支持 ECMAScript 5 (ES5).
• 假如希望压缩 ES2015+ (ES6+)代码，应该使用 uglify-es这个npm 包。

安装

首先确认一直你已经安装了最新的node.js(装完后或许需要重启一下电脑)

用NPM安装CLI：

npm install uglify-js -g

用NPM下载给程序使用:

npm install uglify-js

CLI使用

Command line usage

 uglifyjs [input files] [options]

UglifyJS可以输入多文件。建议你先写输入文件，再传选项。UglifyJS会根据压缩选项，把文件放在队列中依次解释。所有文件都会在同一个全局域中，假如一个文件中的变量、方法被另一文件引用，UglifyJS会合理地匹配。

假如没有指定文件，UglifyJS会读取输入字符串（STDIN）。

如果你想要把选项写在文件名的前面，那要在二者之前加上双横线，防止文件名被当成了选项：

 uglifyjs --compress --mangle -- input.js

CLI选项：

Command line options

  -h, --help                  列出使用指南。
                              `--help options` 获取可用选项的详情。
  -V, --version               打印版本号。
  -p, --parse <options>       指定解析器配置选项:
                              `acorn`  使用 Acorn 来解析。
                              `bare_returns`  允许在函数外return。
                                              在压缩CommonJS模块或`.user.js `引擎调用被同步执行函数包裹的用户脚本 时会用到。
                              `expression`  不是解析文件，二是解析一段表达式 (例如解析JSON).
                              `spidermonkey`  输入文件是 SpiderMonkey
                                              AST 格式 (JSON).
  -c, --compress [options]    启用压缩（true/false）/指定压缩配置:
                              `pure_funcs`  传一个函数名的列表，当这些函数返回值没被利用时，该函数会被安全移除。
  -m, --mangle [options]       启用混淆（true/false）/指定混淆配置:
                              `reserved`  不被混淆的名字列表。
  --mangle-props [options]    混淆属性/指定压缩配置:
                              `builtins`  混淆那些与标准JS全局变量重复的名字。
                              `debug`  添加debug前缀和后缀。
                              `domprops`  混淆那些鱼DOM属性名重复的名字。
                              `keep_quoted`  只混淆没括起来的属性名。
                              
                              `regex`  只混淆匹配（该正则）的名字。
                              `reserved`  不需要混淆的名字的列表（即保留）。
  -b, --beautify [options]    是否美化输出（true/false）/指定输出配置：
                              `beautify`  默认是启用.
                              `preamble`  预设的输出文件头部。你可以插入一段注释，比如版权信息。它不会被解析，但sourcemap会因此调整。
                              `quote_style`  括号类型:
                                              0 - auto自动
                                              1 - single单引号
                                              2 - double双引号
                                              3 - original跟随原码
                              `wrap_iife`  把立即执行函数括起来。注意：你或许应禁用压缩配置中的`negate_iife`选项。 

 -o, --output <file>         输出文件路径 (默认 STDOUT). 指定 `ast` 或
                                `spidermonkey`的话分别是输出UglifyJS或SpiderMonkey AST。
    --comments [filter]         保留版权注释。默认像Google Closure那样，保留包含"@license"或"@preserve"这样JSDoc风格的注释。你可以传以下的参数：
                                - "all" 保留全部注释
                                - 一个合适的正则，如 `/foo/` 或 `/^!/`，保留匹配到的注释。 
                                注意，在启用压缩时，因为死代码被移除或压缩声明为一行，并非*所有*的注释都会被保留。
    --config-file <file>        从此JSON文件读取 `minify()` 配置。
    -d, --define <expr>[=value] 定义全局变量。
    --ie8                       支持IE8。
                                等同于在`minify()`的`compress`、 `mangle` 和 `output`配置设置`ie8: true`。UglifyJS不会默认兼容IE8。
    --keep-fnames               不要混淆、干掉的函数的名字。当代码依赖Function.prototype.name时有用。
    --name-cache <file>         用来保存混淆map的文件。
    --self                      把UglifyJS本身也构建成一个依赖包
                                (等同于`--wrap UglifyJS`)
    --source-map [options]      启用 source map（true/false）/指定sourcemap配置:
                                `base` 根路径，用于计算输入文件的相对路径。
                                `content`  输入sourcemap。假如的你要编译的JS是另外的源码编译出来的。
                                假如该sourcemap包含在js内，请指定"inline"。 
                                `filename`  输出文件的名字或位置。
                                `includeSources`  如果你要在sourcemap中加上源文件的内容作sourcesContent属性，就传这个参数吧。
                                `root`  此路径中的源码编译后会产生sourcemap.
                                `url`   如果指定此值，会添加sourcemap相对路径在`//#sourceMappingURL`中。
    --timings                   在STDERR显示操作运行时间。
    --toplevel                  压缩/混淆在最高作用域中声明的变量名。
    --verbose                   打印诊断信息。
    --warn                      打印警告信息。
    --wrap <name>               把所有代码包裹在一个大函数中。让“exports”和“global”变量有效。
                                你需要传一个参数来指定此模块的名字，以便浏览器引用。         

指定--output (-o)来明确输出文件，否则将在终端输出（STDOUT）

CLI sourcemap选项

CLI source map options

UglifyJS可以生成一份sourcemap文件，这非常有利于你调试压缩后的JS代码。传--source-map --output output.js来获取sorcemap文件（sorcemap会生成为output.js.map）。

额外选项：

• --source-map filename=<NAME> 指定sourcemap名字。
• --source-map root=<URL> 传一个源文件的路径。否则UglifyJS将假定已经用了HTTPX-SourceMap，并将省略//＃sourceMappingURL=指示。
• --source-map url=<URL> 指定生成sourcemap的路径。

例如：

    uglifyjs js/file1.js js/file2.js \
             -o foo.min.js -c -m \
             --source-map root="http://foo.com/src",url=foo.min.js.map

上述配置会压缩和混淆file1.js、file2.js，输出文件foo.min.js 和sourcemapfoo.min.js.map，sourcemap会建立http://foo.com/src/js/file1.js、 http://foo.com/src/js/file2.js的映射。（实际上，sourcemap根目录是http://foo.com/src，所以相当于源文件路径是js/file1.js、js/file2.js）

关联sourcemap

Composed source map

假如你的JS代码是用其他编译器（例如coffeescript）生成的，那么映射到JS代码就没什么用了，你肯定希望映射到CoffeeScript源码。UglifyJS有一个选项可以输入sourcemap，假如你有一个从CoffeeScript → 编译后JS的map的话，UglifyJS可以生成一个从CoffeeScript->压缩后JS的map映射到源码位置。

你可以传入 --source-map content="/path/to/input/source.map"或来尝试此特性，如果sourcemap包含在js内，则写 --source-map content=inline。

CLI混淆选项

CLI mangle options

你需要传入--mangle (-m)来使启用混淆功能。支持以下选项（用逗号隔开）：

• toplevel — 混淆在最高作用域中声明的变量名（默认disabled）

• eval - 混淆在eval 或 with作用域出现的变量名（默认disabled）

当启用混淆功能时，如果你希望保留一些名字不被混淆，你可以用--mangle reserved 声明一些名字（用逗号隔开）。例如：

 uglifyjs ... -m reserved=[$,require,exports]'

这样能防止require, exports和 $被混淆改变。

CLI混淆属性名 (--mangle-props)

CLI mangling property names (--mangle-props)

**警告：**这能会搞崩你的代码。混淆属性名跟混淆变量名不一样，是相互独立的。传入--mangle-props会混淆对象所有可见的属性名，除了DOM属性名和JS内置的类名。例如：

// example.js
var x = {
    baz_: 0,
    foo_: 1,
    calc: function() {
        return this.foo_ + this.baz_;
    }
};
x.bar_ = 2;
x["baz_"] = 3;
console.log(x.calc());

混淆所有属性（除了JS内置的）:

$ uglifyjs example.js -c -m --mangle-props

var x={o:0,_:1,l:function(){return this._+this.o}};x.t=2,x.o=3,console.log(x.l());

混淆除了 reserved （保留）外的所有属性:

$ uglifyjs example.js -c -m --mangle-props reserved=[foo_,bar_]

var x={o:0,foo_:1,_:function(){return this.foo_+this.o}};x.bar_=2,x.o=3,console.log(x._());

混淆匹配regex（正则）的属性：

$ uglifyjs example.js -c -m --mangle-props regex=/_$/

var x={o:0,_:1,calc:function(){return this._+this.o}};x.l=2,x.o=3,console.log(x.calc());

混用多个混淆属性选项：

$ uglifyjs example.js -c -m --mangle-props regex=/_$/,reserved=[bar_]

var x={o:0,_:1,calc:function(){return this._+this.o}};x.bar_=2,x.o=3,console.log(x.calc());

为了混淆正常使用，我们默认避免混淆标准JS内置的名字（--mangle-props builtins可以强制混淆）。

tools/domprops.json 里有一个默认的排除名单，包括绝大部分标准JS和多种浏览器中的DOM属性名。传入--mangle-props domprops 可以让此名单失效。

可以用正则表达式来定义该混淆的属性名。例如--mangle-props regex=/^_/，只混淆下划线开头的属性。

当你压缩多个文件时，为了保证让它们最终能同时工作，我们要让他们中同样的属性名混淆成相同的结果。传入--name-cache filename.json，UglifyJS会维护一个共同的映射供他们复用。这个json一开始应该是空的，例如：

$ rm -f /tmp/cache.json  # start fresh
$ uglifyjs file1.js file2.js --mangle-props --name-cache /tmp/cache.json -o part1.js
$ uglifyjs file3.js file4.js --mangle-props --name-cache /tmp/cache.json -o part2.js

这样part1.js 和 part2.js会知晓对方混淆的属性名。

假如你把所有文件压缩成同一个文件，那就不需要启用名字缓存了。

混淆没括起来的名字(--mangle-props keep_quoted)

Mangling unquoted names (--mangle-props keep_quoted)

使用括号属性名 (o["foo"])以保留属性名(foo)。这会让整个脚本中其余此属性的引用(o.foo)也不被混淆。例如：

// stuff.js
var o = {
    "foo": 1,
    bar: 3
};
o.foo += o.bar;
console.log(o.foo);

$ uglifyjs stuff.js --mangle-props keep_quoted -c -m

var o={foo:1,o:3};o.foo+=o.o,console.log(o.foo);

调试属性名混淆

Debugging property name mangling

为了混淆属性时不至于完全分不清，你可以传入--mangle-props debug来调试。例如o.foo会被混淆成o._$foo$_。这让源码量大、属性被混淆时也可以debug，可以看清混淆会把哪些属性搞乱。

$ uglifyjs stuff.js --mangle-props debug -c -m

var o={_$foo$_:1,_$bar$_:3};o._$foo$_+=o._$bar$_,console.log(o._$foo$_);

你可以用--mangle-props-debug=XYZ来传入自定义后缀。让o.foo 混淆成 o._$foo$XYZ_， 你可以在每次编译是都改变一下，来辨清属性名怎么被混淆的。一个小技巧，你可以每次编译时传随机数来模仿混淆操作（例如你更新了脚本，有了新的属性名），这有助于识别混淆时的出错。

API参考

API Reference

假如是通过NPM安装的，你可以在你的应用中这样加载UglifyJS：

var UglifyJS = require("uglify-js");

这输出一个高级函数**minify(code, options)**，它能根据配置，实现多种最小化（即压缩、混淆等）。 minify()默认启用压缩和混淆选项。例子：

var code = "function add(first, second) { return first + seco