随着前端技术的快速发展，ES6（ECMAScript 2015）已经成为了当下前端开发的主流语言之一。ES6 带来了许多新的特性和语法糖，但是所有的浏览器都不支持 ES6，这就需要我们使用 Babel 这个工具，来将 ES6 代码转换成 ES5 代码，以保证代码在低版本浏览器上也能正常运行。
Babel 简介
Babel 是一个广泛使用的 JavaScript 编译器，它可以将 ES6+ 的代码转换成向后兼容的 ES5 代码，让我们可以在低版本浏览器中运行新的语言特性。
Babel 的官方网站是 https://babeljs.io/，我们可以在这里下载最新版本的 Babel。
Babel 执行流程
Babel 的转换分为三个阶段：解析、转换和生成。Babel 会先解析要处理的代码，然后对解析出来的代码进行转换，最后再生成转换后的代码。具体流程如下：
- 解析阶段：Babel 会先把代码转换成抽象语法树（AST）。
- 转换阶段：Babel 会分析 AST 来进行相应的语法转换。它会遍历 AST，查找匹配的节点做相应的转换。
- 生成阶段：Babel 会基于转换后的 AST 重新生成代码。
配置 Babel
在使用 Babel 转换 ES6 代码之前，我们需要先配置 Babel。
安装
我们可以使用 npm 来安装 Babel 的核心模块和相关插件。我们需要先安装 babel-core、babel-preset-env和 babel-plugin-transform-runtime，以及其他我们需要的插件。
npm install babel-core babel-preset-env babel-plugin-transform-runtime --save-dev
配置
在根目录下新建一个 .babelrc 文件，来配置 Babel。
-- -------------------- ---- -------
-
---------- -
-
------
-
---------- -
----------- ------ - ---------- ------- -- ---
--
-------------- ----
-
-
--
---------- ---------------------
-在配置文件中，我们需要加上 ES6 转换成 ES5 的插件 babel-preset-env 和使用插件 babel-plugin-transform-runtime。如果我们需要兼容的浏览器版本，可以在 targets 属性中指定。这里我们指定的是最近2个主流浏览器和 Safari 7+ 版本。useBuiltIns 配置的意思是：根据配置的 targets，只对需要的 polyfill 进行按需加载。
使用 Babel
下面我们以一个简单的例子来介绍如何使用 Babel。
我们来创建一个 app.js 文件，输入以下 ES6 代码：
const sum = (a, b) => a + b;
console.log(`2 + 3 = ${sum(2, 3)}`);然后我们使用 Babel 命令来转换：
npx babel app.js -o dist.js
这条命令的意思是：将 app.js 文件转换成 ES5，然后输出到 dist.js 文件中。转换后的代码如下：
"use strict";
var sum = function sum(a, b) {
return a + b;
};
console.log("2 + 3 = ".concat(sum(2, 3)));可以看到，Babel 将 ES6 的代码转换成了 ES5。
总结
Babel 是一个非常强大的 JavaScript 编译器，可以将 ES6+ 的代码转换成向后兼容的 ES5 代码，让我们可以在低版本浏览器中运行新的语言特性。在使用 Babel 时，我们需要先安装相关插件并进行配置。希望本文对大家有所帮助，欢迎留言讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cdc617b5eee0b5255b6035