使用一個AST庫做babel插件轉化步驟

1. 打開網頁https://astexplorer.net/， 可以選擇esprima作為AST解析庫，可以輸入代碼const sum = (a,b) => a+b;,截圖如下，好吧右邊就是解析好的AST的語法樹了, 可以仔細看下每段代碼都有對應的屬性描述

image.png

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);