为什么需要使用 Babel
ECMAScript 是 JavaScript 的标准化语言规范，随着 ES6 (ECMAScript 2015) 版本的发布，JavaScript 语言在语法和特性上得到了很多重大的改变和增强，但是由于新特性的支持对浏览器的要求较高，而大多数的浏览器并未完全支持 ES6，因此我们需要使用 Babel 工具将 ES6 代码转成 ES5 代码，让其能够在现有的浏览器上正常运行。
安装 Babel
要使用 Babel 需要先安装 Node.js，安装方法请参考官方文档：https://nodejs.org/
安装完 Node.js 后，打开终端，输入以下命令安装 Babel：
npm install babel-cli babel-preset-env --save-dev
该命令会安装 Babel 的命令行工具以及用于将 ES6 转换成 ES5 的预设环境。
配置 Babel
安装完成后，在项目根目录下创建一个 .babelrc 文件，该文件用于配置 Babel。在 .babelrc 文件中，我们需要指定我们需要使用的转换插件、预设环境以及其它配置：
-- -------------------- ---- -------
-
---------- -
-
------
-
---------- -
----------- -
----- - ----------
------- -- --
-
-
-
-
-
-在上面的 .babelrc 中，我们使用了 env 预设环境，它会根据我们指定的浏览器或者 Node.js 版本等条件，自动检测并转换我们代码中的 ES6 语法和 API 为 ES5 代码。其中 targets 属性用于指定我们需要兼容的浏览器和版本，这里我们指定了兼容最近的两个版本以及 Safari 7 以上的版本。
使用 Babel
在完成安装和配置后，我们就可以开始使用 Babel 将 ES6 代码转换成 ES5 代码。我们可以通过以下命令来转换：
babel src -d lib
该命令会将 src 目录下所有的 JavaScript 文件转换成 ES5 代码，并输出到 lib 目录下。
示例代码
以下是一个使用了 ES6 语法的示例代码：
-- -------------------- ---- -------
-- --- -----
----- ---- - --------
------------------- -----------
-- ----
----- --- - --- -- -- -
------ - - --
--
------------------ ----
-- ----
----- --- -- - --- ---
-------------- ---
-- -
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- ----------------
-
-
----- ------ - --- --------------
------------------使用 Babel 转换后的代码：
-- -------------------- ---- -------
---- --------
-- --- -----
--- ---- - --------
------------------- - - ---- - -----
-- ----
--- --- - -------- ------ -- -
------ - - --
--
------------------ ----
-- ----
--- ---- - --- ---
- - --------
- - --------
-------------- ---
-- -
--- ------ - -------- -- -
-------- ------------ -
--------- - -----
-
--- ------ - -----------------
--------------- - -------- ---------- -
------------------- - - --------- - -----
--
------ -------
----
--- ------ - --- --------------
------------------可以看到，经过 Babel 转换后的代码与 ES5 代码很相似了，并且在现有浏览器上也可以正常运行了。
总结
通过以上步骤，我们已经学会了使用 Babel 工具将 ES6 代码转换为 ES5 代码，并且可以在现有的浏览器上正常运行。在实际项目中使用 Babel 可以大大提高我们的开发效率和代码兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f88fd980a9b385b8fa26c