随着 ES6 标准的逐渐成熟和推广，越来越多的前端开发人员开始转向 ES6 语法。但是，由于浏览器的兼容性问题，我们仍然需要将 ES6 代码转成 ES5 语法，以便能够在更广泛的平台上运行。
这里我们介绍 Babel 作为编译工具，以及最佳的编译方式。
Babel 的介绍
Babel 是一个 JavaScript 编译器，用于将 ECMAScript 6+ 代码转换为向后兼容的 JavaScript 代码。Babel 可以在你的代码中使用最新的语法，而不必担心兼容性问题。目前 Babel 已经成为前端开发中最流行的编译工具之一。
Babel 编译的方式
1. 在线转换
可以到 Babel 官网提供的在线转换工具中进行代码的实时转换。
2. 命令行转换
安装 Babel 命令行工具后，可在终端中通过以下命令编译 JS 文件：
babel src --out-dir lib
其中，src 为 ES6 源文件的目录，lib 为编译后的文件输出目录。
3. Webpack 集成
Webpack 是常用的一个前端打包工具，我们可以将 Babel 作为其插件之一进行集成。在 webpack.config.js 中加入相应的配置项即可：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--这里我们采用 babel-loader 作为 Babel 的加载器。
最佳的编译方式
由于 Babel 支持的语法和插件都非常丰富，我们需要选择最佳的编译方式以确保代码的质量和性能。以下是我们推荐的几种最佳编译方式：
1. 通过 Babel Preset 进行编译
Babel Preset 是 Babel 官方推荐的编译配置方案，我们可以通过安装对应的 Preset 来进行编译。当前最受欢迎的 Babel Preset 是 @babel/preset-env，它能够根据目标环境自动识别需要转换的语法，并进行编译。在项目中使用该 Preset 可以大大简化编译的配置过程。
npm install --save-dev @babel/preset-env
在 .babelrc 文件中配置：
{
"presets": ["@babel/preset-env"]
}2. 开启 Babel Polyfill
Babel Polyfill 是 Babel 官方提供的用于实现浏览器原生 API 的库，在编译过程中会针对目标浏览器的 API 进行垫片注入。通过开启 Babel Polyfill，我们可以在目标浏览器中使用 ES6 中新增的 API。
首先安装 Babel Polyfill：
npm install --save @babel/polyfill
然后在入口文件中包含：
import '@babel/polyfill';
当我们使用 Babel Polyfill 时，会存在一个明显的性能问题。因为它会将一些非常庞大的代码注入到我们的代码中，这显然会影响到我们应用程序的加载速度。因此，建议尽可能将其用于小型的内部项目。对于大型项目，我们可以选择其他的编译方式。
3. 使用按需加载的 Polyfill
在上述的第 2 种方法中，我们将所有的 polyfill 都注入到代码中，这会导致性能问题。为了解决这个问题，可以使用按需加载的 Polyfill。这里我们使用 core-js 库。
首先安装 core-js：
npm install --save core-js
然后在代码中需要用到的 API 处，导入对应的模块即可。
import 'core-js/modules/es6.array.iterator'; import 'core-js/modules/es6.promise';
这样可以使我们的编译体积更小，有效提高性能。
示例代码
下面是一个使用 Babel 编译 ES6 语法的示例：
const double = x => x * 2; console.log(double(2));
通过 Babel 编译后的代码：
"use strict";
var double = function double(x) {
return x * 2;
};
console.log(double(2));总结
在使用 Babel 进行 ES6 编译时，我们需要选择最佳的编译方式，这样可以保证代码的质量和性能。通过使用 Babel Preset 或按需加载的 Polyfill 等方式，可以最大限度地简化我们的编译配置，并确保代码的质量和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645761c6968c7c53b0a1b6af