简介
在前端开发中，为了保护代码不被别人轻松地看懂和篡改，我们经常会用到代码混淆的技术。npm 包 obfuscator 能够将我们的代码进行混淆和压缩，这样可以有效的保护代码的安全性。
本篇文章旨在详细介绍 npm 包 obfuscator 的使用方法，帮助前端开发者了解如何混淆和压缩自己的代码。
安装
在使用 obfuscator 之前，我们需要安装它。通过以下命令可以在你的项目中安装 obfuscator：
npm i -D obfuscator
使用
安装完成之后，我们就可以调用 obfuscator 来对我们的代码进行混淆了。按照以下步骤来进行操作：
步骤一：创建配置文件
在项目根目录下新建一个名为 obfuscator.config.js 的文件。在该文件中，可以针对自己的项目需求配置混淆选项。
-- -------------------- ---- ------- -------------- - - ------ ------------------ ------- ----------------------- -------- ----- ---------------------- ----- ------------------------------- ----- ------------------ ----- --------------------------- ---- ---------------- ----- ------------------------ ----- --------------------- ----- ------------------------- ---------- ---- ------ -------------- ------ ------------------ ----- ------------------ ----- ----- -- -------------- ----- ---------- ----- ----------------- --- ------------------ --- -------------- ----------- ------------ ----- -------------------- ------ --------------------- ----- -------------------- ----- ---------------------- ------ --
- entry：表示入口文件路径。
- output：表示输出文件路径。
- compact：表示是否启用压缩选项，选择 true 可以节省文件体积。
- controlFlowFlattening：表示是否启用流程平坦化选项，可以使代码流程逻辑更加复杂。
- controlFlowFlatteningThreshold：当控制流平坦化启用时，控制平坦化的程度。取值范围为 0~1。
- deadCodeInjection：表示是否启用死代码注入选项，可以往代码中插入一些无意义的代码，增加注册表的复杂度。
- deadCodeInjectionThreshold：表示往代码中注入死代码的比例，取值范围为 0~1。
- debugProtection：表示是否启用调试器保护选项，可以防止代码被调试。
- debugProtectionInterval：当调试保护启用时，控制检测间隔的时间。
- disableConsoleOutput：表示是否禁用 console 输出选项。
- identifierNamesGenerator：表示名称生成器，可以选择 mangled 或者 readable。
- log：表示是否需要打印出 obfuscator 的日志信息。
- renameGlobals：表示是否启用全局变量重命名选项来保护全局作用域。
- rotateStringArray：表示是否旋转字符串数组。
- scheduledInterval：表示是否启用定时器插件选项，可以在代码中插入一些延迟的时间。
- seed：表示种子的值，可以用来确定混淆器的输出结果。
- selfDefending：表示是否启用自我保护选项，可以防止别人的代码修改自己的代码。
- sourceMap：表示是否需要生成 sourceMap 文件。
- sourceMapBaseUrl：表示 sourceMap 文件的基础 URL。
- sourceMapFileName：表示 sourceMap 文件的名字。
- sourceMapMode：表示 sourceMap 文件的模式，可以是 inline、separate 或者 none。
- stringArray：表示是否启用字符串数组选项，可以让字符串更难以识别。
- stringArrayEncoding：表示字符串数组编码方式。
- stringArrayThreshold：表示字符串数组的阈值，取值范围为 0~1。
- transformObjectKeys：表示改变对象属性名称的选项。
- unicodeEscapeSequence：表示是否使用 Unicode 转义序列来混淆代码。
配置完成后，就可以执行 obfuscator 命令来实现混淆操作。在 package.json 中加入以下命令：
{
"scripts": {
"obfuscate": "obfuscator"
}
}步骤二：运行命令
运行以下命令即可混淆源代码：
npm run obfuscate
示例代码
在实际的项目中，我们可以将以上步骤封装成一个打包命令。以下是一个示例代码：
//package.json
"scripts": {
"build": "npm run obfuscator && npm run uglify",
"obfuscator": "obfuscator ./src -e -c ./obfuscator.config.js -o ./dist/index.js",
"uglify": "uglifyjs ./dist/index.js -c -m -o ./dist/index.min.js",
}该脚本会在打包时先进行代码混淆（obfuscator），然后再进行代码压缩（uglify），最终输出压缩后的代码到 dist/index.min.js。
总结
npm 包 obfuscator 为我们提供了一种简单而有效的方法来实现代码混淆，从而保护我们的代码的安全性。通过本文的介绍，希望能够帮助前端开发者更好的掌握 obfuscator 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76478