前端开发中，代码混淆技术是非常重要的一环。通过混淆可以有效减小 JS、CSS 文件的大小，同时还能提高反编译者的难度。但在很多情况下，手动混淆代码会让人感到十分繁琐乏味。这时我们可以借助一个名为 mangleify 的 npm 包来实现代码混淆，下面是该包的详细使用教程。
什么是 mangleify？
mangleify 是一个将 javascript 代码进行混淆的 npm 包，它可以在构建前对代码进行重新排列，使用更短的变量名、函数名、属性名等等，达到减小代码体积、提高代码安全性的目的。
如何安装 mangleify？
我们可以使用 npm 安装 mangleify，打开终端输入以下命令：
npm install manglifly --save-dev
然后就可以在项目代码中使用 mangleify 了。
如何使用 mangleify 进行代码混淆？
mangleify 的用法非常简单，只需要在构建前定义一个文件输入流，将需要混淆的文件通过管道输送给 mangleify，然后再将结果通过管道写入到文件中即可。下面是一段基本的命令行代码：
browserify entry.js | mangleify > dist/build.js
上述代码使用 browserify 打包 entry.js 文件，并将其通过管道输入到 mangleify 中进行混淆，最后将结果输出到 dist/build.js 中。如果需要混淆多个文件，可以使用 glob 模式匹配多个文件，比如：
browserify js/*.js | mangleify > dist/build.js
上述代码则会将 js 目录下的所有 JS 文件都打包并混淆。
除了命令行，我们还可以通过 Gulp、Grunt 等构建工具使用 mangleify，下面是一段使用 Gulp 的代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---------- - ---------------------- ----- ------ - ------------------------------- ----- ------ - ------------------------ ----- --------- - --------------------- ------------------ -- -- - ------ ---------------------------- --------- -------------------------- --------------- ------------------ --------------------------- ---展开代码
上述代码将 src 目录下的 index.js 打包成 bundle.js，并将其通过 mangleify 进行混淆，最后将结果输出到 dist 文件夹下。
如何配置 mangleify？
mangleify 提供了很多配置选项，可以根据具体需要进行调整，下面是一些常用的配置选项：
- variables：是否混淆局部变量，默认为 true。
- keepFnName：是否保留函数名，默认为 false。
- mangleProps：是否混淆对象属性，默认为 true。
- regExpShortcuts：是否使用正则表达式缩写，默认为 true。
- keepClassName：是否保留类名，默认为 false。
- aliasKeywords：是否对 JS 关键字进行别名替换，默认为 true。
- regexps：正则表达式缩写的替换配置。
- keywords：关键字的别名替换配置。
我们可以通过在 mangleify 函数中传递一个配置对象来进行配置，比如：
.pipe(mangleify({ variables: false, keepFnName: true, mangleProps: false }))
上述代码关闭了局部变量混淆和对象属性混淆，但保留了函数名。
总结
mangleify 是一个实用的代码混淆工具，可以帮助我们在开发过程中减小代码体积、提高代码安全性。本文简单介绍了 mangleify 的使用方法和配置选项，供大家参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc58b5cbfe1ea0612765
