babel 與 ast
什麼是 babel
Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的程式碼轉換為向後兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。
什麼是抽象語法樹（AST）
在電腦科學中，抽象語法樹（Abstract Syntax Tree，AST），或簡稱語法樹（Syntax tree），是源程式碼語法結構的一種抽象表示。 它以樹狀的形式表現程式語言的語法結構，樹上的每個節點都表示源程式碼中的一種結構。 之所以說語法是「抽象」的，是因為這裡的語法並不會表示出真實語法中出現的每個細節。
對於AST的相關介紹:
推薦的介紹鏈接:
Leveling Up One』s Parsing Game With ASTs
中文翻譯: //segmentfault.com/a/1190000038511186
維基百科裡的介紹: //en.wikipedia.org/wiki/Abstract_syntax_tree
babel 的簡單使用
相關 api 可以參考文檔: //babeljs.io/docs/en/babel-core#parse
使用 babel 的 API 將程式碼解析成 ast:
var babel = require("@babel/core");
const code = `const a = 1 + 2;`
// code 解析成 ast
const result = babel.transformSync(code, {ast: true});
console.log(result.ast)
當然 ast 也可以轉換成程式碼:
const { code } = babel.transformFromAstSync(result.ast, { presets: ["minify"], babelrc: false, configFile: false,});
console.log(code)
在這個在線網站,你可以更加直接地看到 code 和 ast 的比較:
//lihautan.com/babel-ast-explorer
const n = 1 的 ast:
-program:Program{
sourceType:"module" -body:[ -VariableDeclaration { -declarations:[ -VariableDeclarator{ -id:Identifier{ name:"n" } -init:NumericLiteral{ -extra:{ rawValue:1 raw:"1" } value:1 } } ] kind:"const" } ] directives:[]}
babel 插件:
var babel = require("@babel/core");
const code = 'const n = 1';
const output = babel.transformSync(code, {
plugins: [ function myCustomPlugin() {
return {
visitor: {
Identifier(path) {
// 在這個例子里我們將所有變數 `n` 變為 `x` if (path.isIdentifier({ name: 'n' })) {
path.node.name = 'x'; }
},
},
};
},
],});
console.log(output.code);
// const x = 1;
通過 babel 的插件我們可以對程式碼進行隨心所以的修改
關於 visitor 使用的是訪問者模式, 在遍歷階段，babel會先進行深度優先遍歷來訪問AST的每一個節點。你可以為訪問指定一個回調函數，然後每當訪問某個節點的時候，babel會調用這個函數，並給函數傳入當前訪問的節點。
現在我們添加另一個函數: NumericLiteral, 在剛剛的 ast 中我們可以看到 const n = 1 是有 NumericLiteral 此節點的
function myCustomPlugin() {
return {
visitor: {
Identifier(path) {
console.log('identifier');
},
NumericLiteral(path) {
console.log('NumericLiteral');
},
},
};
}
運行 plugin.js, 列印結果:
Identifier
NumericLiteral
const x = 1;
即在碰到此節點的時候 就會觸發插件中對應節點的回調, 關於回調函數的 path 可以在此文檔中查看: //github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#paths
修改表達式
在插件方法 NumericLiteral 上添加操作:
visitor: {
// 省略其他方法 NumericLiteral(path) {
console.log('NumericLiteral');
const newNode = babel.types.binaryExpression('+', babel.types.NumericLiteral(path.node.value), babel.types.NumericLiteral(10));
path.replaceWith(newNode);
path.skip(); // 因為我們新增加了一個 NumericLiteral, 所以插件會檢測到, 並且又會觸發此回調,造成無限循環 // skip 的作用就是跳過對當前路徑子節點的訪問 }
}
這裡我們新建了一個 binaryExpression, 將 const x = 1 轉換為 const x = 1 + 10
這是關於 babel.types 的文件: //www.babeljs.cn/docs/babel-types
本文程式碼記錄: //github.com/Grewer/JsDemo/tree/master/babel2AST
參考資料
//lihautan.com/step-by-step-guide-for-writing-a-babel-transformation/
