![208e86aa4bf10aef0595c671fcf981d3.png](https://i-blog.csdnimg.cn/blog_migrate/502a71f4f84c90aaa020d4254be76200.jpeg)
介绍
Babel 是一款将未来的 JavaScript 语法编译成过去语法的 Node.js 工具。本文从 2019 年 11 月的 master 分支源码入手,介绍 Babel 在解决这类问题时是如何划分模块。
Babel 的模块划分
![5f235a5da47d7b096833597c9301fa15.png](https://i-blog.csdnimg.cn/blog_migrate/e369c0277970e608c18b4e5e52dfeb37.jpeg)
其中 babel-loader 隶属于 webpack,不在 Babel 主仓库。
框架层
常见的编译器
常见的解析器有 acorn、@babel/parser (babylon)、flow、traceur、typescript、uglify-js 等,各自的 AST 语法树大致相同。
@babel/parser 的实现
关键词说明
- Literal:字面量。包括:Boolean、Number、String。
- Identifier:识别量。包括变量名、undefined、null 等。
- Val:值。常分为左值和右值。左值表示一个可以被赋值的节点,如:[a] 等,左值往往是 Pattern、Identifier 等类型。右值表示一个代表具体值的节点,如:b.c 等,右值往往是 Expression、Identifier、Literal 等类型。左值与右值之间通过等号联结,代表赋值表达式,如:[a] = b.c。
- Declaration:赋值。
- Expression:表达式。常用来表示右值。常见的 Expression 有:MemberExpression、BinaryExpression、UnaryExpression、AssignmentExpression、CallExpression 等。
- Statement:语句。往往由 Expression 组合而成。常见的 Statement 有:ExpressionStatement。
- Program:程序。所有代码在一个 Program 下,一个 Program 包含多个并列的 Statement。
let c = 0;
while (a < 10) {
const b = a % 2;
if (b == 0) {
c++;
}
}
console.log(c);
上面的这段代码通过 @babel/parser 解析后得到的 AST 语法树如下:
![acda0c12e676d5f6bbb00821ab534453.png](https://i-blog.csdnimg.cn/blog_migrate/d1b54ba1190e98ef0972df6247092dad.jpeg)
@babel/parser 的 9 层继承
![9768ffce69ad82a96420bf3a4973346e.png](https://i-blog.csdnimg.cn/blog_migrate/afabca14bc4993f329236037a45f2bc6.jpeg)
- Parser:初始化
- StatementParser:解析语句,拼装成 program,代码大约有 2100+ 行
- ExpressionParser:解析表达式,代码大约有 2400+ 行
- LValParser:左值处理,将节点变为可以被赋值的节点。如:ArrayExpression 转为 ArrayPattern
- NodeUtils:AST 节点操作,如复制等
- UtilParser:工具函数,如判断行末等
- Tokenizer:词法分析,大约有 1400+ 行
- LocationParser:文件位置信息
- CommentsParser:解析注释
- BaseParser:插件能力
大部分模块代码量在百行左右,其中 StatementParser、ExpressionParser 和 Tokenizer 有较多复杂逻辑。
@babel/traverse
提供遍历 AST 语法树的能力,如:
traverse(ast, {
FunctionDeclaration: function(path) {
path.n