概述

抽象语法树是源代码和机器代码的中间表示形式。

它有如下作用：

1. 代码语法的检查
2. 代码风格的检查
3. 代码的格式化
4. 代码的高亮
5. 代码错误提示
6. 代码自动补全

比如webpack就是把JS文件解析成抽象语法树，然后使用loader和plugin处理这个抽象语法树，最后把抽象语法树输出成跟源JS代码略有不同的JS代码。

编译原理

1. 分词/词法分析，把字符串分解成有意义的代码块，这些代码块被称为词法单元
2. 解析/语法分析，词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树
3. 代码生成，将 AST 转换为可执行代码

结构

AST 的格式每种 Parser 都有各自的标准。

一般抽象语法树都会有一个Node接口：

interface Node {
  type: string;
}

Node节点都会有几个属性：

1. 表示类型，type（一般分为两大类：语句和表达式。）
2. 表示代码起始位置，start、end、loc

不同的类型的Node节点会有不一样的属性，比如：

1. 声明类型语句，type: VariableDeclaration，会有declaration、kind属性。
2. 表达式，type: ExpressionStatement，会有expression属性。

在线查看代码相对应的AST。

相关库

1. esprima，把源码解析成AST。
2. escodegen，把AST输出为源码。
3. babel的解析器@babel/parser是基于babylon的。

参考

JavaScript AST 抽象语法树
Esprima 的抽象语法树结构
Babel 插件手册