什么是 Babel AST？如何用它写自定义插件？

Babel AST 是源码解析后的抽象语法树，Babel 插件本质上就是“遍历这棵树，找到目标节点，再改掉它”。完整流程是：parser 把代码转成 AST，traverse 按 visitor 访问节点，插件通过 path.remove、replaceWith、insertBefore 等方法修改节点，最后 generator 再生成代码。

写插件时不要直接乱改 node，优先用 path，因为 path 带着父节点、作用域、替换/删除能力。比如删掉 console.log，要访问 CallExpression，判断 callee 是否是 console.log，然后 remove。

追问

AST 和普通字符串替换有什么区别？

字符串替换只看文本，容易误伤注释、变量名或字符串。AST 能理解语法结构，比如只删除真正的函数调用，不会碰到字符串里的 console.log。

visitor 为什么按节点类型写？

因为 Babel 遍历 AST 时会按节点类型触发回调。你关心函数调用就写 CallExpression，关心变量名就写 Identifier。

path.scope 有什么用？

它用于处理作用域绑定，比如判断变量是否在当前作用域声明、重命名变量、生成不冲突的临时变量。写复杂插件时这是避免变量污染的关键。

项目里最容易踩什么坑？

最常见的是替换节点后又被继续遍历，导致重复处理。可以在必要时用 path.skip()，或者给新节点加标记避免二次转换。

写段代码

javascript
module.exports = ({ types: t }) => ({
  name: 'remove-console-log',
  visitor: {
    CallExpression(path) {
      const c = path.node.callee;
      if (
        t.isMemberExpression(c) &&
        t.isIdentifier(c.object, { name: 'console' }) &&
        t.isIdentifier(c.property, { name: 'log' })
      ) path.remove();
    }
  }
});