使用一个AST库做babel插件转化步骤
- 打开网页https://astexplorer.net/， 可以选择esprima作为AST解析库，可以输入代码
const sum = (a,b) => a+b;,截图如下，好吧右边就是解析好的AST的语法树了, 可以仔细看下每段代码都有对应的属性描述
image.png
JS中引用babel相应的包，可以实现把代码输入进去，在解析间通过访问者模式，你可以声明不同类型(对应解析为AST语法树的type类型)的访问者，当作插件注入到转换的过程中
在解析期间会传入解析的节点，你需要做的就是处理这些节点的类型或者值，替换为你需要的东西，这样一个AST的babel插件就写好了，下面事简单的代码
const babel = require("@babel/core");
const babelTypes = require("babel-types");
// 箭头函数代码
const code = "const sum = (a,b) => a+b";
// 写自己的babel的转换器，visitor的访问者模式
let transformArrowFunction = {
visitor: { // 访问者模式, 处理箭头函数
ArrowFunctionExpression: (path,state) => {
let node = path.node;
let id = path.parent.id;
let params = node.params;
// 创建大括号表达式
let body = babelTypes.blockStatement([
babelTypes.returnStatement(node.body)
]);
// 创建函数表达式
let functionExpression = babelTypes.functionExpression(id,params,body,false,false);
// 把原来的箭头表达式替换了
path.replaceWith(functionExpression);
}
}
};
// 用babel的转换,传个插件进去
const result = babel.transform(code,{
plugins: [
transformArrowFunction
]
});
console.log(code);
console.log(result.code);
