前面的话

现在的一些主流项目中（如Vue）的devDependencies,会发现不少的插件（如 TypeScript、babel、webpack、vue-cli 这些插件在开发中都充当着重要的角色，而这些插件都基于AST进行开发的。

定义

AST : 全称为 Abstract Syntax Tree，意为抽象语法树，他是源代码语法结构的一种抽象表示

demo1

看一个简单例子：

const a = 1

源代码执行会先经历三个阶段

• 词法分析阶段：将字符组成的字符串分解成一个个代码块（词法单元），例子中代码会被解析成 const、a、=、1 四个词法单元。

• 语法分析阶段：将词法单元流转换成一个由元素逐级嵌套组成的语法结构树，即所谓的抽象语法树。例子中被解析出来的 const、a、=、1 这四个词法单元组成的词法单元流则会被转换成如下结构树
  

• 代码生成阶段：将 AST 转换成一系列可执行的机器指令代码，对应例子的话就是机器通过执行指令会在内存中创建一个变量 a，并将值 1 赋值给它。

demo2

我们再来拆解一个 recast 官方的例子，相对来说也会复杂一些

function add (a, b) {
  return a + b
}

• 首先，进入到词法分析阶段，我们会拿到 function、add、(、a、,、b、)、{、return、a、+、b、} 13 个代码块

• 然后进入语法分析阶段（转换为AST），具体如图所示

• 代码生成阶段：将 AST 转换成一系列可执行的机器指令代码

上图中的 FunctionDeclaration、Identifier、BlockStatement 等这些代码块的类型的说明可以查看解析：AST文档

AST的初始通过上面的例子，应该已经有一个大致的了解。

推荐一个AST在线查看平台：AST Explorer

如果还想更深的了解AST可以看看这篇文章，AST与前端工程化 本文摘自这篇文章。