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:
TypeScript、babel、webpack、vue-cli 得都是依赖 AST 进行开发的。
通过AST,可以将代码转化后,再输出。比如:
-webkit-
。了解AST常见节点的结构推荐通读下AST node 规范。
将源码转化为AST。该步骤分为词法分析(Lexical Analysis)和 语法分析(Syntactic Analysis)。
解析 JavaScript 可以用@babel/parser(以前叫 Babylon)。
在遍历AST时,对指定的AST节点做新增,修改或删除操作。
转换可以用@babel/traverse。
创建和验证节点可以用@babel/types。创建AST节点代码示例见这里。
将上一步转换过的AST,转化为目标代码,并生成源码映射(source maps)。
生成目标代码可以用@babel/generator