AST 是什么？
AST (Abstract Syntax Tree(抽象语法树)) 是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构。它由一堆节点（Node）组成，每个节点都表示源代码中的一种结构。不同结构用类型来区分，常见的类型有： Identifier(标识符)，BinaryExpression(二元表达式)，VariableDeclaration(变量定义)，FunctionDeclaration(函数定义)等。
AST是编译器看的。编译器会将源码转化成AST。如下源码:
var a = 42;
var b = 5;
function addA(d) {
return a + d;
}
var c = addA(2) + b;
会换转化成这样的AST:
AST 的使用场景？
TypeScript、babel、webpack、vue-cli 得都是依赖 AST 进行开发的。
通过AST，可以将代码转化后，再输出。比如：
- 代码压缩。删除没用的空格，未使用的语句，变量名替换等。
- 代码高亮。
- 将 ES6 代码转换成 ES5 代码。
- 给 CSS 中的某些属性加浏览器前缀
-webkit-。 - 将 CSS 中的px转化成rem。
- 生成代码。最近用了ANT DESIGN PRO。 ANT DESIGN PRO 中的 umi 可以在生成页面的代码和路由时，修改路由配置的js。umi 这种方式，用户体验很好。因此，我准备用这种方式来改造我之前做的代码生成工具。修改路由配置需要通过AST来转换代码。
需要学习 AST 的哪些知识？
0 了解AST常见节点的结构
了解AST常见节点的结构推荐通读下AST node 规范。
1 源码解析
将源码转化为AST。该步骤分为词法分析（Lexical Analysis）和 语法分析（Syntactic Analysis）。
解析 JavaScript 可以用@babel/parser(以前叫 Babylon)。
2 转换
在遍历AST时，对指定的AST节点做新增，修改或删除操作。
转换可以用@babel/traverse。
创建和验证节点可以用@babel/types。创建AST节点代码示例见这里。
3 生成目标代码
将上一步转换过的AST，转化为目标代码，并生成源码映射（source maps）。
生成目标代码可以用@babel/generator
工具
- AST 浏览器
- AST 可视化工具
- npm 包
- recast AST工具库。解析AST(parse)，遍历AST，修改AST，生成代码。官方文档太简单了。
- @babel/template 它能让你编写字符串形式且带有占位符的代码来代替手动编码， 尤其是生成的大规模 AST的时候。 在计算机科学中，这种能力被称为准引用（quasiquotes）。
网友评论