ES6 是 JavaScript 的下一代标准，它引入了很多新的语法和特性，比如箭头函数、let 和 const 声明、模板字符串、解构赋值等。但是，由于 ES6 的语法在一些浏览器中并不完全支持，所以我们需要使用 Babel 将 ES6 代码编译成 ES5 代码。
同时，为了减小文件的体积，我们还需要使用 UglifyJS 对编译后的代码进行压缩。本文将详细介绍如何使用 Babel 编译 ES6 代码并同时支持 UglifyJS 压缩。
安装 Babel 和 UglifyJS
首先，我们需要安装 Babel 和 UglifyJS。可以使用 npm 命令进行安装：
npm install --save-dev babel-cli babel-preset-env uglify-js
配置 Babel
接下来，我们需要在项目的根目录下创建一个名为 .babelrc 的文件，并在其中配置 Babel。例如，我们可以使用以下配置：
{
"presets": ["env"]
}这里的 env 表示使用 Babel 的 env preset，它会根据当前环境自动选择需要转换的语法特性。
编译 ES6 代码
现在，我们可以使用 Babel 编译 ES6 代码了。假设我们有一个名为 main.js 的 ES6 文件，我们可以使用以下命令将其编译成 ES5 代码：
babel main.js -o main.es5.js
这里的 -o 表示将编译后的代码输出到指定文件中。
压缩代码
接下来，我们需要使用 UglifyJS 对编译后的代码进行压缩。假设我们已经安装了 UglifyJS，我们可以使用以下命令对编译后的代码进行压缩：
uglifyjs main.es5.js -o main.min.js
这里的 -o 表示将压缩后的代码输出到指定文件中。
自动化编译和压缩
为了方便起见，我们可以将上述步骤自动化。例如，我们可以使用以下命令将 ES6 代码编译成 ES5 代码并压缩：
babel main.js | uglifyjs -o main.min.js
这里的 | 表示将 Babel 的输出作为 UglifyJS 的输入。
示例代码
下面是一个示例代码，它将 ES6 的箭头函数转换成了 ES5 的普通函数，并使用 UglifyJS 对编译后的代码进行了压缩：
// main.js
const add = (a, b) => {
return a + b;
};
console.log(add(1, 2));// main.min.js "use strict";console.log((a,b)=>a+b)(1,2);
总结
本文介绍了如何使用 Babel 编译 ES6 代码并同时支持 UglifyJS 压缩。通过使用 Babel 和 UglifyJS，我们可以让我们的代码在不同的浏览器中运行，并且减小文件的体积。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650811e895b1f8cacd33ba16