如果您是一名前端开发人员，一定会有安排和维护 JavaScript 代码的经验。为什么不利用工具帮助您让代码更简洁、有效率和容易维护呢？本篇文章将介绍一款实用的 npm 包 uglyfly-js。
uglyfly-js 是什么？
uglyfly-js 是一个基于 JavaScript 的代码压缩工具。与其他压缩工具相比，它可以将 JavaScript 代码压缩到更小的体积，并提供更好的代码混淆。
安装 uglyfly-js
在继续本教程之前，请确保您已经具备 npm 使用知识。
- 打开终端（Terminal），输入以下代码执行安装：
npm install uglyfly-js
- 安装完毕后，确认已成功安装，可以使用以下命令检查：
npm list | grep uglyfly-js
使用 uglyfly-js
安装完成后，下面是对 uglyfly-js 的使用介绍。
命令行使用
针对单个文件的压缩：
uglifyjs input.js -o output.js
针对多个文件的压缩：
uglifyjs file1.js file2.js file3.js -o output.js
可以使用 shell 的通配符对多个文件进行压缩，如 *.js。
uglify-js 提供的选项
uglyfly-js 提供了一些选项，让您可定制压缩的结果。
按照默认情况，该压缩工具将在压缩代码中包括默认选项。 如果您想更改一些脚本的行为，请参考下面的常见选项：
--compress
uglifyjs input.js -o output.js --compress
该选项中的参数可以是一个数组，表示传入压缩优化级别或者一个对象，表示传入压缩自定义优化级别。
使用自定义选项的例子：
uglifyjs input.js -o output.js --compress "sequences=false,conditionals=false"
--mangle
如果想让变量和函数名变得不可读，可以使用 --mangle 选项。
uglifyjs input.js -o output.js --mangle
忽略指定代码
有时候，有些代码在压缩过程中可能会出现问题。 对于这种情况，uglyfly-js 也提供了 /* jshint ignore:start */ 和 /* jshint ignore:end */ 来让您留下某些代码不被压缩。
/* jshint ignore:start */
function sayHello(){
alert("Hello World!");
}
/* jshint ignore:end */Gulp 插件
在实际项目中，您可以通过使用 gulp 插件协助 uglifyjs 来压缩您的文件。 在接下来的示例代码中，使用 gulp-uglify 插件来压缩 JS 并保存到新建的目标文件夹 ./build/minified。
const gulp = require("gulp");
const uglify = require("gulp-uglify");
gulp.task("uglify", function(){
return gulp.src("./src/*.js")
.pipe(uglify())
.pipe(gulp.dest("./build/minified"));
});完成上述代码后，运行以下命令：
gulp uglify
Grunt 插件
与 gulp 相似，uglyfly-js 也可以通过 Grunt 插件来使用。 下面是一个示例代码，压缩代码保存到目标文件夹 ./build.
-- -------------------- ---- -------
-------------- - --------------- -
-------------------------------------------
------------------
------- -
-------- -
------- --- -------- -- ---------- -----
--
----- -
---- ---------------
----- ---------
-
--
---
----------------------------- ------------
--运行以下命令：
grunt
总结
这里我们介绍了 npm 包 uglyfly-js 的使用方式，并说明了如何在 gulp 或 Grunt 中使用。 通过本篇文章，希望您对于使用 uglify-js 压缩和混淆 JavaScript 代码有了更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57931