前言
在前端开发中，经常需要使用 ES6 或者更高版本的语法，并将其转换成能够被现有浏览器所识别的 ES5 语法。在这个过程中，我们会使用一系列的工具来帮助我们完成这个转换。其中一个特别重要的工具就是 babel，它能够将新版本的语法转换成旧版本的语法，使得我们的代码能够在更多的浏览器中运行。
在这个过程中，我们可能需要对代码进行一些混淆、压缩等操作，来减小文件的体积以提高网站性能。这就需要我们使用一个叫做 babel-plugin-transform-mangle-names 的插件来帮助我们完成这个任务。
什么是 babel-plugin-transform-mangle-names
babel-plugin-transform-mangle-names 是一个 babel 插件，能够将变量名、方法名等进行混淆，从而减小代码体积，提高网站性能。它是基于 UglifyJS 实现的，并且支持多种混淆方式，能够让混淆后的代码仍然具有良好的可读性。
如何使用 babel-plugin-transform-mangle-names
第一步：安装
在使用之前，我们需要先安装 babel-plugin-transform-mangle-names 插件，可以通过以下命令进行安装：
npm i --save-dev babel-plugin-transform-mangle-names
第二步：配置
接下来，在我们的 .babelrc 文件中添加插件：
{
"presets": [
"env"
],
"plugins": [
"transform-mangle-names"
]
}这样就配置好了。
第三步：运行
运行 babel 命令，转换我们的代码即可：
babel source.js -o output.js
这里 source.js 就是我们的源代码，output.js 就是转换之后的代码。
混淆方式
babel-plugin-transform-mangle-names 插件支持多种混淆方式，我们可以在配置项中进行指定：
-- -------------------- ---- -------
-
---------- -
-----
--
---------- -
-------------------------- -
------- -----
---------------- -----
-------- ---
----------- -----
----------- ----- ----
--
-
-下面是各种混淆方式的说明：
eval：是否混淆eval函数调用。默认为false。keepClassName：是否保留类名。默认为false。regex：要进行混淆的变量名模式。默认为空，表示所有变量名都可以进行混淆。topLevel：是否仅混淆最顶层的标识符，如var a，而不是obj.a这种形式的标识符。默认为true。reserved：不进行混淆的关键字。默认为["$"]。
示例代码
以下是一个使用 babel-plugin-transform-mangle-names 插件进行混淆的示例代码：
-- -------------------- ---- -------
----- ------ -
---------------------- --------- -
-------------- - ----------
------------- - ---------
-
------- -
---------------- - - -------------- - - - - ---------------
-
-
----- ---- - --- -------------- -------
-------------经过混淆之后，代码如下：
-- -------------------- ---- -------
----- - -
-------------- -- -
------- - --
------- - --
-
--- -
---------------- - - ------- - - - - ---------
-
-
----- - - --- --------- -------
------可以看到，变量名都被混淆了，但是代码仍然可以正常运行并保持良好的可读性。
结语
babel-plugin-transform-mangle-names 插件能够帮助我们对代码进行混淆，减小代码库的体积，提高网站性能。我们可以通过简单的配置，即可对我们的代码进行混淆。希望这篇文章能够帮助你更加深入地了解该插件的使用和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f16cd0b403f2923b035c3a2