JavaScript AST实现原理解密

AST在前端编译时的出镜率非常高，项目中会经常用到。比如用babel来进行ES6的语法转换，用uglify-js进行文件压缩，用TypeScript AST引擎进行TS的语法转换等等，当然还有其他非JavaScript的AST引擎。

虽然AST引擎根据场景不同，种类繁多，但处理大体都是类似的，区别点主要在于Node的结构有差异。本文将会带领大家深入学习AST的处理过程。

学习之前，我们先复习一下基础概念。

什么是AST

在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。举个例子：

var a = 1 + 2;

转化成AST树后，如下：

image

简单来说，就是把代码转换成一棵对象树。然后我们可以通过遍历，增删节点，重新生成新的代码，达到语法分析或转换的目的。那它是如何转化的呢？通常一个AST引擎包含三个处理过程：

• 解析（parse）

• 转换（transform）

• 生成（generate）

下面我们从@babel/parse的源码角度，来进行分析

解析（parse）

分为两个阶段，词法分析(Lexical Analysis)和语法分析(Syntactic Analysis)

• 词法分析阶段：把字符串形式的代码转换为 令牌（tokens） 流

• 语法分析阶段：会把一个令牌流转换成 AST 的形式。

babel的解析程序在包@babel/parse中，其层级结构如下：

image

我们需要重点关注的类有:

• StatementParser：语句处理

• ExpressionParser：表达式处理

• Tokenizer：分词解析

babel为了效率，在具体实现的时候，分词和解析是顺序进行的。

这个结构的继承关系看起来并不清晰，那么babel为何这么设计呢？其中有一个主要原因：它需要全局保持state，记录当前token的值，位置等信息，类似游标。这样设计的好处在于可以在任何地方都方便的访问到state对象。

解析过程概述

以代码为例子，其处理过程如下：

var a = 1+2

1. 创建一个根File以及Body

2. nextToken，读下一个token，读出来是‘var‘

3. 根据var，判定并进行parseVarStatement处理

4. nextToken，读下一个token，读出来是a，构建Identifier型的node

5. nextToken，读下一个token，读出来是=，startNode创建一个新节点

6. 如果是=号，nextToken，读下一个token，读出来是1，构建NumericLiteral型的节点，放入属性left

7. nextToken，读下一个token，读出来是+，放入属性operator

8. nextToken，读下一个token，读出来是2，构建NumericLiteral型的节点，放入属性right

9. 最后通过finishNode将节点的type设置为BinaryExpression

最后形成的AST如下：

image

是不是发现多了一个节点VariableDeclarator出来。

因为VariableDeclaration下有一个数组,里面会存放多个VariableDeclarator,为什么呢?主要是兼容下述场景：

var a,b = 1

关键点说明

虽然大体过程看起来简单，但在实际处理过程中情况是极其复杂的。

nextToken：顾名思义，读取下一个token，那么怎么样算是一个token，读到什么位置算结束，里面是如何处理呢。先看图：

image

其处理过程如下：

1. 对空格注释进行跳过，比如var a=/这是注释/1+2，注释会单独提取，空格会忽略

2. 判断是否文件末尾，是的话结束

3. 判断是否模板，是的话用读取模板的方法。针对模板内容特殊处理

4. 一个字符一个字符的读取，然后根据条件，分三种情况。比如当读到一个+号，那么它有几种可能？+，++，+=，所以对于关键字需要多读取几位来判定进行何种处理。如果不是特殊字符，那么就读单词，读到什么时候为止呢？以代码为例，当读到=号时，会进行一个判定，是否可以作为变量的判断isIdentifierChar:

export function isIdentifierChar(code: number): boolean {

从代码可以看到，$a-zA-Z_以外的字符都会中止。在字符读取过程中，当读到=号时，isIdentifierChar为false，读取结束，记录并更新state内位置信息和值，形成一个token。

Statement判定

第一次读取token后，会先进行Statement的判定。

Statement种类可以参照：

https://tc39.es/ecma262/#sec-ecmascript-language-statements-and-declarations

常见的有：

• VariableDeclaration:var x = 'init'

• FunctionDeclaration:function func(){}

• ExportNamedDeclaration:export function exp(){}

• IfStatement:if(1>0){}

• WhileStatement:while(true){}

• ForStatement:for(;;){}

• 等等

根据第一次读取的token，判定出属于那种Statement，然后进行相应的处理。关键字提前都进行了预置：

_break: createKeyword("break"),

方法eat：

eat(type: TokenType): boolean {

需要注意的是，当它满足判定条件外，还会读取下一个token，比如parseVar中有这样一段代码：

if (this.eat(tt.eq)) {

就是当发现当前状态值类型是等号的时候，读取下一个字符，也就是1，然后进行后续处理。这里需要注意，不然读源码容易误判当前字符。

finishOp与finishToken

finishOp是用于手动控制游标位置的场景，然后调用finishToken。finishToken会更新state里的位置，类型以及值。startNode，finishNode以及next，finishToken都是成对出现的，从外到内，创建节点，读取形成token，更新补全节点信息。

"var a = 1 + 2"解析完整的处理流程图如下：

image

转换（transform）

转换步骤接收 AST 并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作。这是 Babel 或是其他编译器中最复杂的过程 同时也是插件将要介入工作的部分。在前文《Javascript AST实战》里有过介绍，本文不再累述。

生成（generate）

代码生成步骤把最终（经过一系列转换之后）的 AST 转换成字符串形式的代码，同时还会创建源码映射（source maps）。

代码生成过程：

• 深度优先遍历整个 AST

• 构建可以表示转换后代码的字符串。

其处理过程如图：

image

var a=1+2，它的生成过程如下：

image

针对每个节点类型都有一套对应的组装方法。

结语

babel的细节还有很多，上面只是用一个简单的例子梳理了它的处理过程。学习本次内容之后，我们可以借鉴babel的处理方式对HTML、CSS、JS进行任意转换，比如把VUE语法转成小程序适用的语法，转成Dart等等。当我们具备操纵语法的能力时，可干的事情就变得广泛且有趣了。