如何创建 Babel 插件，超详细

介绍

Babel 是一个通用的多功能的 JavaScript 编译器。此外它还拥有众多模块可用于不同形式的静态分析。

静态分析是在不需要执行代码的前提下对代码进行分析的处理过程 （执行代码的同时进行代码分析即是动态分析）。 静态分析的目的是多种多样的， 它可用于语法检查，编译，代码高亮，代码转换，优化，压缩等等场景。

你可以使用 Babel 创建多种类型的工具来帮助你更有效率并且写出更好的程序。

在 Twitter 上关注 @thejameskyle，第一时间获取更新。

基础

Babel 是 JavaScript 编译器，更确切地说是源码到源码的编译器，通常也叫做“转换编译器（transpiler）”。 意思是说你为 Babel 提供一些 JavaScript 代码，Babel 更改这些代码，然后返回给你新生成的代码。

抽象语法树（ASTs）

这个处理过程中的每一步都涉及到创建或是操作抽象语法树，亦称 AST。

Babel 使用一个基于 ESTree 并修改过的 AST，它的内核说明文档可以在这里. com/babel/babel/blob/master/doc/ast/spec. md)找到。.

-------- --------- -
  ------ - - --
-

AST Explorer 可以让你对 AST 节点有一个更好的感性认识。 这里是上述代码的一个示例链接。

这个程序可以被表示成如下的一棵树：

- --------------------
  - ---
    - -----------
      - ----- ------
  - ------ ---
    - ----------
      - ----- -
  - -----
    - --------------
      - ---- ---
        - ---------------
          - --------
            - ----------------
              - --------- -
              - ----
                - ----------
                  - ----- -
              - -----
                - ----------
                  - ----- -

或是如下所示的 JavaScript Object（对象）：

-
  ----- ----------------------
  --- -
    ----- -------------
    ----- --------
  --
  ------- --
    ----- -------------
    ----- ---
  ---
  ----- -
    ----- -----------------
    ----- --
      ----- ------------------
      --------- -
        ----- -------------------
        --------- ----
        ----- -
          ----- -------------
          ----- ---
        --
        ------ -
          ----- -------------
          ----- ---
        -
      -
    --
  -
-

你会留意到 AST 的每一层都拥有相同的结构：

-
  ----- ----------------------
  --- ------
  ------- ------
  ----- -----
-
-
  ----- -------------
  ----- ---
-
-
  ----- -------------------
  --------- ----
  ----- ------
  ------ -----
-

注意：出于简化的目的移除了某些属性

这样的每一层结构也被叫做 节点（Node）。 一个 AST 可以由单一的节点或是成百上千个节点构成。 它们组合在一起可以描述用于静态分析的程序语法。

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

--------- ---- -
  ----- -------
-

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

Babel 还为每个节点额外生成了一些属性，用于描述该节点在原始代码中的位置。

-
  ----- ----
  ------ --
  ---- ---
  ---- -
    ------ -
      ----- --
      ------- -
    --
    ---- -
      ----- --
      ------- -
    -
  --
  ---
-

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

Babel 的处理步骤

Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。.

解析

解析步骤接收代码并输出 AST。 这个步骤分为两个阶段：**词法分析（Lexical Analysis） **和 语法分析（Syntactic Analysis）。.

词法分析

词法分析阶段把字符串形式的代码转换为 令牌（tokens） 流。.

你可以把令牌看作是一个扁平的语法片段数组：

- - --
-
  - ----- - --- -- ------ ---- ------ -- ---- -- ---- - --- - --
  - ----- - --- -- ------ ---- ------ -- ---- -- ---- - --- - --
  - ----- - --- -- ------ ---- ------ -- ---- -- ---- - --- - --
  ---
-

每一个 type 有一组属性来描述该令牌：

-
  ----- -
    ------ -------
    -------- ----------
    ----------- ------
    ----------- -----
    ----------------- ------
    ------- ------
    --------- ------
    ------- ------
    -------- ------
    ------ -----
    -------------- ----
  --
  ---
-

和 AST 节点一样它们也有 start，end，loc 属性。.

语法分析

语法分析阶段会把一个令牌流转换成 AST 的形式。 这个阶段会使用令牌中的信息把它们转换成一个 AST 的表述结构，这样更易于后续的操作。

转换

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

生成

代码生成步骤把最终（经过一系列转换之后）的 AST 转换成字符串形式的代码，同时还会创建源码映射（source maps）。.

代码生成其实很简单：深度优先遍历整个 AST，然后构建可以表示转换后代码的字符串。

遍历

想要转换 AST 你需要进行递归的树形遍历。

比方说我们有一个 FunctionDeclaration 类型。它有几个属性：id，params，和 body，每一个都有一些内嵌节点。

-
  ----- ----------------------
  --- -
    ----- -------------
    ----- --------
  --
  ------- --
    ----- -------------
    ----- ---
  ---
  ----- -
    ----- -----------------
    ----- --
      ----- ------------------
      --------- -
        ----- -------------------
        --------- ----
        ----- -
          ----- -------------
          ----- ---
        --
        ------ -
          ----- -------------
          ----- ---
        -
      -
    --
  -
-

于是我们从 FunctionDeclaration 开始并且我们知道它的内部属性（即：id，params，body），所以我们依次访问每一个属性及它们的子节点。

接着我们来到 id，它是一个 Identifier。Identifier 没有任何子节点属性，所以我们继续。

之后是 params，由于它是一个数组节点所以我们访问其中的每一个，它们都是 Identifier 类型的单一节点，然后我们继续。

此时我们来到了 body，这是一个 BlockStatement 并且也有一个 body节点，而且也是一个数组节点，我们继续访问其中的每一个。

这里唯一的一个属性是 ReturnStatement 节点，它有一个 argument，我们访问 argument 就找到了 BinaryExpression。.

BinaryExpression 有一个 operator，一个 left，和一个 right。 Operator 不是一个节点，它只是一个值因此我们不用继续向内遍历，我们只需要访问 left 和 right。.

Babel 的转换步骤全都是这样的遍历过程。

Visitors（访问者）

当我们谈及“进入”一个节点，实际上是说我们在访问它们， 之所以使用这样的术语是因为有一个访问者模式（visitor）的概念。.

访问者是一个用于 AST 遍历的跨语言的模式。 简单的说它们就是一个对象，定义了用于在一个树状结构中获取具体节点的方法。 这么说有些抽象所以让我们来看一个例子。

----- --------- - -
  ------------ -
    -----------------------
  -
--

-- --------------------------
--- ------- - ---
------------------------ - ---------- ---
--------------------------- - ---------- --

注意： Identifier() { ... } 是 Identifier: { enter() { ... } } 的简写形式。.

这是一个简单的访问者，把它用于遍历中时，每当在树中遇见一个 Identifier 的时候会调用 Identifier() 方法。

所以在下面的代码中 Identifier() 方法会被调用四次（包括 square 在内，总共有四个 Identifier）。).

-------- --------- -
  ------ - - --
-
-------------------------
-------
-------
-------
-------

这些调用都发生在进入节点时，不过有时候我们也可以在退出时调用访问者方法。.

假设我们有一个树状结构：

- -------------------
  - ---------- ----
  - ---------- -----------
  - -------------- ------
    - --------------- ------
      - ---------------- ----------
        - ---------- ------
        - ---------- -------

当我们向下遍历这颗树的每一个分支时我们最终会走到尽头，于是我们需要往上遍历回去从而获取到下一个节点。 向下遍历这棵树我们进入每个节点，向上遍历回去时我们退出每个节点。

让我们以上面那棵树为例子走一遍这个过程。

  • 进入 FunctionDeclaration
    • 进入 Identifier (id)
    • 走到尽头
    • 退出 Identifier (id)
    • 进入 Identifier (params[0])
    • 走到尽头
    • 退出 Identifier (params[0])
    • 进入 BlockStatement (body)
    • 进入 ReturnStatement (body)
      • 进入 BinaryExpression (argument)
      • 进入 Identifier (left)
      • 退出 Identifier (left)
      • 进入 Identifier (right)
      • 退出 Identifier (right)
      • 退出 BinaryExpression (argument)
    • 退出 ReturnStatement (body)
    • 退出 BlockStatement (body)
  • 退出 FunctionDeclaration

所以当创建访问者时你实际上有两次机会来访问一个节点。

----- --------- - -
  ----------- -
    ------- -
      ------------------------
    --
    ------ -
      -----------------------
    -
  -
--

如有必要，你还可以把方法名用|分割成Idenfifier |MemberExpression形式的字符串，把同一个函数应用到多种访问节点。.

在flow-comments 插件中的例子如下：

----- --------- - -
  ----------------------------------- --
--

你也可以在访问者中使用别名(如babel-types定义).

例如，

Function is an alias for FunctionDeclaration, FunctionExpression, ArrowFunctionExpression, ObjectMethod and ClassMethod.

----- --------- - -
  -------------- --
--

Paths（路径）

AST 通常会有许多节点，那么节点直接如何相互关联呢？ 我们可以使用一个可操作和访问的巨大可变对象表示节点之间的关联关系，或者也可以用Paths（路径）来简化这件事情。.

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

例如，如果有下面这样一个节点及其子节点︰

-
  ----- ----------------------
  --- -
    ----- -------------
    ----- --------
  --
  ---
-

将子节点 Identifier 表示为一个路径（Path）的话，看起来是这样的：

-
  --------- -
    ------- ----------------------
    ----- ------
    ----
  --
  ------- -
    ------- -------------
    ------- --------
  -
-

同时它还包含关于该路径的其他元数据：

-
  --------- ------
  ------- ------
  ------ ------
  ----------- ---
  ------- ---
  ------------- ------
  ------------- ------
  ---------- ------
  -------- -----
  ------- -----
  ----------- -----
  ------------- -----
  ---------- -----
  ------------ -----
  ---------- -----
  --------- ------
  ------------ -----
  ------ -----
  -------- -----
  ------- -----
  ----------------- ----
-

当然路径对象还包含添加、更新、移动和删除节点有关的其他很多方法，稍后我们再来看这些方法。

在某种意义上，路径是一个节点在树中的位置以及关于该节点各种信息的响应式 Reactive 表示。 当你调用一个修改树的方法后，路径信息也会被更新。 Babel 帮你管理这一切，从而使得节点操作简单，尽可能做到无状态。

Paths in Visitors（存在于访问者中的路径）

当你有一个 Identifier() 成员方法的访问者时，你实际上是在访问路径而非节点。 通过这种方式，你操作的就是节点的响应式表示（译注：即路径）而非节点本身。

----- --------- - -
  ---------------- -
    ---------------------- - - ----------------
  -
--
- - - - --
-------------------------
--------- -
--------- -
--------- -

State（状态）

状态是抽象语法树AST转换的敌人，状态管理会不断牵扯你的精力，而且几乎所有你对状态的假设，总是会有一些未考虑到的语法最终证明你的假设是错误的。

考虑下列代码：

-------- --------- -
  ------ - - --
-

让我们写一个把 n 重命名为 x 的访问者的快速实现.

--- ----------

----- --------- - -
  ------------------------- -
    ----- ----- - --------------------
    --------- - -----------
    ---------- - ----
  --

  ---------------- -
    -- --------------- --- ---------- -
      -------------- - ----
    -
  -
--

对上面的例子代码这段访问者代码也许能工作，但它很容易被打破：

-------- --------- -
  ------ - - --
-
--

更好的处理方式是使用递归，下面让我们来像克里斯托佛·诺兰的电影盗梦空间那样来把一个访问者放进另外一个访问者里面。

----- ---------------------- - -
  ---------------- -
    -- --------------- --- --------------- -
      -------------- - ----
    -
  -
--

----- --------- - -
  ------------------------- -
    ----- ----- - --------------------
    ----- --------- - -----------
    ---------- - ----

    ------------------------------------- - --------- ---
  -
--

-------------------------

当然，这只是一个刻意编写的例子，不过它演示了如何从访问者中消除全局状态。

Scopes（作用域）

接下来让我们介绍作用域（scope）的概念。 JavaScript 支持词法作用域，在树状嵌套结构中代码块创建出新的作用域。

-- ------ -----

-------- ---------- -
  -- ----- -

  -------- ---------- -
    -- ----- -
  -
-

在 JavaScript 中，每当你创建了一个引用，不管是通过变量（variable）、函数（function）、类型（class）、参数（params）、模块导入（import）还是标签（label）等，它都属于当前作用域。

--- ------ - -- -- -- --- ------ -------

-------- ---------- -
  --- --- - -- -- -- --- ----- ------- -- --------------

  -------- ---------- -
    --- --- - -- -- -- --- ----- ------- -- --------------
  -
-

更深的内部作用域代码可以使用外层作用域中的引用。

-------- ---------- -
  --- --- - -- -- -- --- ----- ------- -- --------------

  -------- ---------- -
    --- - -- -- -------- --- --------- -- ---------- ------ ------------
  -
-

内层作用域也可以创建和外层作用域同名的引用。

-------- ---------- -
  --- --- - -- -- -- --- ----- ------- -- --------------

  -------- ---------- -
    --- --- - -- -- -------- - --- ----- --- ------- --------- -- ------------ --------
  -
-

当编写一个转换时，必须小心作用域。我们得确保在改变代码的各个部分时不会破坏已经存在的代码。

我们在添加一个新的引用时需要确保新增加的引用名字和已有的所有引用不冲突。 或者我们仅仅想找出使用一个变量的所有引用， 我们只想在给定的作用域（Scope）中找出这些引用。

作用域可以被表示为如下形式：

-
  ----- -----
  ------ ----------
  ------------ ------------
  ------- ------------
  --------- -----
-

当你创建一个新的作用域时，需要给出它的路径和父作用域，之后在遍历过程中它会在该作用域内收集所有的引用(“绑定”)。

一旦引用收集完毕，你就可以在作用域（Scopes）上使用各种方法，稍后我们会了解这些方法。

Bindings（绑定）

所有引用属于特定的作用域，引用和作用域的这种关系被称作：绑定（binding）。.

-------- ----------- -
  --- --- - ----- -- - ---------

  ---- -- ---- -- - --------- -- - -------

  -------- ---------- -
    ---- -- ---- -- - --------- -- - ------- ---- - ----- -----
  -
-

单个绑定看起来像这样︰

---- --- -----------
-
  ----------- -----
  ------ ------
  ----- -----
  ----- ------

  ----------- -----
  ----------- --
  --------------- ------ ----- ------

  --------- ------
  ------------------- ------
-

有了这些信息你就可以查找一个绑定的所有引用，并且知道这是什么类型的绑定(参数，定义等等)，查找它所属的作用域，或者拷贝它的标识符。 你甚至可以知道它是不是常量，如果不是，那么是哪个路径修改了它。

在很多情况下，知道一个绑定是否是常量非常有用，最有用的一种情形就是代码压缩时。

-------- ---------- -
  --- ---- - ----- -- - -------- ---------

  ------------------------------------------

  -------- ---------- -
    --- ---- - ----- -- ----- - -------- ---------
    ---- - -------- ---- ------- --- -------
  -
-

API

Babel 实际上是一组模块的集合。本节我们将探索一些主要的模块，解释它们是做什么的以及如何使用它们。

注意：本节内容不是详细的 API 文档的替代品，正式的 API 文档将很快提供出来。

Babylon 是 Babel 的解析器。最初是 从Acorn项目fork出来的。Acorn非常快，易于使用，并且针对非标准特性(以及那些未来的标准特性) 设计了一个基于插件的架构。

首先，让我们安装它。

- --- ------- ------ -------

先从解析一个代码字符串开始：

------ - -- ------- ---- ----------

----- ---- - --------- --------- -
  ------ - - --
---

--------------------
-- ---- -
--   ----- -------
--   ------ --
--   ---- ---
--   ---- -------------- ------
--   -------- ---- ------
--   --------- ---
--   ------- -----
-- -

我们还能像下面这样传递选项给 parse()方法：

------------------- -
  ----------- --------- -- -------- --------
  -------- ------- -- -------- --
---

sourceType 可以是 "module" 或者 "script"，它表示 Babylon 应该用哪种模式来解析。 "module" 将会在严格模式下解析并且允许模块定义，"script" 则不会。

注意： sourceType 的默认值是 "script" 并且在发现 import 或 export 时产生错误。 使用 scourceType: "module" 来避免这些错误。

由于 Babylon 使用了基于插件的架构，因此有一个 plugins 选项可以开关内置的插件。 注意 Babylon 尚未对外部插件开放此 API 接口，不排除未来会开放此API。

要查看完整的插件列表，请参见 Babylon README文件。.

Babel Traverse（遍历）模块维护了整棵树的状态，并且负责替换、移除和添加节点。

运行以下命令安装：

- --- ------- ------ --------------

我们可以和 Babylon 一起使用来遍历和更新节点：

------ - -- ------- ---- ----------
------ -------- ---- -----------------

----- ---- - --------- --------- -
  ------ - - --
---

----- --- - --------------------

------------- -
  ----------- -
    -- -
      -------------- --- ------------ --
      -------------- --- ---
    - -
      -------------- - ----
    -
  -
---

Babel Types模块是一个用于 AST 节点的 Lodash 式工具库（译注：Lodash 是一个 JavaScript 函数工具库，提供了基于函数式编程风格的众多工具函数）， 它包含了构造、验证以及变换 AST 节点的方法。 该工具库包含考虑周到的工具方法，对编写处理AST逻辑非常有用。

可以运行以下命令来安装它：

- --- ------- ------ -----------

然后按如下所示来使用：

------ -------- ---- -----------------
------ - -- - ---- --------------

------------- -
  ----------- -
    -- -------------------------- - ----- --- --- -
      -------------- - ----
    -
  -
---

Definitions（定义）

Babel Types模块拥有每一个单一类型节点的定义，包括节点包含哪些属性，什么是合法值，如何构建节点、遍历节点，以及节点的别名等信息。

单一节点类型的定义形式如下：

------------------------------ -
  -------- ------------ ------- ---------
  ------- -
    --------- -
      --------- -------------------------
    --
    ----- -
      --------- ----------------------------
    --
    ------ -
      --------- ----------------------------
    -
  --
  -------- -------- ---------
  -------- ---------- -------------
---

Builders（构建器）

你会注意到上面的 BinaryExpression 定义有一个 builder 字段。.

-------- ------------ ------- --------

这是由于每一个节点类型都有构造器方法builder，按类似下面的方式使用：

----------------------- ------------------ -------------------

可以创建如下所示的 AST：

-
  ----- -------------------
  --------- ----
  ----- -
    ----- -------------
    ----- ---
  --
  ------ -
    ----- -------------
    ----- ---
  -
-

当打印出来之后是这样的：

- - -

构造器还会验证自身创建的节点，并在错误使用的情形下会抛出描述性错误，这就引出了下一个方法类型。

Validators（验证器）

BinaryExpression 的定义还包含了节点的字段 fields 信息，以及如何验证这些字段。

------- -
  --------- -
    --------- -------------------------
  --
  ----- -
    --------- ----------------------------
  --
  ------ -
    --------- ----------------------------
  -
-

可以创建两种验证方法。第一种是 isX。.

------------------------------------------------

这个测试用来确保节点是一个二进制表达式，另外你也可以传入第二个参数来确保节点包含特定的属性和值。

----------------------------------------------- - --------- --- ---

这些方法还有一种断言式的版本，会抛出异常而不是返回 true 或 false。.

----------------------------------------------------
--------------------------------------------------- - --------- --- ---
-- ------ -------- ---- ------------------ ---- ------ - ----------- --- -

Converters（变换器）

[WIP]

Babel Generator模块是 Babel 的代码生成器，它读取AST并将其转换为代码和源码映射（sourcemaps）。

运行以下命令来安装它：

- --- ------- ------ ---------------

然后按如下方式使用：

------ - -- ------- ---- ----------
------ -------- ---- ------------------

----- ---- - --------- --------- -
  ------ - - --
---

----- --- - --------------------

------------- --- ------
-- -
--   ----- ------
--   ---- -----
-- -

你也可以给 generate() 方法传递选项。.

------------- -
  ------------ ------
  -------- -------
  -------- ------
  ------- ---------
  -- ---
-- ------

babel-template 是另一个虽然很小但却非常有用的模块。 它能让你编写字符串形式且带有占位符的代码来代替手动编码， 尤其是生成的大规模 AST的时候。 在计算机科学中，这种能力被称为准引用（quasiquotes）。

- --- ------- ------ --------------
------ -------- ---- -----------------
------ -------- ---- ------------------
------ - -- - ---- --------------

----- ------------ - ----------
  --- ----------- - ----------------
---

----- --- - --------------
  ------------ -------------------------
  ------- ----------------------------
---

--------------------------------
--- -------- - ---------------------

编写你的第一个 Babel 插件

现在你已经熟悉了 Babel 的所有基础知识了，让我们把这些知识和插件的 API融合在一起来编写第一个 Babel 插件吧。

先从一个接收了当前babel对象作为参数的 function 开始。

------ ------- --------------- -
  -- ------ --------
-

由于你将会经常这样使用，所以直接取出 babel.types 会更方便：（译注：这是 ES2015 语法中的对象解构，即 Destructuring）

------ ------- ---------- ------ - -- -
  -- ------ --------
-

接着返回一个对象，其 visitor 属性是这个插件的主要访问者。

------ ------- ---------- ------ - -- -
  ------ -
    -------- -
      -- ------- --------
    -
  --
--

Visitor 中的每个函数接收2个参数：path 和 state

------ ------- ---------- ------ - -- -
  ------ -
    -------- -
      ---------------- ------ ---
      --------------------- ------ --
    -
  --
--

让我们快速编写一个可用的插件来展示一下它是如何工作的。下面是我们的源代码：

--- --- ----

其 AST 形式如下：

-
  ----- -------------------
  --------- ------
  ----- -
    ----- -------------
    ----- -----
  --
  ------ -
    ----- -------------
    ----- -----
  -
-

我们从添加 BinaryExpression 访问者方法开始：

------ ------- ---------- ------ - -- -
  ------ -
    -------- -
      ---------------------- -
        -- ---
      -
    -
  --
-

然后我们更确切一些，只关注哪些使用了 === 的 BinaryExpression。

-------- -
  ---------------------- -
    -- ------------------- --- ------ -
      -------
    -

    -- ---
  -
-

现在我们用新的标识符来替换 left 属性：

---------------------- -
  -- ------------------- --- ------ -
    -------
  -

  -------------- - -----------------------
  -- ---
-

于是如果我们运行这个插件我们会得到：

------ --- ----

现在只需要替换 right 属性了。

---------------------- -
  -- ------------------- --- ------ -
    -------
  -

  -------------- - -----------------------
  --------------- - ---------------------
-

这就是我们的最终结果了：

------ --- -----

完美！我们的第一个 Babel 插件。

转换操作

访问

获取子节点的Path

为了得到一个AST节点的属性值，我们一般先访问到该节点，然后利用 path.node.property 方法即可。

-- --- ---------------- --- ---- --- ----------- ------- -------- ----------
---------------------- -
  ---------------
  ----------------
  -------------------
-

如果你想访问到该属性内部的path，使用path对象的get方法，传递该属性的字符串形式作为参数。

---------------------- -
  -----------------
-
------------- -
  -------------------
-

检查节点的类型

如果你想检查节点的类型，最好的方式是：

---------------------- -
  -- -------------------------------- -
    -- ---
  -
-

你同样可以对节点的属性们做浅层检查：

---------------------- -
  -- ------------------------------- - ----- --- --- -
    -- ---
  -
-

功能上等价于：

---------------------- -
  -- -
    -------------- -- ---- --
    ------------------- --- ------------ --
    ------------------- --- ---
  - -
    -- ---
  -
-

检查路径（Path）类型

一个路径具有相同的方法检查节点的类型：

---------------------- -
  -- -------------------------------- ----- --- --- -
    -- ---
  -
-

就相当于：

---------------------- -
  -- ------------------------------- - ----- --- --- -
    -- ---
  -
-

检查标识符（Identifier）是否被引用

---------------- -
  -- ------------------------------- -
    -- ---
  -
-

或者：

---------------- -
  -- -------------------------- ------------- -
    -- ---
  -
-

找到特定的父路径

有时你需要从一个路径向上遍历语法树，直到满足相应的条件。

对于每一个父路径调用callback并将其NodePath当作参数，当callback返回真值时，则将其NodePath返回。.

---------------------- -- ---------------------------

如果也需要遍历当前节点：

---------------- -- ---------------------------

查找最接近的父函数或程序：

-------------------------

向上遍历语法树，直到找到在列表中的父节点路径

--------------------------

获取同级路径

如果一个路径是在一个 Function／Program中的列表里面，它就有同级节点。

  • 使用path.inList来判断路径是否有同级节点，
  • 使用path.getSibling(index)来获得同级路径,
  • 使用 path.key获取路径所在容器的索引,
  • 使用 path.container获取路径的容器（包含所有同级节点的数组）
  • 使用 path.listKey获取容器的key

这些API用于 babel-minify </>中使用的 transform-merge-sibling-variables </>插件.

var a = 1; // pathA, path.key = 0 var b = 2; // pathB, path.key = 1 var c = 3; // pathC, path.key = 2

-----
------ ------- ---------- ------ - -- -
  ------ -
    -------- -
      ------------------------- -
        -- -- --- ------- ---- -- -----
        ----------- -- ----
        ------------ -- ------
        -------- -- -
        ------------------ -- -----
        ------------------------ - -- -- -----
        -------------- -- ------- ------ ------
      -
    -
  --
-

停止遍历

如果你的插件需要在某种情况下不运行，最简单的做法是尽早写回。

---------------------- -
  -- ------------------- --- ----- -------
-

如果您在顶级路径中进行子遍历，则可以使用2个提供的API方法：

path.skip() skips traversing the children of the current path. path.stop() stops traversal entirely.

--------------------
  ------------------- -
    ----------------- -- -- -------- --- -------- -- ----------
  --
  ------------------------------- ------ -
    ---------- - -----
    ----------------- -- -- --- ---- -- ---- ---- ----- --- ---- ---- ---------- -- -----
  -
---

处理

替换一个节点

---------------------- -
  -----------------
    ------------------------ --------------- -------------------
  --
-
  -------- --------- -
-   ------ - - --
-   ------ - -- --
  -

用多节点替换单节点

--------------------- -
  --------------------------
    ----------------------------------------- ---- --- ---- ---------
    ----------------------------------------- ---- ---- ------------
    --------------------------------------------- ------- --- ---- -- --- ---- -- ---- ---------
  ---
-
  -------- --------- -
-   ------ - - --
-   --- ---- --- ---- -------
-   --- ---- ---- ----------
-   ------- ------- --- ---- -- --- ---- -- ---- -------
  -

**注意：</>当用多个节点替换一个表达式时，它们必须是   声明。 这是因为Babel在更换节点时广泛使用启发式算法，这意味着您可以做一些非常疯狂的转换，否则将会非常冗长。

用字符串源码替换节点

FunctionDeclaration(path) { path.replaceWithSourceString(function add(a, b) { return a + b; }); }

-------
- -------- --------- -
-   ------ - - --
- -------- ------ -- -
-   ------ - - --
  -

**注意：</>不建议使用这个API，除非您正在处理动态的源码字符串，否则在访问者外部解析代码更有效率。

插入兄弟节点

FunctionDeclaration(path) { path.insertBefore(t.expressionStatement(t.stringLiteral("Because I'm easy come, easy go."))); path.insertAfter(t.expressionStatement(t.stringLiteral("A little high, little low."))); }

-------
- -------- --- ---- ----- ---- -----
  -------- --------- -
    ------ - - --
  -
- -- ------ ----- ------ ------

注意：</>这里同样应该使用声明或者一个声明数组。 这个使用了在用多个节点替换一个节点</>中提到的相同的启发式算法。.

插入到容器（container）中

如果您想要在AST节点属性中插入一个像body </ 0>那样的数组。 它与 <code> insertBefore/insertAfter 类似, 但您必须指定 listKey (通常是 正文).

ClassMethod(path) { path.get('body').unshiftContainer('body', t.expressionStatement(t.stringLiteral('before'))); path.get('body').pushContainer('body', t.expressionStatement(t.stringLiteral('after'))); }

-------
 ----- - -
  ------------- -
-   --------
    --- - - ---------
-   -------
  -
 -

删除一个节点

------------------------- -
  --------------
-
- -------- --------- -
-   ------ - - --
- -

替换父节点

只需使用parentPath：path.parentPath </>调用replaceWith </>即可`

---------------------- -
 ----------------------------
   --------------------------------------------- --- ---- ------ ------- ------ ------ -- --- -- ------
 --
-
-
---

function square(n) {

  • return n * n;
  • "Anyway the wind blows, doesn't really matter to me, to me."; }
--- ------------ -------------------------------------------------

BinaryExpression(path) { path.parentPath.remove(); }

  function square(n) {


    

  • return n * n;
  }
    • 



-- --------------- ------------------------------------------

--- ------------------ ---------------------------------------------------------------------------

FunctionDeclaration(path) {
  if (path.scope.hasBinding("n")) {
    // ...
  }
}


----------------

-------------------------

FunctionDeclaration(path) {
  if (path.scope.hasOwnBinding("n")) {
    // ...
  }
}


--- --------------- ----------------------------------------------- ---

--------------------------

FunctionDeclaration(path) {
  path.scope.generateUidIdentifier("uid");
  // Node { type: "Identifier", name: "_uid" }
  path.scope.generateUidIdentifier("uid");
  // Node { type: "Identifier", name: "_uid2" }
}


--- ------------------- ---------------------------------------------------------------------------------------

------------ ------------------- ---------------

FunctionDeclaration(path) {
  const id = path.scope.generateUidIdentifierBasedOnNode(path.node.id);
  path.remove();
  path.scope.parent.push({ id, init: path.node });
}
`


    

  • function square(n) {
    • 



    

  • var _square = function square(n) {
  return n * n;
    • 



    

  • }
    • 



    

  • };
    • 



--- ---------------- -----------------------------------------------------------------------

FunctionDeclaration(path) {
  path.scope.rename("n", "x");
}


    

  • function square(n) {
    • 

  • return n * n;
    • 



    

  • function square(x) {
    • 

  • return x * x;
  }
    • 



----------------------

FunctionDeclaration(path) {
  path.scope.rename("n");
}


    

  • function square(n) {
    • 

  • return n * n;
    • 



    

  • function square(_n) {
    • 

  • return _n * _n;
  }
    • 



- - -

------------------------------------------------

{
  plugins: [
    ["my-plugin", {
      "option1": true,
      "option2": false
    }]
  ]
}


------------------------

export default function({ types: t }) {
  return {
    visitor: {
      FunctionDeclaration(path, state) {
        console.log(state.opts);
        // { option1: true, option2: false }
      }
    }
  }
}
`


 ---------------------------

-- ------------------ ------------------------------------------------------------

-------------------------------------

export default function({ types: t }) {
  return {
    pre(state) {
      this.cache = new Map();
    },
    visitor: {
      StringLiteral(path) {
        this.cache.set(path.node.value, 1);
      }
    },
    post(state) {
      console.log(this.cache);
    }
  };
}


-- ------------------ ---------------------------------------------------------------

------------- -------------------------- --------------------

export default function({ types: t }) {
  return {
    inherits: require("babel-plugin-syntax-jsx")
  };
}


-- ---------------- ----------------------------------------------------------

---------------------------------

export default function({ types: t }) {
  return {
    visitor: {
      StringLiteral(path) {
        throw path.buildCodeFrameError("Error message here");
      }
    }
  };
}


--------

file.js: Error message here
   7 |
   8 | let tips = [




 9 |   "Click on any AST node with a '+' to expand it",
     |   ^
  10 |
  11 |   "Hovering over a node highlights the 
  12 |    corresponding part in the source code",




- - -

-------------------------- ----------- ----------- -------------- ------------------

 --------------------------------- ----------- ----------------- ----- ---------------------------------------  ------------------- -----------------------------------------------------------------------------------------------------------------------------------------------------------------------

---------

defineType("MemberExpression", {
  builder: ["object", "property", "computed"],
  visitor: ["object", "property"],
  aliases: ["Expression", "LVal"],
  fields: {
    object: {
      validate: assertNodeType("Expression")
    },
    property: {
      validate(node, key, val) {
        let expectedType = node.computed ? "Expression" : "Identifier";
        assertNodeType(expectedType)(node, key, val);
      }
    },
    computed: {
      default: false
    }
  }
});
`


 ------------------------------------------

---- ----- --- ------------------ ---- -----

生成器: ["object", "property", "computed"],


- ------------------------------------ ---------------- ----------------- ----- ----------- ----

// Example
// because the builder doesn't contain async as a property
var node = t.classMethod(
  "constructor",
  t.identifier("constructor"),
  params,
  body
)
// set it manually after creation
node.async = true;
``


 -- --- --- --- --- ---------- --- --- ------- --------- ---- --- -------- -------

------- - ------- - --------- ---------------------------- -- --------- - -------------- ---- ---- - --- ------------ - ------------- - ------------ - ------------- ---------------------------------- ---- ----- - -- --------- - -------- ----- - -

You can see that object needs to be an Expression, property either needs to be an Expression or an Identifier depending on if the member expression is computed or not and computed is simply a boolean that defaults to false.


So we can construct a MemberExpression by doing the following:


-------------------
  -----------------------
  ------------------------
  -- ---------- -- --------
--

Which will result in:


---------------
However, we said that object needed to be an Expression so why is Identifier valid?


Well if we look at the definition of Identifier we can see that it has an aliases property which states that it is also an expression.


-------- -------------- --------
So since MemberExpression is a type of Expression, we could set it as the object of another MemberExpression:


-------------------
  -------------------
    -----------------------
    --------------------------
  --
  ------------------------
-
Which will result in:


--------------------------
It's very unlikely that you will ever memorize the builder method signatures for every node type. So you should take some time and understand how they are generated from the node definitions.


You can find all of the actual definitions here and you can see them documented here




Create Helper Builders and Checkers


It's pretty simple to extract certain checks (if a node is a certain type) into their own helper functions as well as extracting out helpers for specific node types.


-------- ------------------ -
  ------ ---- -- ------------- --- ------------- - ----
-

-------- --------------------- ------ -
  ------ --------------------------- ----- -------
-
尽量避免遍历抽象语法树（AST）


Traversing the AST is expensive, and it's easy to accidentally traverse the AST more than necessary. This could be thousands if not tens of thousands of extra operations.


Babel optimizes this as much as possible, merging visitors together if it can in order to do everything in a single traversal.


及时合并访问者对象


When writing visitors, it may be tempting to call path.traverse in multiple places where they are logically necessary.


---------------
  ---------------- -
    -- ---
  -
---

---------------
  ---------------------- -
    -- ---
  -
---
However, it is far better to write these as a single visitor that only gets run once. Otherwise you are traversing the same tree multiple times for no reason.


---------------
  ---------------- -
    -- ---
  --
  ---------------------- -
    -- ---
  -
---
可以手动查找就不要遍历


It may also be tempting to call path.traverse when looking for a particular node type.


----- ------------- - -
  ---------------- -
    -- ---
  -
--

----- --------- - -
  ------------------------- -
    -------------------------------------------
  -
--
However, if you are looking for something specific and shallow, there is a good chance you can manually lookup the nodes you need without performing a costly traversal.


----- --------- - -
  ------------------------- -
    ----------------------------------- -
      -- ---
    ---
  -
--
优化嵌套的访问者对象


当您嵌套访问者（visitor）时，把它们嵌套在您的代码中可能是有意义的。


----- --------- - -
  ------------------------- -
    ---------------
      ---------------- -
        -- ---
      -
    ---
  -
--
但是，每当调用`FunctionDeclaration()</>时都会创建一个新的访问者对象。 That can be costly, because Babel does some processing each time a new visitor object is passed in (such as exploding keys containing multiple types, performing validation, and adjusting the object structure). Because Babel stores flags on visitor objects indicating that it's already performed that processing, it's better to store the visitor in a variable and pass the same object each time.


----- ------------- - -
  ---------------- -
    -- ---
  -
--

----- --------- - -
  ------------------------- -
    -----------------------------
  -
--
-
 `如果您在嵌套的访问者中需要一些状态，像这样：


----- --------- - -
  ------------------------- -
    --- ------------ - -------------------------

    ---------------
      ---------------- -
        -- --------------- --- ------------- -
          -- ---
        -
      -
    ---
  -
--
您可以将它作为状态传递给traverse()</ 0>方法，并有权访问<code>this在访问者中。


----- ------------- - -
  ---------------- -
    -- --------------- --- ------------------ -
      -- ---
    -
  -
--

----- --------- - -
  ------------------------- -
    --- ------------ - -------------------------
    ---------------------------- - ------------ ---
  -
--
留意嵌套结构


有时候在考虑给定的转换时，可能会忘记给定的转换结构可以是嵌套的。


例如，想象一下，我们想要查找构造函数 ClassMethod Foo ClassDeclaration.


----- --- -
  ------------- -
    -- ---
  -
-
----- ------------------ - -
  ----------------- -
    -- --------------- --- -------------- -
      -- ---
    -
  -
-

----- --------- - -
  ---------------------- -
    -- ------------------ --- ------ -
      ----------------------------------
    -
  -
-
我们忽略了类可以嵌套的事实，使用遍历的话，上面我们也会得到一个嵌套的`构造函数</>：


----- --- -
  ------------- -
    ----- --- -
      ------------- -
        -- ---
      -
    -
  -
-
-
 `## 单元测试


有几种主要的方法来测试babel插件：快照测试，AST测试和执行测试。 对于这个例子，我们将使用 jest </>，因为它支持盒外快照测试。 我们在这里创建的示例是托管在这个 repo</>.


首先我们需要一个babel插件，我们将把它放在src / index.js中。


--- ---------------- - -------- ----------------- -
  ------ -
    -------- -
      ---------------- -
        -- --------------- --- ------ -
          -------------- - ------
        -
      -
    -
  --
--
快照测试


接下来，用`` npm install --save-dev babel-core jest </>安装我们的依赖关系， 那么我们可以开始写我们的第一个测试：快照。 快照测试允许我们直观地检查我们的babel插件的输出。 我们给它一个输入，告诉它一个快照，并将其保存到一个文件。 我们检查快照到git中。 这允许我们来看看我们什么时候影响了我们任何试用例子测试的输出。 它也给出了使用差异在拉请求的时候。 当然，您可以用任何测试框架来做到这一点，但是要更新一下快照就像jest -u </>一样简单.


-- ---------------------------
----- ----- - ----------------------
----- ------ - ---------------

--- ------- - -
--- --- - --
-- ----- -----------------
--

----------- -- -- -
 ----- ------ - ------------------------ --------- -----------
 -------------------------------
---
--
---

--------------- --- - -- ----- -- - -- --------- -- - ------------------ ----

---
------------- ----- --- - -
-
--- --- - --
-- ----- ------------------
--
--
---

---------------------------------------

---
----------------

   - --------
   - --------

   -- ---- ---- --
    -
   ---- --- - --
   --- ----- ------------------
   ---- --- - --
   --- ----- ------------------
---

-------------------------- --------------------- -- ---------

--- -------------- --

--------------------- -------------- -------------------------- ----------------------------

it('contains baz', () => {
  const {ast} = babel.transform(example, {plugins: [plugin]});
  const program = ast.program;
  const declaration = program.body[0].declarations[0];
  assert.equal(declaration.id.name, 'baz');
  // or babelTraverse(program, {visitor: ...})
});
`


 ---- ------------------- -----

------------------------- -------------------------- -----------------------------------

it('foo is an alias to baz', () => {
  var input =     var foo = 1;     // test that foo was renamed to baz     var res = baz;  ;
  var {code} = babel.transform(input, {plugins: [plugin]});
  var f = new Function(    ${code};     return res;  );
  var res = f();
  assert(res === 1, 'res is 1');
});
``


 -----------------------------

------------ ------------ --------------------------------------------------------------------------------------------------------------------------- --------- ---------------------------------------------------------------------------------------------------------------------------------

import pluginTester from 'babel-plugin-tester';
import identifierReversePlugin from '../identifier-reverse-plugin';


pluginTester({
  plugin: identifierReversePlugin,
  fixtures: path.join(__dirname, 'fixtures'),
  tests: {
    'does not change code with no identifiers': '"hello";',
    'changes this code': {
      code: 'var hello = "hi";',
      output: 'var olleh = "hi";',
    },
    'using fixtures files': {
      fixture: 'changed.js',
      outputFixture: 'changed-output.js',
    },
    'using jest snapshots': {
      code:         function sayHi(person) {           return 'Hello ' + person + '!'         }      ,
      snapshot: true,
    },
  },
});


- - -

- -------------- ------------- ---- --------

---------------------------------------------------------- ----------
-------------------------------------------------------------------------------------
  











阅读全文





















猜你喜欢






    


  • 

    
GraphQL：用 Connection 优化节点查询

    前言 GraphQL 是一种由 Facebook 开发的数据查询和操作语言，它提供了一种更高效、更灵活的方式来获取和操作数据。GraphQL 的一个重要特性就是可以精确地指定需要查询的数据，避免了传统...
    

    

2 个月前

    

    


    • 


  • 

    
Server-sent Events 的浏览器支持情况及解决方法

    什么是 Server-sent Events？ Server-sent Events（简称 SSE）是一种基于 HTTP 的服务器推送技术，它可以让服务器向客户端发送事件流，客户端通过监听这个事件流来...
    

    

2 个月前

    

    


    • 


  • 

    
ECMAScript 2020（ES11）中的新特性：BigInt 转换

    在 ECMAScript 2020（ES11）中，新增了一种数据类型：BigInt。它是一种可以表示任意大整数的数据类型，可以用来解决 JavaScript 中整数运算的精度问题。
    

    

2 个月前

    

    


    • 


  • 

    
CSS Reset 在 IE6、IE7 等老浏览器中的应用

    什么是 CSS Reset CSS Reset 是一种通过重置浏览器默认样式的方式，消除不同浏览器之间的差异，从而实现更加一致的样式效果的技术手段。在前端开发中，使用 CSS Reset 可以让我们更...
    

    

2 个月前

    

    


    • 


  • 

    
ES6 中的类继承和原型链之间的关系解析

    在 ES6 中，引入了 class 关键字，使得 JavaScript 也具备了面向对象编程的能力。在类继承和原型链之间，有着密切的关系。本文将详细解析 ES6 中的类继承和原型链之间的关系，并提供一...
    

    

2 个月前

    

    


    • 


  • 

    
如何使用 Redux 处理 React 应用中的表单数据

    前言 在开发 React 应用时，表单数据的处理是非常常见的需求。然而，由于 React 的单向数据流和组件化特性，传统的表单处理方式可能会变得非常繁琐。而 Redux 作为一种状态管理工具，可以帮助...
    

    

2 个月前

    

    


    • 


  • 

    
Redis 处理高并发的策略

    前言 随着互联网的发展，高并发已经成为了一个不可避免的问题。而 Redis 作为一款高性能的 NoSQL 数据库，也成为了处理高并发的重要工具之一。本文将会介绍 Redis 处理高并发的策略，并且会提...
    

    

2 个月前

    

    


    • 


  • 

    
响应式设计中的图片适配问题解决方案

    在响应式设计中，图片适配是一个比较棘手的问题。如果不加以处理，可能会导致图片在不同设备上显示不佳，影响用户体验。本文将介绍响应式设计中的图片适配问题，并提供解决方案。
    

    

2 个月前

    

    


    • 


  • 

    
解析 TypeScript 中 encapsulation（封装）的实现方式

    解析 TypeScript 中 encapsulation（封装）的实现方式 在 TypeScript 中，封装（encapsulation）是一种重要的面向对象编程的特性。
    

    

2 个月前

    

    


    • 


  • 

    
PM2 崩溃处理：如何避免由于 PM2 进程奔溃导致应用崩溃？

    在前端开发中，我们经常使用 PM2 进行进程管理和部署。但是，当 PM2 进程崩溃时，应用也会跟着崩溃。如何避免这种情况的发生？本文将介绍 PM2 崩溃处理的方法和技巧，帮助您更好地管理和部署应用。
    

    

2 个月前

    

    


    • 


  • 

    
在 Node.js 中运行 HTTPS 服务器的方法

    Node.js 是一个非常流行的 JavaScript 运行时环境，它可以让我们通过 JavaScript 编写服务器端应用程序。在开发 Web 应用程序时，安全性是非常重要的。
    

    

2 个月前

    

    


    • 


  • 

    
详解 ECMAScript 2018 中的三个新操作符及其用法

    ECMAScript 2018 (简称 ES2018) 是 JavaScript 语言的最新标准，其中包含了许多新特性和语法糖。本文将详细介绍其中的三个新操作符及其用法，分别是：扩展运算符、剩余运算符...
    

    

2 个月前

    

    


    • 


  • 

    
解决 Enzyme 测试 React Native 组件时动画无法渲染的问题

    在开发 React Native 应用时，我们经常需要使用 Enzyme 来测试组件。然而，当我们测试涉及到动画的组件时，我们可能会遇到一些问题：动画无法渲染，导致测试失败。
    

    

2 个月前

    

    


    • 


  • 

    
使用 React Router 打造复杂而强大的 SPA 应用

    随着 Web 技术的不断发展，单页应用（Single Page Application，SPA）已经成为了现代 Web 应用的主流。SPA 通过异步加载数据和动态更新页面，提供了更快速、更流畅的用户体...
    

    

2 个月前

    

    


    • 


  • 

    
AngularJS 中如何使用 ng-repeat 中的 filter 来过滤数据

    在 AngularJS 中，ng-repeat 指令是用于循环遍历数组或对象并生成 HTML 元素的常用指令。而 ng-repeat 指令中的 filter 属性则是用于过滤数据的功能。
    

    

2 个月前

    

    


    • 


  • 

    
如何在 Chai 中验证 Promise.all

    如何在 Chai 中验证 Promise.all 在前端开发中，Promise.all 是一个非常常用的功能，它可以让我们在多个异步操作完成后再执行一些操作，这个功能在实际开发中非常实用。
    

    

2 个月前

    

    


    • 


  • 

    
Mongoose 实现数据批量更新的方式详解

    前言 在前端开发中，经常会涉及到对数据库中的数据进行批量更新的操作。而 Mongoose 是一款 Node.js 平台下的 MongoDB 对象模型工具，它提供了一种方便的方式来操作 MongoDB ...
    

    

2 个月前

    

    


    • 


  • 

    
在使用 lit-element 的时候，如何解决麻烦的 Shadow DOM 的变量传递问题

    前言 在使用 Web Components 的时候，我们通常会使用 Shadow DOM 来实现封装和样式隔离。然而，Shadow DOM 的封闭性也带来了一些挑战，其中之一就是变量传递问题。
    

    

2 个月前

    

    


    • 


  • 

    
Tailwind CSS 如何实现动态换肤？

    随着互联网的发展，越来越多的网站和应用开始支持动态换肤功能。动态换肤不仅可以提升用户体验，还可以让用户在不同的环境下选择适合自己的主题，增加用户黏性和满意度。本文将介绍如何使用 Tailwind CS...
    

    

2 个月前

    

    


    • 


  • 

    
如何在 Less 中使用字符串操作函数？

    在前端开发中，样式表是不可或缺的一部分。而 Less 是一种动态样式语言，它是 CSS 的一种扩展。在 Less 中，我们可以使用字符串操作函数来处理字符串，这些函数可以帮助我们更加方便地操作字符串，...
    

    

2 个月前

    

    


    • 


















相关推荐