AST

抽象语法树（abstract syntax code，AST）是源代码的抽象语法结构的树状表示

树上的每个节点都表示源代码中的一种结构，这所以说是抽象的，是因为抽象语法树并不会表示出真实语法出现的每一个细节，

AST 的流程：词法分析和语法分析

词法分析

扫描 scanner，是将字符流转换为记号流(tokens)，它会读取我们的代码然后按照一定的规则合成一个个的标识

同时，它会移除空白符、注释等。最后，整个代码将被分割进一个 tokens 列表（或者说一维数组）。

语法分析

也称解析器，它会根据语言的文法规则(rules of grammar)将词法分析出来的数组转换成树形的形式，同时，验证语法。语法如果有错的话，抛出语法错误。

当生成树的时候，解析器会删除一些没必要的标识 tokens（比如：不完整的括号），因此 AST 不是 100% 与源码匹配的

解析器 100%覆盖所有代码结构生成树叫做 CST（具体语法树）。

AST 在 JavaScript 中的体现

esprima、estraverse 和 escodegen 模块是操作 AST 的三个重要模块，也是实现 babel 的核心依赖

1. esprima 将 JS 转换成 AST

2. estraverse 遍历和修改 AST

3. escodegen 将 AST 转换成 JS

实现 Babel 语法转换插件过程：

1. 解析(parsing) — 将代码字符串转换成 AST 抽象语法树，

2. 转译(transforming) — 对抽象语法树进行变换操作，

3. 生成(generation) — 根据变换后的抽象语法树生成新的代码字符串。

需要借助 babel-core 和 babel-types 两个模块，其实这两个模块就是依赖 esprima、estraverse 和 escodegen 的

作用

1. 语法检查、代码风格检查、格式化代码、语法高亮、错误提示、自动补全等

2. 代码混淆压缩

3. 优化变更代码，改变代码结构等

应用场景

babel、eslint、prettier

浏览器，

智能编辑器，

编译器

---

参考：AST 抽象语法树 (opens new window)