手写 Babel： traverse 篇

约 859 字大约 3 分钟

2026-02-28

提示

本章内容基于《Babel 插件通关秘籍》整理。

traverse 是遍历 AST，并且遍历的过程中支持 visitor 的调用，在 visitor 里实现对 AST 的增删改。

我们这一节的目的是实现这样的 api：

traverse(ast, {
    Identifier(node) {
        node.name = 'b';
    }
});

path 放到下一节实现。

思路分析

AST 的遍历就是树的遍历，树的遍历就深度优先、广度优先两种方式，而这里明显是深度优先遍历。

深度优先遍历要递归的遍历节点的子节点，那么我们怎么知道对象的属性是可以遍历的子节点呢？

可以维护一份数据来保存不同 AST 的什么属性是可以遍历的，然后在遍历不同节点的时候从中查找应该继续遍历什么属性。这样就实现了深度优先遍历。

在遍历的过程中可以根据类型调用不同的 visitor，然后传入当前节点。

代码实现

首先，我们维护这样一份数据：不同的 AST 有哪些可以遍历的属性。

比如 Program 要遍历 body 属性，VariableDeclarator 要遍历 id、init 属性等：

const astDefinationsMap = new Map();

astDefinationsMap.set('Program', {
    visitor: ['body']
});
astDefinationsMap.set('VariableDeclaration', {
    visitor: ['declarations']
});
astDefinationsMap.set('VariableDeclarator', {
    visitor: ['id', 'init']
});
astDefinationsMap.set('Identifier', {});
astDefinationsMap.set('NumericLiteral', {});
astDefinationsMap.set('FunctionDeclaration', {
    visitor: ['id', 'params', 'body']
});
astDefinationsMap.set('BlockStatement', {
    visitor: ['body']
});
astDefinationsMap.set('ReturnStatement', {
    visitor: ['argument']
});
astDefinationsMap.set('BinaryExpression', {
    visitor: ['left', 'right']
});
astDefinationsMap.set('ExpressionStatement', {
    visitor: ['expression']
});
astDefinationsMap.set('CallExpression', {
    visitor: ['callee', 'arguments']
});

然后实现递归的遍历，遍历到不同节点时，取出不同节点要遍历的属性，然后递归遍历。如果是数组的话，每个元素都是这样处理：

function traverse(node, visitors) {
    const defination = astDefinationsMap.get(node.type);
    
    if (defination.visitor) {
        defination.visitor.forEach(key => {
            const prop = node[key];
            if (Array.isArray(prop)) { // 如果该属性是数组
                prop.forEach(childNode => {
                    traverse(childNode, visitors);
                })
            } else {
                traverse(prop, visitors);
            }
        })
    }
}

实现了遍历，当然还要在遍历时支持不同节点的 visitor 回调函数：

visitor 支持 enter 和 exit 阶段，也就是进入节点调用 enter 回调函数，之后遍历子节点，之后再调用 exit 回调函数。

那么分别在遍历前后调用就可以，默认如果没有指定哪个阶段就在 enter 阶段调用。

function traverse(node, visitors) {
    const defination = astDefinationsMap.get(node.type);

    let visitorFuncs = visitors[node.type] || {};

    if(typeof visitorFuncs === 'function') {
        visitorFuncs = {
            enter: visitorFuncs
        }
    }

    visitorFuncs.enter && visitorFuncs.enter(node);

    if (defination.visitor) {
        defination.visitor.forEach(key => {
            const prop = node[key];
            if (Array.isArray(prop)) { // 如果该属性是数组
                prop.forEach(childNode => {
                    traverse(childNode, visitors);
                })
            } else {
                traverse(prop, visitors);
            }
        })
    }
    visitorFuncs.exit && visitorFuncs.exit(node);
}

这样，我们就实现了 AST 的遍历和 enter、exit 阶段的 visitor 调用。

为什么要分 enter 和 exit 两个阶段呢？

因为 enter 阶段在遍历子节点之前，那么修改之后就可以立刻遍历子节点，而 exit 是在遍历结束之后了，所以不会继续遍历子节点。如果 enter 阶段修改了 AST 但是不想遍历新生成的子节点，可以用 path.skip 跳过遍历。

可以这样来遍历和修改 AST：

traverse(ast, {
    Identifier(node) {
        node.name = 'b';
    }
});

总结

traverse 就是 AST 的遍历，而树的遍历就深度优先和广度优先两种，这里是深度优先，我们维护了一份什么 AST 遍历什么属性的数据，然后遍历的时候就可以知道如何遍历每一个节点。

遍历的时候调用 visitor 的回调函数，分为 enter 和 exit 阶段来调用，默认是 enter 阶段。

（代码在这里，建议 git clone 下来通过 node 跑一下）