答案：编写Babel插件需理解AST结构，创建含visitor对象的函数，通过遍历特定节点如FunctionDeclaration，利用path和types API将函数声明替换为箭头函数形式，并通过@babel/core测试转换结果。
编写一个 Babel 插件来转换代码，本质上是操作抽象语法树（AST）。Babel 将源代码解析成 AST，插件通过访问和修改这棵树的节点，实现代码的转换。整个过程分为几个关键步骤：理解 AST 结构、创建插件骨架、定义需要处理的节点类型、进行节点替换或修改，最后测试插件。
理解 Babel 插件的基本结构
Babel 插件是一个函数，返回一个包含 visitor 对象的对象。visitor 定义了你希望在遍历 AST 时处理哪些节点类型，比如 FunctionDeclaration、Identifier 等。
基本结构如下：
module.exports = function (babel) {
return {
visitor: {
// 节点类型在这里定义
}
};
};
其中 babel 参数提供了必要的 API，如 types（用于创建或判断 AST 节点）、template（用于生成代码片段）等。
选择要处理的 AST 节点
你需要知道想转换什么样的代码模式。例如，你想把所有函数声明 function hello() {} 转换成箭头函数形式。
可以使用 AST Explorer 工具粘贴代码，查看其 AST 结构。你会看到 function hello() {} 对应的是 FunctionDeclaration 节点。
在 visitor 中添加对该节点的处理：
visitor: {
FunctionDeclaration(path, state) {
// 在这里修改节点
}
}
修改节点实现代码转换
在 visitor 方法中，path 是对当前节点及其父节点、兄弟节点的引用，提供操作接口，如替换、删除、插入等。
继续上面的例子，将函数声明转为变量声明 + 箭头函数：
const { types: t } = babel;
FunctionDeclaration(path) {
const { node } = path;
const { id, params, body } = node;
// 创建箭头函数表达式
const arrowFunc = t.arrowFunctionExpression(params, body);
// 创建变量声明：const id = () => {}
const variableDecl = t.variableDeclaration('const', [
t.variableDeclarator(id, arrowFunc)
]);
// 替换原节点
path.replaceWith(variableDecl);
}
这样，function sum(a, b) { return a + b; } 就会被转换成 const sum = (a, b) => { return a + b; };
测试你的插件
最简单的方式是使用 @babel/core 和 @babel/cli。安装依赖后，在本地调用 Babel 并加载你的插件：
const babel = require('@babel/core');
const myPlugin = require('./my-plugin');
const code = `function greet() { console.log('Hi'); }`;
const result = babel.transform(code, {
plugins: [myPlugin]
});
console.log(result.code);
// 输出：const greet = () => { console.log('Hi'); };
也可以写单元测试，使用 jest 验证输入输出是否符合预期。
基本上就这些。核心在于熟悉常见 AST 节点结构，合理使用 path 和 types API 进行替换。不复杂但容易忽略细节，比如作用域处理或保留注释，但在大多数场景下，上述流程已足够应对常见的代码转换需求。
