第 26 卷

第 26 / 26 卷日期：2026-01-02

8	name: "replace-console-log", //插件名称（用于调试）
9	visitor: {
10	//注册CallExpression节点的访问器：遍历到该节点时执行
11	CallExpression(path) {
12	// path：节点路径对象，包含当前节点、父节点、修改方法等
13	const callee = path.node.callee; //获取函数调用的被调用者（如

console.log）

15	//条件判断：是否是console.log调用
16	// 1. callee是MemberExpression（如console.log）
17	// 2. MemberExpression的object是Identifier（console）
18	// 3. MemberExpression的property是Identifier（log）
19	if (
20	t.isMemberExpression(callee) &&
21	t.isIdentifier(callee.object, { name: "console" }) &&
22	t.isIdentifier(callee.property, { name: "log" })
23	) {
24	//替换callee（console.log→log.info）
25	// 1.创建log标识符节点
26	const logObj = t.identifier("log");
27	// 2.创建info标识符节点
28	const infoProp = t.identifier("info");
29	// 3.创建新的MemberExpression（log.info）
30	const newCallee = t.memberExpression(logObj, infoProp);
31	// 4.替换当前节点的callee
32	path.node.callee = newCallee;
33	}
34	},
35	},
36	};
37 };

创建测试文件 test.js，编写需要转译的代码：

Code block

1// test.js 2console.log("Hello Babel Plugin");

3console.error("Error"); // 不处理，仅替换 console.log

2module.exports = { 3plugins: ["./index.js"], // 引入自定义插件

4};

安装 @babel/cli 并执行转译：

Code block

1npm install --save-dev @babel/cli 2npx babel test.js --out-file dist/test.js

查看转译结果（ dist/test.js）：

Code block

1log.info("Hello Babel Plugin");

2console.error("Error"); // 未被修改，符合预期

可通过插件选项让用户自定义替换规则（如将 console.log 替换为自定义函数名）：

Code block

1// 优化后的插件逻辑（index.js）

2	module.exports = function (api, options) {
3	const t = api.types;
4	//默认选项：替换为log.info
5	const { targetObj = "log", targetProp = "info" } = options;

6 7return {

8name: "replace-console-log", 9visitor: {

10CallExpression(path) {

11	const callee = path.node.callee;
12	if (
13	t.isMemberExpression(callee) &&
14	t.isIdentifier(callee.object, { name: "console" }) &&
15	t.isIdentifier(callee.property, { name: "log" })
16	) {

23};

24};

用户使用时传入选项：

Code block

1// babel.config.js 2module.exports = {

3plugins: [ 4["./index.js", { targetObj: "logger", targetProp: "log" }], // 替换为

logger.log 5],

6};

三、自定义插件的关键注意事项

• AST 节点精准判断：使用 @babel/types 的 isXxx 方法（如

t.isMemberExpression）判断节点类型，避免误修改其他节点。

path.replaceWith()（替换节点）、 path.remove()（删除节点）等方法操作节点。

性。

稳定性。

（注：文档部分内容可能由 AI 生成）

全站分卷索引 · 26 卷