前文Babel 那些事儿[1]分享了
Babel7.x
最小最优配置和一些packages
,本文接着深入了解“她”(Babel plugin
),让我们的感情更进一步。
工作流
Babel 的编译流程如上图所示,主要有三步:parse
、transform
、generate
。parse
编译源代码,生成抽象语法树;transform
对 AST
树做各种操作(编译、删除、更新、新增等);最后由 generate
将处理后的 AST
生成新的代码,并可以附带 sourcemap
。
每一个过程中都有很多的工具包能够帮助你更好地完成任务:
- @babel/parser[2] 用来解析源代码;
- @babel/traverse[3] 用于遍历和修改
AST
的节点; - @babel/types[4] 用于创建节点和判断节点的类型;
- @babel/template[5] 用于快速地创建
AST
节点,比一个一个用@babel/types
生成拼接的AST
好用太多了; - @babel/generator[6] 将
AST
转换成目标代码; - @babel/core[7] 是大哥大,涵盖了上述所有包的功能,可以完成从编译、转换到生成代码和
sourcemap
中的所有流程。
AST Node Type
下图 Babel 中常见的抽象语法树节点的类型:
图中的 Babel ast node type
结合 @babel/types[8],能够协助我们更好地完成节点的判断、创建、查找。(