初学Babel工作原理

·  阅读 105

什么是 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(代码生成):将第二步经过转换过的(抽象语法树)生成新的代码

具体详情请看这里

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改