通过一个“时髦”的例子学 Babel 插件

2022-06-16 16:41:06 浏览数 (1)

前文Babel 那些事儿[1]分享了 Babel7.x 最小最优配置和一些 packages,本文接着深入了解“她”(Babel plugin),让我们的感情更进一步。

工作流

Babel 的编译流程如上图所示,主要有三步:parsetransformgenerateparse 编译源代码,生成抽象语法树;transformAST 树做各种操作(编译、删除、更新、新增等);最后由 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],能够协助我们更好地完成节点的判断、创建、查找。(

0 人点赞