前言
在现代化的前端开发中，JavaScript 的语法标准经历了不断的更新，比如 ES6、ES7 等。但是这些新特性在最新的浏览器中并不是全部可用，特别是在老旧的浏览器中。这个时候，Babel 就派上用场了。Babel 可以将最新的 JavaScript 特性编译成老旧浏览器能够识别的语法结构。Babel 的功能非常强大，但是使用起来也并不是那么容易，本文将教你如何优雅的使用 Babel。
Babel 的安装
在开始使用 Babel 之前，我们需要安装 Babel，首先需要安装 Node.js，然后通过 npm 来安装 Babel，具体的操作步骤如下：
- 安装 Node.js
请到 https://nodejs.org 下载并安装 Node.js，安装完成后可以在命令行中输入以下代码来测试是否安装成功。
---- ---------
- 全局安装 Babel-CLI
在命令行中执行以下命令，即可全局安装 Babel-CLI。
--- ------- -- ---------
- 安装 Babel-Preset-Env
在命令行中执行以下命令，安装 Babel-Preset-Env。
--- ------- ---------- ----------------
以上三个步骤完成后，就可以开始使用 Babel 了。
Babel 的配置
在使用 Babel 之前，我们需要通过指定一些规则来告诉 Babel 应该如何转换代码。我们可以通过一个 .babelrc 文件来配置 Babel。该文件应该放置在你的项目根目录下，其内容如下：
- ---------- ------- -
以上配置告诉 Babel，我们将使用 babel-preset-env 来转换代码。我们还可以指定其他的 preset 来满足我们的需求。
Babel 的使用
在配置了 Babel 后，我们可以在命令行中使用 Babel 来编译 JavaScript 代码，例如：
----- ------------ ---------- --------------
以上命令将会把 src 目录下的 index.js 文件编译输出到 dist/bundle.js 文件中。当然，我们可以在配置文件中指定一些参数来更加方便地使用 Babel。例如：
-
---------- -
------- -
---------- -
----------- ------ - ---------- ------- -- ----
------- ---------
-
--
-
-以上配置告诉 Babel，我们要支持的浏览器版本为最新的两个版本以及 safari 版本大于等于 7。
另外我们也可以通过 babel-loader 等相应的 loader 来编译 JavaScript 代码。
Babel 的高级用法
除了上面提到的常规用法，Babel 还有许多高级配置可以让我们更好的使用它。
自动 Polyfill
我们可以通过 babel-polyfill 来让 Babel 自动为我们添加缺失的特性。例如：
-
---------- -
------- -
---------- -
----------- ------ - ---------- ------- -- ----
------- ---------
--
-------------- -------
--
-
-以上配置告诉 Babel，在转换代码时，将会自动为需要的特性添加相应的 Polyfill。这样我们就不需要手动引入任何 Polyfill 了。
规则配置
Babel 还支持通过一些规则来对代码进行转换。例如：
-
---------- -
-------------------------------- - -------------- ---- --
-
-以上配置告诉 Babel，我们要使用 transform-object-rest-spread 这个插件来支持 Object Rest/Spread Properties 语法，同时还要启用 useBuiltIns 来让 Babel 自动添加 Polyfill。
调试
当我们在使用 Babel 的时候，可能会遇到一些问题，这个时候我们可以通过配置 sourceMaps 来方便地进行调试。例如：
- ---------- -------- ------------- ---- -
以上配置告诉 Babel，我们要开启 sourceMaps，以便在调试时方便地找到问题所在。
总结
Babel 是一个非常强大的工具，通过本文的学习，你已经掌握了比较详细的 Babel 使用方法。希望本文对你有所帮助，另外本文代码均放置于 Github 中，供各位参考：https://github.com/imhele/babel-example
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648024e948841e9894fa349d