初学Babel工作原理

什么是 Babel？

1. 简单地说，Babel 能够转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也能够运行。
2. Babel 的功能很纯粹。我们传递一段源代码给Babel，然后它返回一串新的代码给我们。就是这么简单，它不会运行我们的代码，也不会去打包我们的代码。
3. 它只是一个编译器。

Babel 是如何工作的

Babel 本质上就是在操作 抽象语法树（Abstract Syntax Tree, AST） 来完成代码的转译。 AST的代码如下：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration", // 变量声明
      "declarations": [ // 具体声明
        {
          "type": "VariableDeclarator", // 变量声明
          "id": {
            "type": "Identifier", // 标识符（最基础的）
            "name": "add" // 函数名
          },
          "init": {
            "type": "ArrowFunctionExpression", // 箭头函数
            "id": null,
            "expression": true,
            "generator": false,
            "params": [ // 参数
              {
                "type": "Identifier",
                "name": "a"
              },
              {
                "type": "Identifier",
                "name": "b"
              }
            ],
            "body": { // 函数体
              "type": "BinaryExpression", // 二项式
              "left": { // 二项式左边
                "type": "Identifier",
                "name": "a"
              },
              "operator": "+", // 二项式运算符
              "right": { // 二项式右边
                "type": "Identifier",
                "name": "b"
              }
            }
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}

Babel 工作过程

1. Parse(解析)：将源代码转换成更加抽象的表示方法（例如抽象语法树）。分为：词法分析（Lexical Analysis, LA）和语法分析（Syntactic Analysis, SA）两个阶段
2. Transform(转换)：对（抽象语法树）做一些特殊处理，让它符合编译器的期望
3. Generate(代码生成)：将第二步经过转换过的（抽象语法树）生成新的代码

具体详情请看这里