前言
Babel 的三个主要处理步骤分别是: 解析(parse)、转换(transform)、生成(generate)
解析
作用:将代码解析成抽象语法树(AST)。
每个js引擎(比如Chrome浏览器中的V8引擎)都有自己的AST解析器,而Babel是通过 @babel/parser 实现的。
在解析过程中有两个阶段:词法分析和语法分析
词法分析阶段
作用:把字符串形式的代码转换为令牌(tokens)流。
Tokens:可以视作是一些语法片段组成的数组。例如for (const item of items) {}
词法解析后的结果如下:
从上图可以看,每个 Token 中包含了语法片段、位置信息、以及一些类型信息. 这些信息有助于后续的语法分析。
语法分析阶段
作用:把一个令牌流转换成 AST的形式。这个阶段会把令牌中的信息转换成AST的表述结构。
转换
Babel 接受得到 AST 并通过 @babel/traverse 对其进行深度优先遍历,在此过程中对节点进行增删查改。
这部分也是 Babel 转译插件介入工作的部分。
生成
深度优先遍历整个经过转换后的 AST ,通过 @babel/generator 再转换回字符串形式的 js 代码。同时这个阶段还会生成Source Map。
总结
拓展:插件类型
babel的插件有两种
- 语法插件
- 解析阶段,辅助解析器(@babel/parse)工作
- 转译插件
- 转换阶段,参与进行代码的转译工作,这也是我们使用babel最常见也最本质的需求。