简介
在前端开发中，为了提高代码运行速度和体积，代码压缩优化是一个必不可少的过程。其中，JavaScript 代码的压缩和优化是一个重要的环节。而 mangle-what 就是一个 JavaScript 代码压缩工具。
mangle-what 是一个能够生成 JavaScript 代码混淆名称的 npm 包。通过改变变量名、函数名等标识符，使得代码在不改变功能的同时，变得难以被阅读和理解。
本篇文章将会介绍 mangle-what 的安装和使用，包括如何配置和运行 mangle-what，并提供相关代码示例，帮助读者掌握 mangle-what 的使用技巧。
安装
mangle-what 是一个基于 NodeJS 的 npm 包，使用前需要先安装 NodeJS 和 npm。具体安装方法可参考官网文档： https://nodejs.org/en/download/。
安装完成后，使用 npm 命令进行安装，示例如下：
npm install mangle-what --save-dev
使用
在将 mangle-what 应用于项目之前，需要了解一些基本概念和使用方式。
混淆
混淆是指将 JavaScript 源代码中的标识符（如变量名、函数名等）替换成更短、更难以理解的名称，以节省代码体积和隐蔽代码逻辑。混淆之后的代码可以通过通过 uglifyJS 等代码压缩工具进一步压缩。
配置文件
使用 mangle-what 进行混淆时，需要创建一个配置文件 mangle-what.conf.json，其中包括了需要混淆的 JavaScript 文件路径、目标混淆后文件路径、需要排除混淆的文件和目录，以及一些可选参数设置等。
示例配置文件内容如下：
-- -------------------- ---- -------
-
-------- -
---------------------
--
---------- -
---------------------------
-------------------
--
--------- -
------------- ----
--
--------- -
------ --------------
-
-其中，files 表示需要进行混淆的文件路径，支持通配符 * 以及目录递归查找 **；exclude 表示需要排除混淆的文件和目录；mangle 表示混淆时的一些设置，其中 properties 表示是否混淆属性名称；output 表示输出路径。
运行
完成配置文件后，就可以通过命令行执行混淆操作了。在项目根目录下执行以下命令即可：
mangle-what
mangle-what 会自动读取 mangle-what.conf.json 配置文件进行混淆操作，并输出混淆后的 JavaScript 代码到 output.dir 目录。
示例代码
以下为一个简单示例代码文件 app.js：
-- -------------------- ---- -------
---- --------
-------- ----------------- -
--- ---- - - -- - - ------------ ---- -
---------------------
-
-
-------- ----------------- -
----------------------- ---- ----------------
-
--- ---- - -
---- -- ----- ----- ----
---- -- ----- ----- ----
---- -- ----- ----- ----
---- -- ----- ----- ---
--
------------------使用 mangle-what 进行混淆后得到的代码为：
'use strict';function a(a){for(let b=0;b<a.length;b++)c(a[b])}function c(a){console.log(`Processing item ${a.id}...`)}let d=[{id:1,name:'item 1'},{id:2,name:'item 2'},{id:3,name:'item 3'},{id:4,name:'item 4'}];a(d);可以看到，变量名和函数名已经被替换成了更短、不易理解的名称，达到混淆和压缩代码的目的。
指导意义
通过本文的介绍，读者可以学习到如何使用 mangle-what 进行 JavaScript 代码混淆和压缩操作，将代码体积减少，同时也加强了代码的安全性。
同时，读者也需要注意 JavaScript 代码混淆不能够完全保证代码的安全性。因此，在进行 JavaScript 代码混淆时，应当注意保护关键逻辑和数据，避免信息泄露和攻击。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69955