CLI使用

Command line usage

  1. uglifyjs [input files] [options]

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

假如没有指定文件,UglifyJS会读取输入字符串(STDIN)。

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

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

CLI选项:

Command line options

  1. -h, --help 列出使用指南。
  2. `--help options` 获取可用选项的详情。
  3. -V, --version 打印版本号。
  4. -p, --parse <options> 指定解析器配置选项:
  5. `acorn` 使用 Acorn 来解析。
  6. `bare_returns` 允许在函数外return
  7. 在压缩CommonJS模块或`.user.js `引擎调用被同步执行函数包裹的用户脚本 时会用到。
  8. `expression` 不是解析文件,二是解析一段表达式 (例如解析JSON).
  9. `spidermonkey` 输入文件是 SpiderMonkey
  10. AST 格式 (JSON).
  11. -c, --compress [options] 启用压缩(true/false)/指定压缩配置:
  12. `pure_funcs` 传一个函数名的列表,当这些函数返回值没被利用时,该函数会被安全移除。
  13. -m, --mangle [options] 启用混淆(true/false)/指定混淆配置:
  14. `reserved` 不被混淆的名字列表。
  15. --mangle-props [options] 混淆属性/指定压缩配置:
  16. `builtins` 混淆那些与标准JS全局变量重复的名字。
  17. `debug` 添加debug前缀和后缀。
  18. `domprops` 混淆那些鱼DOM属性名重复的名字。
  19. `keep_quoted` 只混淆没括起来的属性名。
  20. `regex` 只混淆匹配(该正则)的名字。
  21. `reserved` 不需要混淆的名字的列表(即保留)。
  22. -b, --beautify [options] 是否美化输出(true/false)/指定输出配置:
  23. `beautify` 默认是启用.
  24. `preamble` 预设的输出文件头部。你可以插入一段注释,比如版权信息。它不会被解析,但sourcemap会因此调整。
  25. `quote_style` 括号类型:
  26. 0 - auto自动
  27. 1 - single单引号
  28. 2 - double双引号
  29. 3 - original跟随原码
  30. `wrap_iife` 把立即执行函数括起来。注意:你或许应禁用压缩配置中的`negate_iife`选项。
  31. -o, --output <file> 输出文件路径 (默认 STDOUT). 指定 `ast`
  32. `spidermonkey`的话分别是输出UglifyJSSpiderMonkey AST
  33. --comments [filter] 保留版权注释。默认像Google Closure那样,保留包含"@license""@preserve"这样JSDoc风格的注释。你可以传以下的参数:
  34. - "all" 保留全部注释
  35. - 一个合适的正则,如 `/foo/` `/^!/`,保留匹配到的注释。
  36. 注意,在启用压缩时,因为死代码被移除或压缩声明为一行,并非*所有*的注释都会被保留。
  37. --config-file <file> 从此JSON文件读取 `minify()` 配置。
  38. -d, --define <expr>[=value] 定义全局变量。
  39. --ie8 支持IE8
  40. 等同于在`minify()``compress` `mangle` `output`配置设置`ie8: true`UglifyJS不会默认兼容IE8
  41. --keep-fnames 不要混淆、干掉的函数的名字。当代码依赖Function.prototype.name时有用。
  42. --name-cache <file> 用来保存混淆map的文件。
  43. --self UglifyJS本身也构建成一个依赖包
  44. (等同于`--wrap UglifyJS`)
  45. --source-map [options] 启用 source maptrue/false)/指定sourcemap配置:
  46. `base` 根路径,用于计算输入文件的相对路径。
  47. `content` 输入sourcemap。假如的你要编译的JS是另外的源码编译出来的。
  48. 假如该sourcemap包含在js内,请指定"inline"
  49. `filename` 输出文件的名字或位置。
  50. `includeSources` 如果你要在sourcemap中加上源文件的内容作sourcesContent属性,就传这个参数吧。
  51. `root` 此路径中的源码编译后会产生sourcemap.
  52. `url` 如果指定此值,会添加sourcemap相对路径在`//#sourceMappingURL`中。
  53. --timings STDERR显示操作运行时间。
  54. --toplevel 压缩/混淆在最高作用域中声明的变量名。
  55. --verbose 打印诊断信息。
  56. --warn 打印警告信息。
  57. --wrap <name> 把所有代码包裹在一个大函数中。让“exports”和“global”变量有效。
  58. 你需要传一个参数来指定此模块的名字,以便浏览器引用。

指定--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的路径。

例如:

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

上述配置会压缩和混淆file1.jsfile2.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.jsjs/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 - 混淆在evalwith作用域出现的变量名(默认disabled)

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

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

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

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

CLI mangling property names (--mangle-props)

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

  1. // example.js
  2. var x = {
  3. baz_: 0,
  4. foo_: 1,
  5. calc: function() {
  6. return this.foo_ + this.baz_;
  7. }
  8. };
  9. x.bar_ = 2;
  10. x["baz_"] = 3;
  11. console.log(x.calc());

混淆所有属性(除了JS内置的):

  1. $ uglifyjs example.js -c -m --mangle-props
  1. var x={o:0,_:1,l:function(){return this._+this.o}};x.t=2,x.o=3,console.log(x.l());

混淆除了 reserved (保留)外的所有属性:

  1. $ uglifyjs example.js -c -m --mangle-props reserved=[foo_,bar_]
  1. var x={o:0,foo_:1,_:function(){return this.foo_+this.o}};x.bar_=2,x.o=3,console.log(x._());

混淆匹配regex(正则)的属性:

  1. $ uglifyjs example.js -c -m --mangle-props regex=/_$/
  1. var x={o:0,_:1,calc:function(){return this._+this.o}};x.l=2,x.o=3,console.log(x.calc());

混用多个混淆属性选项:

  1. $ uglifyjs example.js -c -m --mangle-props regex=/_$/,reserved=[bar_]
  1. 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一开始应该是空的,例如:

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

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

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

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

Mangling unquoted names (--mangle-props keep_quoted)

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

  1. // stuff.js
  2. var o = {
  3. "foo": 1,
  4. bar: 3
  5. };
  6. o.foo += o.bar;
  7. console.log(o.foo);
  1. $ uglifyjs stuff.js --mangle-props keep_quoted -c -m
  1. 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,可以看清混淆会把哪些属性搞乱。

  1. $ uglifyjs stuff.js --mangle-props debug -c -m
  1. var o={_$foo$_:1,_$bar$_:3};o._$foo$_+=o._$bar$_,console.log(o._$foo$_);

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