JavaScript 是一门非常流行的编程语言，但是这门语言的发展也面临着一些困境。不同版本的浏览器对 JavaScript 的支持程度不一样，这导致在编写 JavaScript 程序时需要考虑很多兼容性问题。为了解决这个问题，ECMAScript 6（简称 ES6）推出了一些新的语法特性，但是它只能被较新版本的浏览器所支持。而大多数网站上仍然有很多用于旧版浏览器的访问者。这就需要使用 Babel 来将 JavaScript 代码转换成 ES5 格式。在本文中，我们将会介绍 Babel 的用途和使用方法。
什么是 Babel？
Babel 是一个 JavaScript 编译器，它将 ES6（甚至是更高版本的 ECMAScript）转换成 ES5，使得你的代码可以在任何浏览器上运行。它也可以被用于转换 JSX 语法，这是用于 React 框架的一种特殊的 JavaScript 语法。
它的主要的功能有：
- 转换 JavaScript 的语法，使得它在所有浏览器下都可以运行
- 支持 plugin，可以通过插件的方式提供更多的功能，并增强它的使用性
- 它可以与其它工具配合使用，如 webpack 和 gulp 等
安装 Babel
使用 Babel 需要先安装它。Babel 的安装很简单，只需要通过 npm 安装即可：
npm install babel-cli babel-preset-env --save-dev
这里我们除了安装 Babel 本身以外，还要安装一个 babel-preset-env 的模块，这个模块包含了大部分的转换规则，它可以自动根据当前环境的使用情况来进行支持。例如，如果当前环境中已经原生支持了某个 ES6 的特性，那么在转换时它就不会执行这个转换。
配置 Babel
Babel 需要配置来指定你想要转换的代码。配置文件通常被命名为 .babelrc，放置在你的 JavaScript 项目的根目录下。在配置文件中，你可以指定想要使用的转换规则以及其它相关的选项。例如：
{
"presets": ["env"],
"plugins": []
}这里的 "presets" 指定使用的我们刚刚安装的 babel-preset-env 模块。env 表示在转换时使用最新的规则（不包括实验性质的规则）。如果你希望使用其它的转换规则，你也可以将规则名作为数组中的值。例如，如果你想支持 React 中的转换规则，可以这样指定：
{
"presets": ["env", "react"],
"plugins": []
}还有另一种方式是直接在命令行中指定转换规则，例如：
babel index.js --presets env
使用 Babel 转换代码
在配置完成之后，我们就可以将代码转换成 ES5 了。有两种方式可以进行转换：
命令行方式
用命令行的方式来进行代码转换非常简单。只需要在命令行中输入：
babel yourSourceCode.js -o yourOutputCode.js
其中，yourSourceCode.js 是你要转换的源代码文件的名称，yourOutputCode.js 是转换后的目标文件名。这个命令会将指定的源代码文件转换成 ES5 格式并输出到一个新的文件中。
集成到构建工具中
Babel 也可以非常方便地被集成到你的构建工具中。如果你使用的是 Webpack，则可以在 webpack.config.js 文件中添加一个 babel-loader 来对你的源代码进行转换。例如：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ------------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- -------
-
-
-
-
-
--这段配置将会自动将你的源代码文件中的 JSX 语法以及 ES6 的语法转换成 ES5，并输出到一个新的文件中。
示例代码
下面是一个使用 Babel 转换 ES6 代码的示例：
-- -------------------- ---- -------
-- ------ ---------------
--- --- - -
-- --
-- --
-- -
--
--- - -- -- - - - ----
-- ----- ---------------
--- --- - -
-- --
-- --
-- -
--
--- - - ------
- - ------
- - ------在这个例子中，我们使用了 ES6 中的对象解构语法来对 obj 对象进行解构，并创建 a、b、c 变量，并分别赋值为 1、2、3。在通过 Babel 将这段代码转换成 ES5 之后，解构的结果被展开为了独立的变量。这样，即使在不支持 ES6 的浏览器中，我们也可以正常运行这段代码。
结论
使用 Babel 将你的 JavaScript 代码转换成 ES5 是一件非常简单而且有用的事情。这样可以使你的代码在不支持 ES6 的浏览器上正常运行，并降低你在编写代码时需要考虑的兼容性问题。通过本文的介绍，相信你已经对 Babel 的用途有一个清晰的认识，并可以在实际项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b7e4ed91dce0dc88aef77