一個例子 - 入門JS中的AST的使用

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

  1. 打開網頁https://astexplorer.net/, 可以選擇esprima作為AST解析庫,可以輸入代碼const sum = (a,b) => a+b;,截圖如下,好吧右邊就是解析好的AST的語法樹了, 可以仔細看下每段代碼都有對應的屬性描述
image.png
  1. JS中引用babel相應的包,可以實現把代碼輸入進去,在解析間通過訪問者模式,你可以聲明不同類型(對應解析為AST語法樹的type類型)的訪問者,當作插件注入到轉換的過程中

  2. 在解析期間會傳入解析的節點,你需要做的就是處理這些節點的類型或者值,替換為你需要的東西,這樣一個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);
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容