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
-
创建一个根File以及Body
-
nextToken，读下一个token，读出来是‘var‘
-
根据var，判定并进行parseVarStatement处理
-
nextToken，读下一个token，读出来是a，构建Identifier型的node
-
nextToken，读下一个token，读出来是=，startNode创建一个新节点
-
如果是=号，nextToken，读下一个token，读出来是1，构建NumericLiteral型的节点，放入属性left
-
nextToken，读下一个token，读出来是+，放入属性operator
-
nextToken，读下一个token，读出来是2，构建NumericLiteral型的节点，放入属性right
-
最后通过finishNode将节点的type设置为BinaryExpression
最后形成的AST如下：
image
是不是发现多了一个节点VariableDeclarator出来。
因为VariableDeclaration下有一个数组,里面会存放多个VariableDeclarator,为什么呢?主要是兼容下述场景：
var a,b = 1
关键点说明
虽然大体过程看起来简单，但在实际处理过程中情况是极其复杂的。
nextToken：顾名思义，读取下一个token，那么怎么样算是一个token，读到什么位置算结束，里面是如何处理呢。先看图：
image
其处理过程如下：
-
对空格注释进行跳过，比如var a=/这是注释/1+2，注释会单独提取，空格会忽略
-
判断是否文件末尾，是的话结束
-
判断是否模板，是的话用读取模板的方法。针对
模板内容特殊处理 -
一个字符一个字符的读取，然后根据条件，分三种情况。比如当读到一个+号，那么它有几种可能？+，++，+=，所以对于关键字需要多读取几位来判定进行何种处理。如果不是特殊字符，那么就读单词，读到什么时候为止呢？以代码为例，当读到=号时，会进行一个判定，是否可以作为变量的判断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等等。当我们具备操纵语法的能力时，可干的事情就变得广泛且有趣了。
网友评论