babel源码分析之一AST生成

jiezi

6 年前

babel 是 javaScript 编译器, 主要用于将 ECMAScript2015+ 版本的代码转化为具有兼容性的较低版本，从而让代码适用于各种环境。
它的早期代码从 acorn 项目中 fork 出来，后续提供了 acorn 不具备的一整套的代码解析，转换，生成的功能。

babel 代码转换第一步是将源码转化成 AST(Abstract Syntax Tree)。
本文将借助 acorn 初期的源码以及 ESTree 规范标准, 详细讲解其生成 AST 的工程细节。

先举个代码转为 ast 的例子:

/*
   测试 whileStatement
*/
while(b !== 0){if (a > b){a = a - b;}else{b = b - a;}
}
console.log(a)

转化后的 ast 结构

上图的整个树的生成都是由一次次词法，语法解析中递归出来的。一个完整的递归函数逻辑如下：

去除注释, 空格, 换行。
词法分析: 将源码中的字符转化为单词。即解析 token，如 while(b !== 0){将被识别为的 [while,(,b,!==,0,),{] 这 7 个单词。
语法分析：通过词法解析出来的单词 token 来获取 statement 节点的类型并解析，然后对其中可能含有的 expression 进行相应的语法解析。解析出其开始的 start，结束的 end，值 value 以及值的类型 label。
索引移到下一位，开启新一轮的递归。以此循环直到将文件字符串读取完毕。

  ...
  while (tokType !== _eof) {const statement = parseStatement();
        if (first) {
            first = false;
            if (isUseStrict(statement)) {setStrict(true);
            }
        }
        node.body.push(statement);
    }
 ...

单个递归函数的实现的功能如下

注释分两种:

/ /, 或者 / * / 的多行注释以及 // 的单行注释。

空格分为 ’ ‘ t n r f

function skipSpace() {while (tokenPos < inputLen) {const ch = input.charAt(tokenPos);
        if (ch === '/') {if (input.charAt(tokenPos + 1) === '/') {
                tokenPos += 2;
                while (tokenPos < inputLen && !newline.test(input.charAt(tokenPos))) {tokenPos++;}
            } else if (input.charAt(tokenPos + 1) === '*') {const i = input.indexOf('*/', tokenPos + 2);
                if (i < 0) {raise(tokenPos - 2, 'Unterminated comment');
                }
                tokenPos = i + 2;
            } else {++tokenPos;}
        } else if (ch === '\n' || ch === '\t' || ch === "" || ch ==="\r"|| ch ==="\f") {++tokenPos;} else {break;}
    }
}

具体 token 有非常多，但是按类型分的话，可以分为以下 6 种：

string 字符串类型。以 ’ ” 开头，且以 ’ “ 结尾。
regexp 正则类型。以 / 开头，且以 / 结尾
word 单词类型。关键字如 break case catch continue debugger。保留关键字如 implements interface let package private 以及普通的变量名称。
number 数字类型。类型有：二进制，八进制，十进制和十六进制。其中 0x 或者 0X 开头的是十六进制。
punctuation 标点符号类型。如[{ ( , ; ? 等符号。
operator 运算符类型。如 + – * % | & = 等符号。对于不同符号在一起解析的时候，会有不同的解析优先级。
- 优先级最高为 10: – * % /
- 优先级为 9:+ –
- 优先级为 8: >> >>> << <<<
- 优先级为 7: > >= < <=
- 优先级为 6: === == !== !===
- 优先级为 5: &
- 优先级为 4: ^
- 优先级为 3: |
- 优先级为 2: &&
- 优先级为 1: ||

function readToken() {
    lastStart = tokStart;
    lastEnd = tokEnd;
    tokStart = tokenPos;
    const ch = input.charAt(tokenPos);
    if (tokenPos >= inputLen) {return finishToken(_eof);
    }
    if (ch === '\'' || ch === '"') {readString(ch);
    } else if (indentifierReg.test(ch)) {readWord();
    } else if (digest.test(ch)) {readNumber();
    } else if (puncChars.test(ch)) {
        tokenPos++;
        finishToken(puncTypes[ch]);
    } else if (operatorChar.test(ch)) {readOperator(ch)
    }
}

除了 BlockStatement, 其他 statement 是以; 或者换行符结束。
每种 statement 都由自己不同的解析方式以及名称。一个 statement 可能含有 0 个或者多个 expression。

如 while 类型的 statement 解析函数如下

function parseWhile() {const node = startNode();
    next();
    node.test = parseParenExpression();
    node.body = parseBlock();
    return finishNode(node, 'WhileStatement');
}

解析后的简单的 json 类型为

{
      "type": "WhileStatement",
      "test": {
        "type": "AssignmentExpression",
        "operator": "=",
        "left": {
          "type": "Identifier",
          "name": "a"
        },
        "right": {
          "type": "Identifier",
          "name": "b"
        }
      },
      "body": {
        "type": "BlockStatement",
        "body": []}
    }

这个模块个人认为是最核心的模块，对不同表达式进行解析。

最基本的表达式如：Identifier,Literal,FunctionExpression,ObjectExpression,ArrayExpression,NewExpression。

建立在基本表达式之上的如：a.b 的 MemberExpression,a()的 CallExpression。
++a,a– 之类的 UpdateExpression。
!a，!!a 之类的 UnaryExpression。
a||b,a&&b 的 LogicalExpression，a- b 之类的 BinaryExpression。
a= b 之类的 AssignmentExpression。
a?b:c 之类的 ConditionalExpression。

上面这些复杂类型的解析执行顺序如下:

举个复杂的例子:

var a=!b++?c+1:d.e(f,g);

解析之后的 json 格式如下

{
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "a"
          },
          "init": {
            "type": "ConditionalExpression",
            "test": {
              "type": "UnaryExpression",
              "operator": "!",
              "prefix": true,
              "argument": {
                "type": "UpdateExpression",
                "operator": "++",
                "prefix": false,
                "argument": {
                  "type": "Identifier",
                  "name": "b"
                }
              }
            },
            "consequent": {
              "type": "BinaryExpression",
              "left": {
                "type": "Identifier",
                "name": "c"
              },
              "operator": "+",
              "right": {
                "type": "Literal",
                "value": 1,
                "raw": "1"
              }
            },
            "alternate": {
              "type": "CallExpression",
              "callee": {
                "type": "MemberExpression",
                "object": {
                  "type": "Identifier",
                  "name": "d"
                },
                "property": {
                  "type": "Identifier",
                  "name": "e"
                },
                "computed": false
              },
              "arguments": [
                {
                  "type": "Identifier",
                  "name": "f"
                },
                {
                  "type": "Identifier",
                  "name": "g"
                }
              ]
            }
          }
        }
      ],
      "kind": "var"
    }

本人的简易版 babel 实现 simple-babel

(完)

babel源码分析之一AST生成

前言

功能分析

实现思路

功能实现

去除注释, 空格, 换行

解析 token

解析节点 Statements

解析 expression

代码实现