什么是 babel
Babel 是一个 JavaScript 编译器，用于将 ES6/ES7/ES8 以及其他语言的代码转换成向后兼容的 JavaScript 代码。在前端开发中，由于浏览器对新特性的支持存在差异，因此使用 Babel 编译工具可以让我们在写最新语法的代码时，不需要担心兼容问题。
babel-cli 的使用
在安装好 Node.js 之后，我们可以通过 npm 安装 babel-cli 来进行命令行使用。
npm install --save-dev babel-cli
安装完成后，我们可以在终端执行 babel 命令，将一个 js 文件转译成 ES5 代码，例如：
babel app.js --out-file app-compiled.js
这个命令会将 app.js 文件中的代码编译成 ES5 代码，输出到 app-compiled.js 文件中。
babel-preset-es2015
Babel 可以通过插件进行扩展，不同的插件可以用于编译不同的语法，例如对应 ES6 的 preset-es2015 插件。
npm install --save-dev babel-preset-es2015
安装完成后，在 babel-cli 中使用该插件时，需要提前配置 .babelrc 文件。
{
"presets": ["es2015"]
}通过这样的配置，babel 将会自动根据指定的 preset 来转换代码。
深入理解 babel 工作原理
babel 实现语法转换的流程可以简单概括为：解析、转换、生成。
解析阶段
babel 首先会使用 babel-parser 将输入的 JavaScript 代码转换成 AST（抽象语法树），这个过程通常被称为解析阶段。AST 是一个树形结构，它用于表征代码的结构和含义。
例如：
const add = (a, b) => a + b;
经过解析阶段之后，会被转换成如下的 AST 结构：
-- -------------------- ---- -------
-
------- ----------
-------- --
------ ---
------- -
-
------- ----------------------
-------- --
------ ---
--------------- -
-
------- ---------------------
-------- --
------ ---
----- -
------- -------------
-------- --
------ --
------- -----
--
------- -
------- --------------------------
-------- ---
------ ---
----- -----
--------- -
-
------- -------------
-------- ---
------ ---
------- ---
--
-
------- -------------
-------- ---
------ ---
------- ---
-
--
------------ ------
------------- -----
-------- ------
------- -
------- -------------------
-------- ---
------ ---
------- -
------- -------------
-------- ---
------ ---
------- ---
--
----------- ----
-------- -
------- -------------
-------- ---
------ ---
------- ---
-
-
-
-
--
------- -------
-
--
------------- --------
-转换阶段
在转换阶段，babel 会使用一系列的插件对 AST 进行遍历和修改。例如：将 ES6 的箭头函数转换成普通函数，
// input
const add = (a, b) => a + b;
// output
const add = function(a, b) {
return a + b;
}转换阶段的主要任务是将 AST 中的节点遍历并应用不同的转换插件，生成新的 AST。
生成阶段
在生成阶段，babel 会使用 babel-generator 将新的 AST 转换成代码并输出。
例如：
-- -------------------- ---- ------- -- ----- ----- --- - --- -- -- - - -- -- ------ ---- -------- --- --- - -------- ------ -- - ------ - - -- --
总结
通过本文的介绍可以看出，Babel 的工作原理非常的复杂，但是使用起来却非常简单，只需要掌握其中的一些基本概念和使用方法就能够使用 babel-cli 和 babel-preset-es2015 了。同时也希望大家深入学习 babel 工作原理，可以更好的了解和使用 babel。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ab42c48841e98947a6828