如何编写一个Babel插件来转换你的JavaScript代码

Babel是一个广泛用于JavaScript代码转换的工具链，它的核心能力是把源码解析成抽象语法树（AST），对树进行操作后再生成新的代码。编写一个Babel插件，本质上就是描述如何在遍历AST时访问并修改某些节点。

Babel插件的基本结构

一个最小的Babel插件就是一个返回对象的函数，该对象带有visitor属性。visitor里声明了我们要拦截的节点类型以及对应的处理函数。

插件模板

module.exports = function({ types: babelTypes }) {
  return {
    name: 'my-first-babel-plugin',
    visitor: {
      // 这里写要处理的节点类型
      Identifier(path) {
        // 对标识符节点做处理
      }
    }
  };
};

理解AST与path

Babel把代码变成一棵节点树，每个节点代表一个语法结构，比如变量、函数、表达式。在visitor中拿到的path不是节点本身，而是包含节点及上下信息的路径对象，通过它你能安全地替换、删除或插入节点。

• path.node：当前AST节点
• path.parent：父节点
• path.replaceWith：替换当前节点
• path.remove：删除当前节点

实战：把console.log改为自定义函数

假设我们想把代码里的console.log(...)统一替换成myLog(...)，可以拦截CallExpression节点并判断调用对象。

module.exports = function({ types: t }) {
  return {
    name: 'replace-console-log',
    visitor: {
      CallExpression(path) {
        const callee = path.node.callee;
        // 判断是否是 console.log
        if (
          t.isMemberExpression(callee) &&
          t.isIdentifier(callee.object, { name: 'console' }) &&
          t.isIdentifier(callee.property, { name: 'log' })
        ) {
          // 构造新的调用 myLog(args)
          const myLog = t.memberExpression(
            t.identifier('myApp'),
            t.identifier('log')
          );
          path.replaceWith(
            t.callExpression(myLog, path.node.arguments)
          );
        }
      }
    }
  };
};

使用示例

源代码如下：

console.log('hello');

经过上面插件转换后变成：

myApp.log('hello');

调试与测试方法

推荐使用@babel/core的transform接口在Node环境中快速验证插件效果，而不必接入完整构建流程。

const babel = require('@babel/core');
const code = 'console.log(123);';
const out = babel.transformSync(code, {
  plugins: [require('./my-plugin')]
});
console.log(out.code);

常见注意点

写插件时不要直接修改path.node而不经过Babel提供的辅助方法，否则可能破坏遍历状态。

只要理清AST结构和visitor机制，编写Babel插件转换代码就是一件可控且实用的事。

BabelASTBabel_plugin修改时间：2026-07-27 00:12:17