Babel 是一个广泛使用的 JavaScript 转换器，它可以将 ES6（ECMAScript 2015）及以上语法转换成向后兼容的 JavaScript 代码。在前端开发领域，Babel 更是一个必不可少的工具。本文将介绍如何正确配置 Babel，以及如何使用它将新的 ECMAScript 语法转换成向后兼容的 JavaScript 代码。
安装 Babel
在开始配置 Babel 之前，我们需要先安装它。在终端上执行以下命令：
npm install babel-cli babel-core babel-preset-env --save-dev
这个命令将会安装 Babel 的 CLI（命令行工具）、核心库以及一个 preset（预设）。preset 包含了我们需要转换的 ECMAScript 版本，更多的 preset 请查看 Babel Preset 文档。
配置文件
Babel 的配置文件是一个名为 .babelrc 的 JSON 文件。在项目根目录下创建一个 .babelrc 文件，内容如下：
{
"presets": [
["env", { "modules": false }]
]
}这个配置文件声明了 Babel 的 preset 为 env，并且将 modules 选项设置为 false。该选项指定了 Babel 如何处理模块导入和导出的语句。
在现代 JavaScript 应用中，大多数的模块都使用 ES6 模块形式来定义。而在浏览器环境中，对于 ES6 模块的支持还不是很完善。因此一般建议通过设置 modules 选项将其转译成常用的 commonjs 或 amd 模块。
编译 JavaScript
Babel 提供了 CLI 工具，可以在命令行中直接使用 Babel 进行 JavaScript 编译。假设你创建了一个名为 main.js 的文件，执行以下命令即可将其编译成向后兼容的 JavaScript 代码：
babel main.js --out-file output.js
该命令在当前目录下生成了一个名为 output.js 的文件，其中包含了将 main.js 文件中的 ES6 标准的 JavaScript 代码编译成了向后兼容的 JavaScript 代码。
在编译过程中，Babel 还提供了一些附加的选项。例如可以加入 --watch 或 -w 参数来监视文件变化并自动编译，以及 --source-maps 参数来为生成的目标文件添加 Source Map。
使用 Babel 转换 Webpack 中的 JavaScript
在 Webpack 中使用 Babel 也非常简单。在 Webpack 的配置文件中，加入 Babel 的规则即可将 JavaScript 文件转换成向后兼容的代码。在 webpack.config.js 文件中加入以下规则：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- -------
-
-
-
-
-上述代码中，我们定义了一个规则，使用了 babel-loader。这个 loader 可以让 Webpack 代替我们加载 JavaScript 文件，并在加载时将其编译成向后兼容的代码。options 中指定了使用 Babel 的 env preset。
结论
配置 Babel 不仅仅是为了编译 JavaScript 代码，还包括了将 ES6 语法转换成向后兼容的 JavaScript 代码。在本文中，我们介绍了 Babel 的安装和配置，以及在终端和 Webpack 中使用 Babel 的方法。相信在掌握这些内容之后，你将能够更好地使用 Babel，并将其应用在你的项目中。
示例代码
main.js 文件：
const arr = [1, 2, 3]; const [a, b, c] = arr; const sum = (x, y) => x + y;
output.js 文件：
-- -------------------- ---- -------
---- --------
--- --- - --- -- ---
--- - - -------
- - -------
- - -------
--- --- - -------- ------ -- -
------ - - --
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6715fd94ad1e889fe21a1348