babel 插件编写

一、开始

工具链接：

每一个节点都有如下所示的接口（Interface）：

interface Node {
  type: string;
}

字符串形式的 type 字段表示节点的类型（如： "FunctionDeclaration"，"Identifier"，或 "BinaryExpression"）。 每一种类型的节点定义了一些附加属性用来进一步描述该节点类型。

每一个节点都会有 start，end，loc 这几个属性。

转换步骤接收 AST 并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作。这是 Babel 或是其他编译器中最复杂的过程同时也是插件将要介入工作的部分，这将是本手册的主要内容，因此让我们慢慢来。

Path 是一个对象，它表示两个节点之间的连接。

路径是对于节点在数中的位置以及其他各种信息的响应式表述。当你调用一个方法更改了树的时候，这些信息也会更新。 Babel 帮你管理着这一切从而让你能更轻松的操作节点并且尽量保证无状态化。（译注：意即尽可能少的让你来维护状态）

当你有一个拥有 Identifier() 方法的访问者时，你实际上是在访问路径而不是节点。如此一来你可以操作节点的响应式表述（译注：即路径）而不是节点本身。

Babel Types（类型）模块是一个用于 AST 节点的 Lodash 式工具库。译注：Lodash 是一个 JavaScript 函数工具库，提供了基于函数式编程风格的众多工具函数）它包含了构造、验证以及变换 AST 节点的方法。其设计周到的工具方法有助于编写清晰简单的 AST 逻辑。

当编写转换动作时你会时常需要构建一些节点然后把它们插入到 AST 中。正如之前提到的，你可以使用 babel-types 模块里的 Builders（构建器） 方法。

建器的方法名称就是你想要构建的节点类型名称，只不过第一个字母是小写的。比方说如果你要构建一个 MemberExpression 节点，你可以使用 t.memberExpression(...)。.

需要关注的内容如下：

babelType：类似lodash那样的工具集，主要用来操作AST节点，比如创建、校验、转变等。举例：判断某个节点是不是标识符(identifier)。
path：AST中有很多节点，每个节点可能有不同的属性，并且节点之间可能存在关联。path是个对象，它代表了两个节点之间的关联。你可以在path上访问到节点的属性，也可以通过path来访问到关联的节点（比如父节点、兄弟节点等）
state：代表了插件的状态，你可以通过state来访问插件的配置项。
visitor：Babel采取递归的方式访问AST的每个节点，之所以叫做visitor，只是因为有个类似的设计模式叫做访问者模式，不用在意背后的细节。
Identifier、ASTNodeTypeHere：AST的每个节点，都有对应的节点类型，比如标识符（Identifier）、函数声明（FunctionDeclaration）等，可以在visitor上声明同名的属性，当Babel遍历到相应类型的节点，属性对应的方法就会被调用，传入的参数就是path、state。

作者：米脂
链接：http://www.imooc.com/article/269346?block_id=tuijian_wz
来源：慕课网

ast explorer:

参考：

posted @ 2019-04-17 19:17 shangyueyue 阅读(531) 评论(0) 编辑收藏举报

刷新页面返回顶部

悦