一个例子 - 入门JS中的AST的使用

使用一个AST库做babel插件转化步骤

1. 打开网页https://astexplorer.net/， 可以选择esprima作为AST解析库，可以输入代码const sum = (a,b) => a+b;,截图如下，好吧右边就是解析好的AST的语法树了, 可以仔细看下每段代码都有对应的属性描述

2. JS中引用babel相应的包，可以实现把代码输入进去，在解析间通过访问者模式，你可以声明不同类型(对应解析为AST语法树的type类型)的访问者，当作插件注入到转换的过程中

3. 在解析期间会传入解析的节点，你需要做的就是处理这些节点的类型或者值，替换为你需要的东西，这样一个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);