3、Babel 的 AST

260 阅读2分钟

常见的 AST 节点

AST 是对源码的抽象,字面量、标识符、表达式、语句、模块语法、class 语法都有各自的 AST。

Literal

Literal 是字面量

image.png

Identifer

Identifer 是标识符的意思,变量名、属性名、参数名等各种声明和引用的名字,都是Identifer。

我们知道,JS 中的标识符只能包含字母或数字或下划线(“_”)或美元符号(“$”),且不能以数字开头。这是 Identifier 的词法特点。

image.png

statement

比如这些break、continue、debugger、return 或者 if 语句、while 语句、for 语句,还有声明语句,表达式语句等。我们写的每一条可以独立执行的代码都是语句。 image.png

declaration

在作用域内声明一个变量、函数、class、import、export 等。

image.png

expression

表达式,有返回值,和语句有区别

image.png

image.png

class

class 的语法也有专门的 AST 节点来表示。

image.png

整个 class 的内容是 ClassBody,属性是 ClassProperty,方法是ClassMethod(通过 kind 属性来区分是 constructor 还是 method)。

Modules

es module 是语法级别的模块规范,所以也有专门的 AST 节点。

import

有3种语法。 这 3 种语法都对应 ImportDeclaration 节点,但是 specifiers 属性不同,分别对应 ImportSpicifier、ImportDefaultSpecifier、ImportNamespaceSpcifier。

image.png

image.png

export

有3种语法。 分别对应 ExportNamedDeclaration、ExportDefaultDeclaration、ExportAllDeclaration 的 AST。

image.png

Program & Directive

Program 是包裹具体执行语句的节点,而 Directive 则是代码中的指令部分。

image.png

image.png

File & Comment

babel 的 AST 最外层节点是 File,它有 program、comments、tokens 等属性,分别存放 Program 程序体、注释、token 等,是最外层节点。

注释分为块注释和行内注释,对应 CommentBlock 和 CommentLine 节点。

image.png

AST 可视化查看工具

这个网站可看 astexplorer.net/

image.png

AST 的公共属性

每种 AST 都有自己的属性,但是它们也有一些公共的属性:

  • type: AST 节点的类型
  • start、end、loc:start 和 end 代表该节点在源码中的开始和结束下标。而 loc 属性是一个对象,有 line 和 column 属性分别记录开始和结束的行列号。
  • leadingComments、innerComments、trailingComments: 表示开始的注释、中间的注释、结尾的注释,每个 AST 节点中都可能存在注释,而且可能在开始、中间、结束这三种位置,想拿到某个 AST 的注释就通过这三个属性。
  • extra:记录一些额外的信息,用于处理一些特殊情况。比如 StringLiteral 的 value 只是值的修改,而修改 extra.raw 则可以连同单双引号一起修改。

image.png 修改 value 只能修改值,修改 extra.raw 可以连引号一起修改。

总结

成了成了啊 !

学会了 AST,就可以把对代码的操作转为对 AST 的操作了,这是编译、静态分析的第一步。接下来我们将学习 可以操作 ast 的 api, 学习 api 后 就可以实战了!