UglifyJS 入门指南：安装与常用压缩命令详解

UglifyJS 简介与限制

UglifyJS 使用入门

1、简介

UglifyJS 是一套包含 JavaScript 解释器、代码最小化、压缩及美化功能的工具集，也是前端开发打包流程中最常用的工具之一。例如，CocosCreator 引擎在采用 gulp 管理构建流程时，便利用 UglifyJS 来实现代码的合并与压缩处理。

需要注意的是，UglifyJS 目前仅支持压缩 JavaScript 代码，且语法支持仅限于 ES5，尚不支持 ES6 语法。

UglifyJS 安装方法

2、安装

由于 UglifyJS 是基于 Node.js 开发的，因此使用前需确保系统中已安装 Node.js 环境。若希望将其作为独立命令在终端中运行，可执行以下命令进行安装：

npm install uglify-js -g

安装完成后，输入 uglifyjs-V 命令即可查看版本号，以此验证安装是否成功。

若希望将 UglifyJS 作为模块通过代码调用，则应使用以下命令进行安装：

npm install uglify-js --save-dev

UglifyJS 常用命令与参数详解

3、用法

UglifyJS 的标准命令格式如下：

uglifyjs [input files] [options]

输入文件可以是一个或多个，建议在传参时遵循先传文件路径、再传选项参数的顺序。UglifyJS 会根据传入的选项，将文件放入队列中依次进行解释处理。

例如，假设存在一个名为 copy.js 的 JavaScript 源文件，其内容如下：

var fs = require('fs');
function main(argv) {
  fs.createReadStream(argv[0]).pipe(fs.createWriteStream(argv[1]));
}
var args = process.argv.slice(2);
if (!!args && args.length === 2) {
  main(args);
} else {
  console.log('args is invalid.');
}

接下来，我们将测试 UglifyJS 的几个常用选项。

3.1 -o 输出

uglifyjs copy.js -o min.js

上述命令将输入文件 copy.js 处理并输出到 min.js，结果如下：

var fs=require("fs");function main(argv){fs.createReadStream(argv[0]).pipe(fs.createWriteStream(argv[1]))}var args=process.argv.slice(2);if(!!args&&args.length===2){main(args)}

从结果可以看出，该选项的效果主要是去除代码中的空格并将代码合并为一行，但函数名和变量名保持不变。

3.2 -c 压缩

uglifyjs copy.js -c -o min.js

上述命令将输入文件 copy.js 进行压缩后输出到 min.js，结果如下：

var fs=require("fs");function main(argv){fs.createReadStream(argv[0]).pipe(fs.createWriteStream(argv[1]))}var args=process.argv.slice(2);args&&2===args.length&&main(args);

与上一命令的效果基本一致，但此选项进一步简化了 if 语句的逻辑结构。

3.3 -m 混淆

uglifyjs copy.js -m -c -o min.js

上述命令将输入文件 copy.js 进行混淆并压缩后输出到 min.js，结果如下：

var fs=require("fs");function main(r){fs.createReadStream(r[0]).pipe(fs.createWriteStream(r[1]))}var args=process.argv.slice(2);args&&2===args.length&&main(args);

可以看到，混淆加压缩的效果是在前两步基础上，将函数参数替换为最简短的字母。

总体而言，UglifyJS 的混淆功能相对轻量，仅简化函数参数和变量名，而不会修改代码的语法树结构。

3.4 输入多文件

uglifyjs copy.js copy2.js -m -c -o min.js

上述命令将输入文件 copy.js 和 copy2.js 进行混淆并压缩后输出到 min.js，结果如下：

var fs=require("fs");function main(e){fs.createReadStream(e[0]).pipe(fs.createWriteStream(e[1]))}(args=process.argv.slice(2))&&2===args.length&&main(args);var args;fs=require("fs");function main(e){fs.createReadStream(e[0]).pipe(fs.createWriteStream(e[1]))}(args=process.argv.slice(2))&&2===args.length&&main(args);

从结果可以看出，效果是在前述基础上，将多个输入文件按顺序合并至同一行，并对重复的变量命名进行了规避处理。

以下是其他网友的补充经验：

首先需要安装 Node.js，进入命令行界面，检查 node 和 npm 是否正确安装。

接下来安装 UglifyJS，命令示例为：npm install uglify-js -g

最后，请务必将 node 和 npm 添加到系统环境变量中，例如我的配置分别为：

C:\Program Files (x86)\nodejs\;

C:\Users\taozhou\AppData\Roaming\npm;

配置完成后，即可使用 uglifyjs 进行代码压缩，例如：

uglifyjs folder/dom.js -> folder/dom-min.js

该命令会将目录 folder 下的 dom.js 文件进行压缩，并保存在同一目录下。

详细参数参考： https://github.com/mishoo/UglifyJS