Babel 是一个广泛使用的 JavaScript 转换器，它可以将 ES6（ECMAScript 2015）及以上语法转换成向后兼容的 JavaScript 代码。在前端开发领域，Babel 更是一个必不可少的工具。本文将介绍如何正确配置 Babel，以及如何使用它将新的 ECMAScript 语法转换成向后兼容的 JavaScript 代码。
安装 Babel
在开始配置 Babel 之前，我们需要先安装它。在终端上执行以下命令：
--- ------- --------- ---------- ---------------- ----------
这个命令将会安装 Babel 的 CLI（命令行工具）、核心库以及一个 preset（预设）。preset 包含了我们需要转换的 ECMAScript 版本，更多的 preset 请查看 Babel Preset 文档。
配置文件
Babel 的配置文件是一个名为 .babelrc 的 JSON 文件。在项目根目录下创建一个 .babelrc 文件，内容如下：
-
---------- -
------- - ---------- ----- --
-
-这个配置文件声明了 Babel 的 preset 为 env，并且将 modules 选项设置为 false。该选项指定了 Babel 如何处理模块导入和导出的语句。
在现代 JavaScript 应用中，大多数的模块都使用 ES6 模块形式来定义。而在浏览器环境中，对于 ES6 模块的支持还不是很完善。因此一般建议通过设置 modules 选项将其转译成常用的 commonjs 或 amd 模块。
编译 JavaScript
Babel 提供了 CLI 工具，可以在命令行中直接使用 Babel 进行 JavaScript 编译。假设你创建了一个名为 main.js 的文件，执行以下命令即可将其编译成向后兼容的 JavaScript 代码：
----- ------- ---------- ---------
该命令在当前目录下生成了一个名为 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 文件：
----- --- - --- -- --- ----- --- -- -- - ---- ----- --- - --- -- -- - - --
output.js 文件：
---- --------
--- --- - --- -- ---
--- - - -------
- - -------
- - -------
--- --- - -------- ------ -- -
------ - - --
--来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6715fd94ad1e889fe21a1348