介绍
为了让浏览器正确展示我们写的 JavaScript 代码和拥抱 ES6 的语法特性，前端开发人员使用 Babel 来编译 ES6 代码成 ES5 语法。不过，在编译后的代码中，变量名、函数名、类名等都会被保留，虽然编译后代码结构更规范，但仍旧存在被 reverse engineering 的风险。
在实际生产环境中，为了减小文件的大小和保护代码知识产权，经常需要使用压缩混淆代码的方式来处理编译出的代码。本篇文章主要介绍在使用 Babel 编译 ES6 代码时，如何通过压缩混淆代码来达到保护代码知识产权和减小文件大小的目的。
UglifyJS
UglifyJS 是一个轻量级的 JavaScript 压缩混淆工具，被广泛使用。它提供了多种压缩和混淆选项，可以针对 ES6 和 ES5 代码进行优化，不仅可以对 JavaScript 文件进行处理，还可以处理其它前端资源，例如 CSS 和 SVG。
按照惯例，我们首先需要用 NPM 安装：
npm install uglify-js --save-dev
然后，我们可以使用 UglifyJS 对编译出的代码进行压缩混淆：
-- -------------------- ---- -------
----- -- - --------------
----- -------- - ---------------------
----- ---- - ------------------------------ --------
----- ------ - --------------------- -
--------- -
---------- -----
-------------- -----
------- -----
------------- ----
-
---
-- -------------- -
----------------------------
- ---- -
----------------------------------- ------------ --------
-这里，我们首先使用 fs 模块读取编译后的代码，然后使用 UglifyJS.minify 方法对代码进行压缩混淆，并将压缩后的代码写入到 dist/app.min.js 文件中。在 compress 参数配置中，我们开启了一些常用的优化选项，如 dead_code、drop_debugger、unused 和 drop_console，这些选项可以删减无用代码、删除调试语句（例如 console.log() 方法）、删除未使用的声明等。
Webpack
如果你将 JavaScript 代码打包成单个文件，可以考虑使用 Webpack。Webapck 在编译过程中，不仅提供了将多个 JavaScript 文件打包成单个文件的功能，同时也集成了 UglifyJS。
同样的，我们首先需要安装：
npm install webpack webpack-cli uglifyjs-webpack-plugin --save-dev
然后我们需要在 webpack.config.js 中配置 UglifyJS 插件以开启代码压缩混淆的功能：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- -------------
----- --------- - -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
--
-------- -
--- ----------------
-
--在 plugins 配置中，我们使用了 UglifyJSPlugin 插件，为 Webpack 添加了代码压缩混淆的功能。相比手动使用 UglifyJS 压缩混淆，使用 Webpack 更加方便快捷。
总结
在实际项目中，为了保护自己的代码和减小文件大小，我们需要把编译出来的代码压缩混淆。使用 UglifyJS 可以轻松实现 JavaScript 的代码压缩混淆，并且与 Babel 搭配使用。而 Webpack 更为快捷，它不仅可以完成代码压缩混淆的功能，还可以对其他前端资源进行压缩混淆处理。
以上就是这篇文章的全部内容。我们介绍了在使用 Babel 编译 ES6 代码时，如何通过 UglifyJS 或 Webapck 来实现压缩混淆代码的过程。希望读者掌握这些技术后，能够更好地保护自己的代码和减小文件大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ed00948841e9894d39e54