源码 parse 成 AST 之后，需要进行 AST 的遍历和增删改（transform）。那么 transform 的流程是什么样的？

babel 会递归遍历 AST，遍历过程中处理到不同的 AST 会调用不同的 visitor 函数来实现 transform。这是 visitor 模式的应用。

# visitor模式

visitor 模式（访问者模式）是 23 种经典设计模式中的一种。当被操作的对象结构比较稳定，而操作对象的逻辑经常变化的时候，通过分离逻辑和对象结构，使得他们能独立扩展。这就是 visitor 模式的思想。

如图，Element 和 Visitor 分别代表对象结构和操作逻辑，两者可以独立扩展，在 Client 里面来组合两者，使用 visitor 操作 element。这就是 visitor 模式。

对应到 babel traverse 的实现，就是 AST 和 visitor 分离，在 traverse（遍历）AST 的时候，调用注册的 visitor 来对其进行处理。

这样使得 AST 的结构和遍历算法固定，visitor 可以通过插件独立扩展。

# 路径和作用域

babel AST 中只包含源码的一些信息，但是操作 AST 时要拿到父节点的信息，并且也需要对 AST 增删改的方法，这些都在 path 对象里。

babel 会在 traverse 的过程中在 path 里维护节点的父节点引用，在其中保存 scope（作用域）的信息，同时也会提供增删改 AST 的方法。

# path 的属性

path 大概有这些属性和方法

path {
    // 属性：
    node
    parent
    parentPath
    scope
    hub
    container
    key
    listKey

    // 方法
    get(key)
    set(key, node)
    inList()
    getSibling(key)
    getNextSibling()
    getPrevSibling()
    getAllPrevSiblings()
    getAllNextSiblings()
    isXxx(opts)
    assertXxx(opts)
    find(callback)
    findParent(callback)

    insertBefore(nodes)
    insertAfter(nodes)
    replaceWith(replacement)
    replaceWithMultiple(nodes)
    replaceWithSourceString(replacement)
    remove()

    traverse(visitor, state)
    skip()
    stop()
}

@前端进阶之旅: 代码已经复制到剪贴板

它们各自的含义：

path.node 当前 AST 节点
path.parent 父 AST 节点
path.parentPath 父 AST 节点的 path
path.scope 作用域，见下文详解
path.hub 可以通过 path.hub.file 拿到最外层 File 对象， path.hub.getScope 拿到最外层作用域，path.hub.getCode 拿到源码字符串
path.container 当前 AST 节点所在的父节点属性的属性值
path.key 当前 AST 节点所在父节点属性的属性名或所在数组的下标
path.listkey 当前 AST 节点所在父节点属性的属性值为数组时 listkey 为该属性名，否则为 undefined

# container、listkey、key（不常用，可略过）

container、listkey、key 这三个属性有点绕（也不太常用，可以跳过，后面实现手写 babel 的时候才会用到），解释一下：

因为 AST 节点要挂在父 AST 节点的某个属性上，那个属性的属性值就是这个 AST 节点的 container。

比如 CallExpression 有 callee 和 arguments 属性，那么对于 callee 的 AST 节点来说，callee 的属性值就是它的 container，而 callee 就是它的 key。

而 BlockStatement 有 body 属性，是一个数组，对于数组中的每一个 AST 来说，这个数组就是它们的 container，而 listKey 是 body，key 则是下标。

# path 的方法

path 有如下方法

inList() 判断节点是否在数组中，如果 container 为数组，也就是有 listkey 的时候，返回 true
get(key) 获取某个属性的 path
set(key, node) 设置某个属性的值
getSibling(key) 获取某个下标的兄弟节点
getNextSibling() 获取下一个兄弟节点
getPrevSibling() 获取上一个兄弟节点
getAllPrevSiblings() 获取之前的所有兄弟节点
getAllNextSiblings() 获取之后的所有兄弟节点
find(callback) 从当前节点到根节点来查找节点（包括当前节点），调用 callback（传入 path）来决定是否终止查找
findParent(callback) 从当前节点到根节点来查找节点（不包括当前节点），调用 callback（传入 path）来决定是否终止查找
isXxx(opts) 判断当前节点是否是某个类型，可以传入属性和属性值进一步判断，比如path.isIdentifier({name: ‘a’})
assertXxx(opts) 同 isXxx，但是不返回布尔值，而是抛出异常
insertBefore(nodes) 在之前插入节点，可以是单个节点或者节点数组
insertAfter(nodes) 在之后插入节点，可以是单个节点或者节点数组
replaceWith(replacement) 用某个节点替换当前节点
replaceWithMultiple(nodes) 用多个节点替换当前节点
replaceWithSourceString(replacement) 解析源码成 AST，然后替换当前节点
remove() 删除当前节点
traverse(visitor, state) 遍历当前节点的子节点，传入 visitor 和 state（state 是不同节点间传递数据的方式）
skip() 跳过当前节点的子节点的遍历
stop() 结束所有遍历

# 作用域 path.scope

scope 是作用域信息，javascript 中能生成作用域的就是模块、函数、块等，而且作用域之间会形成嵌套关系，也就是作用域链。babel 在遍历的过程中会生成作用域链保存在 path.scope 中。

属性和方法大概有这些

path.scope {
    bindings
    block
    parent
    parentBlock
    path
    references

    dump()
    parentBlock()
    getAllBindings()
    getBinding(name)
    hasBinding(name)
    getOwnBinding(name)
    parentHasBinding(name)
    removeBinding(name)
    moveBindingTo(name, scope)
    generateUid(name)
}

@前端进阶之旅: 代码已经复制到剪贴板

各自的含义：

scope.bindings 当前作用域内声明的所有变量
scope.block 生成作用域的 block，详见下文
scope.path 生成作用域的节点对应的 path
scope.references 所有 binding 的引用对应的 path，详见下文
scope.dump() 打印作用域链的所有 binding 到控制台
scope.parentBlock() 父级作用域的 block
getAllBindings() 从当前作用域到根作用域的所有 binding 的合并
getBinding(name) 查找某个 binding，从当前作用域一直查找到根作用域
getOwnBinding(name) 从当前作用域查找 binding
parentHasBinding(name, noGlobals) 查找某个 binding，从父作用域查到根作用域，不包括当前作用域。可以通过 noGlobals 参数指定是否算上全局变量（比如console，不需要声明就可用），默认是 false
removeBinding(name) 删除某个 binding
hasBinding(name, noGlobals) 从当前作用域查找 binding，可以指定是否算上全局变量，默认是 false
moveBindingTo(name, scope) 把当前作用域中的某个 binding 移动到其他作用域
generateUid(name) 生成作用域内唯一的名字，根据 name 添加下划线，比如 name 为 a，会尝试生成 _a，如果被占用就会生成 __a，直到生成没有被使用的名字。

# scope.block

能形成 scope 的有这些节点，这些节点也叫 block 节点。

export type Scopable =
  | BlockStatement
  | CatchClause
  | DoWhileStatement
  | ForInStatement
  | ForStatement
  | FunctionDeclaration
  | FunctionExpression
  | Program
  | ObjectMethod
  | SwitchStatement
  | WhileStatement
  | ArrowFunctionExpression
  | ClassExpression
  | ClassDeclaration
  | ForOfStatement
  | ClassMethod
  | ClassPrivateMethod
  | StaticBlock
  | TSModuleBlock;

@前端进阶之旅: 代码已经复制到剪贴板

我们可以通过 path.scope.block 来拿到所在的块对应的节点，通过 path.scope.parentBlock 拿到父作用域对应的块节点。

一般情况下我们不需要拿到生成作用域的块节点，只需要通过 path.scope 拿到作用域的信息，通过 path.scope.parent 拿到父作用域的信息。

# scope.bindings、scope.references（重点）

作用域中保存的是声明的变量和对应的值，每一个声明叫做一个binding（绑定）。

比如这样一段代码

const a = 1;

@前端进阶之旅: 代码已经复制到剪贴板

它的 path.scope.bindings 是这样的

bindings: {
    a: {
        constant: true,
        constantViolations: [],
        identifier: {type: 'Identifier', ...}
        kind:'const',
        path: {node,...}
        referenced: false
        referencePaths: [],
        references: 0,
        scope: ...
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

因为我们在当前 scope 中声明了 a 这个变量，所以 bindings 中有 a 的 binding，每一个 binding 都有 kind，这代表绑定的类型：

var、let、const 分别代表 var、let、const 形式声明的变量
param 代表参数的声明
module 代表 import 的变量的声明

binding 有多种 kind，代表不同的声明方式。

binding.identifier 和 binding.path，分别代表标识符的 AST、整个声明语句的 AST。

# visitor模式

# 路径和作用域

# path 的属性

# container、listkey、key（不常用，可略过）

# path 的方法

# 作用域 path.scope

# scope.block

# scope.bindings、scope.references（重点）

# state

# 总结

Traverse 的 path、scope、visitor|前端工程化

Traverse 的 path、scope、visitor|前端工程化