AST抽象語法樹—最基礎的javascript重點知識

javascript就像一臺精妙運作的機器，我們可以用它來完成一切天馬行空的構思。

我們對javascript生態了如指掌，卻常忽視javascript本身。這臺機器，究竟是哪些零部件在支持著它運行？

AST在日常業務中也許很難涉及到，但當你不止於想做一個工程師，而想做工程師的工程師，寫出vue、react之類的大型框架，或類似webpack、vue-cli前端自動化的工具，或者有批量修改源碼的工程需求，那你必須懂得AST。AST的能力十分強大，且能幫你真正吃透javascript的語言精髓。

事實上，在javascript世界中，你可以認為抽象語法樹(AST)是最底層。 再往下，就是關於轉換和編譯的「黑魔法」領域了。

人生第一次拆解Javascript

小時候，當我們拿到一個螺絲刀和一臺機器，人生中最令人懷念的夢幻時刻便開始了：

我們把機器，拆成一個一個小零件，一個個齒輪與螺釘，用巧妙的機械原理銜接在一起...

當我們把它重新照不同的方式組裝起來，這時，機器重新又跑動了起來——世界在你眼中如獲新生。

通過抽象語法樹解析，我們可以像童年時拆解玩具一樣，透視Javascript這臺機器的運轉，並且重新按照你的意願來組裝。

現在，我們拆解一個簡單的add函數

function add(a, b) { return a + b}

首先，我們拿到的這個語法塊，是一個FunctionDeclaration(函數定義)對象。

用力拆開，它成了三塊：

• 一個id，就是它的名字，即add
• 兩個params，就是它的參數，即[a, b]
• 一塊body，也就是大括號內的一堆東西

add沒辦法繼續拆下去了，它是一個最基礎Identifier（標誌）對象，用來作為函數的唯一標誌，就像人的姓名一樣。

{ name: &39; type: &39; ...}

params繼續拆下去，其實是兩個Identifier組成的數組。之後也沒辦法拆下去了。

[ { name: &39; type: &39; ... }, { name: &39; type: &39; ... }]

接下來，我們繼續拆開body
我們發現，body其實是一個BlockStatement（塊狀域）對象，用來表示是{return a + b}

打開Blockstatement，裡面藏著一個ReturnStatement（Return域）對象，用來表示return a + b

繼續打開ReturnStatement,裡面是一個BinaryExpression(二項式)對象，用來表示a + b

繼續打開BinaryExpression，它成了三部分，left，operator，right

• operator 即+
• left 裡面裝的，是Identifier對象 a
• right 裡面裝的，是Identifer對象 b

就這樣，我們把一個簡單的add函數拆解完畢，用圖表示就是

看！抽象語法樹(Abstract Syntax Tree)，的確是一種標準的樹結構。

那麼，上面我們提到的Identifier、Blockstatement、ReturnStatement、BinaryExpression， 這一個個小部件的說明書去哪查？

請查看 AST對象文檔

送給你的AST螺絲刀：recast

輸入命令：

npm i recast -S

你即可獲得一把操縱語法樹的螺絲刀

接下來，你可以在任意js文件下操縱這把螺絲刀，我們新建一個parse.js示意：

parse.js

// 給你一把&34;——recastconst recast = require(&34;);// 你的&34;——一段代碼// 我們使用了很奇怪格式的代碼，想測試是否能維持代碼結構const code = ` function add(a, b) { return a + // 有什麼奇怪的東西混進來了 b } `// 用螺絲刀解析機器const ast = recast.parse(code);// ast可以處理很巨大的代碼文件// 但我們現在只需要代碼塊的第一個body，即add函數const add = ast.program.body[0]console.log(add)

輸入node parse.js你可以查看到add函數的結構，與之前所述一致，通過AST對象文檔可查到它的具體屬性：

FunctionDeclaration{ type: &39;, id: ... params: ... body: ...}

你也可以繼續使用console.log透視它的更內層，如：

console.log(add.params[0])

console.log(add.body.body[0].argument.left)

recast.types.builders 製作模具

一個機器，你只會拆開重裝，不算本事。

拆開了，還能改裝，才算上得了臺面。

recast.types.builders裡面提供了不少「模具」，讓你可以輕鬆地拼接成新的機器。

最簡單的例子，我們想把之前的function add(a, b){...}聲明，改成匿名函數式聲明const add = function(a ,b){...}

如何改裝？

第一步，我們創建一個VariableDeclaration變量聲明對象，聲明頭為const， 內容為一個即將創建的VariableDeclarator對象。

第二步，創建一個VariableDeclarator，放置add.id在左邊， 右邊是將創建的FunctionDeclaration對象

第三步，我們創建一個FunctionDeclaration，如前所述的三個組件，id params body中，因為是匿名函數id設為空，params使用add.params，body使用add.body。

這樣，就創建好了const add = function(){}的AST對象。

在之前的parse.js代碼之後，加入以下代碼

// 引入變量聲明，變量符號，函數聲明三種「模具」const {variableDeclaration, variableDeclarator, functionExpression} = recast.types.builders// 將準備好的組件置入模具，並組裝回原來的ast對象。ast.program.body[0] = variableDeclaration(&34;, [ variableDeclarator(add.id, functionExpression( null, // Anonymize the function expression. add.params, add.body ))]);//將AST對象重新轉回可以閱讀的代碼const output = recast.print(ast).code;console.log(output)

可以看到，我們列印出了

const add = function(a, b) { return a + // 有什麼奇怪的東西混進來了 b};

最後一行

const output = recast.print(ast).code;

其實是recast.parse的逆向過程，具體公式為

recast.print(recast.parse(source)).code === source

列印出來還保留著「原裝」的函數內容，連注釋都沒有變。

我們其實也可以列印出美化格式的代碼段：

const output = recast.prettyPrint(ast, { tabWidth: 2 }).code

輸出為

const add = function(a, b) { return a + b;};

現在，你是不是已經產生了「我可以通過AST樹生成任何js代碼」的幻覺？

我鄭重告訴你，這不是幻覺。

實戰進階：命令行修改js文件

除了parse/print/builder以外，Recast的三項主要功能：

• run: 通過命令行讀取js文件，並轉化成ast以供處理。
• tnt： 通過assert()和check()，可以驗證ast對象的類型。
• visit: 遍歷ast樹，獲取有效的AST對象並進行更改。

我們通過一個系列小務來學習全部的recast工具庫：

創建一個用來示例文件，假設是demo.js

demo.js

function add(a, b) { return a + b}function sub(a, b) { return a - b}function commonDivision(a, b) { while (b !== 0) { if (a > b) { a = sub(a, b) } else { b = sub(b, a) } } return a}

recast.run —— 命令行文件讀取

新建一個名為read.js的文件，寫入
read.js

recast.run( function(ast, printSource){ printSource(ast)})

命令行輸入

node read demo.js

我們查以看到js文件內容列印在了控制臺上。

我們可以知道，node read可以讀取demo.js文件，並將demo.js內容轉化為ast對象。

同時它還提供了一個printSource函數，隨時可以將ast的內容轉換回源碼，以方便調試。

recast.visit —— AST節點遍歷

read.js

39;recast&!/usr/bin/env nodeconst recast = require(&39;)recast.run(function(ast, printSource) { recast.visit(ast, { visitExpressionStatement: function(path) { const node = path.node printSource(node) this.traverse(path) } })});

調試時，如果你想輸出AST對象，可以console.log(node)

如果你想輸出AST對象對應的源碼，可以printSource(node)

命令行輸入`
node read demo.js`進行測試。

E83E8C; --tt-darkmode-color: !/usr/bin/env nodeconst recast = require(&34;);const TNT = recast.types.namedTypesrecast.run(function(ast, printSource) { recast.visit(ast, { visitExpressionStatement: function(path) { const node = path.value // 判斷是否為ExpressionStatement，正確則輸出一行字。 if(TNT.ExpressionStatement.check(node)){ console.log(&39;) } this.traverse(path); } });});

read.js

34;recast&!/usr/bin/env nodeconst recast = require(&34;);const { identifier:id, expressionStatement, memberExpression, assignmentExpression, arrowFunctionExpression, blockStatement} = recast.types.buildersrecast.run(function(ast, printSource) { // 一個塊級域 {} console.log(&39;) printSource(blockStatement([])) // 一個鍵頭函數 ()=>{} console.log(&39;) printSource(arrowFunctionExpression([],blockStatement([]))) // add賦值為鍵頭函數 add = ()=>{} console.log(&39;) printSource(assignmentExpression(&39;,id(&39;),arrowFunctionExpression([],blockStatement([])))) // exports.add賦值為鍵頭函數 exports.add = ()=>{} console.log(&39;) printSource(expressionStatement(assignmentExpression(&39;,memberExpression(id(&39;),id(&39;)), arrowFunctionExpression([],blockStatement([])))))});

上面寫了我們一步一步推斷出exports.add = ()=>{}的過程，從而得到具體的AST結構體。

使用node exportific demo.js運行可查看結果。

接下來，只需要在獲得的最終的表達式中，把id(&39;)替換成遍歷得到的函數名，把參數替換成遍歷得到的函數參數，把blockStatement([])替換為遍歷得到的函數塊級作用域，就成功地改寫了所有函數！

另外，我們需要注意，在commonDivision函數內，引用了sub函數，應改寫成exports.sub

exportific.js

34;recast&39;=&39;exports&39;exports&!/usr/bin/env nodeconst recast = require(&34;);const { identifier: id, expressionStatement, memberExpression, assignmentExpression, arrowFunctionExpression} = recast.types.buildersconst fs = require(&39;)const path = require(&39;)// 截取參數const options = process.argv.slice(2)//如果沒有參數，或提供了-h 或--help選項，則列印幫助if(options.length===0 || options.includes(&39;) || options.includes(&39;)){ console.log(` 採用commonjs規則，將.js文件內所有函數修改為導出形式。 選項： -r 或 --rewrite 可直接覆蓋原有文件 `) process.exit(0)}// 只要有-r 或--rewrite參數，則rewriteMode為truelet rewriteMode = options.includes(&39;) || options.includes(&39;)// 獲取文件名const clearFileArg = options.filter((item)=>{ return ![&39;,&39;,&39;,&39;].includes(item)})// 只處理一個文件let filename = clearFileArg[0]const writeASTFile = function(ast, filename, rewriteMode){ const newCode = recast.print(ast).code if(!rewriteMode){ // 非覆蓋模式下，將新文件寫入*.export.js下 filename = filename.split(&39;).slice(0,-1).concat([&39;,&39;]).join(&39;) } // 將新代碼寫入文件 fs.writeFileSync(path.join(process.cwd(),filename),newCode)}recast.run(function (ast, printSource) { let funcIds = [] recast.types.visit(ast, { visitFunctionDeclaration(path) { //獲取遍歷到的函數名、參數、塊級域 const node = path.node const funcName = node.id const params = node.params const body = node.body funcIds.push(funcName.name) const rep = expressionStatement(assignmentExpression(&39;, memberExpression(id(&39;), funcName), arrowFunctionExpression(params, body))) path.replace(rep) return false } }) recast.types.visit(ast, { visitCallExpression(path){ const node = path.node; if (funcIds.includes(node.callee.name)) { node.callee = memberExpression(id(&39;), node.callee) } return false } }) writeASTFile(ast,filename,rewriteMode)})

現在嘗試一下

node exportific demo.js

已經可以在當前目錄下找到源碼變更後的demo.export.js文件了。

npm發包

編輯一下package.json文件

{ &34;: &34;, &34;: &34;, &34;: &34;, &34;: &34;, &34;: { &34;: &34; }, &34;: [], &34;: &34;, &34;: &34;, &34;: { &34;: &34; }}

注意bin選項，它的意思是將全局命令exportific指向當前目錄下的exportific.js

這時，輸入npm link 就在本地生成了一個exportific命令。

之後，只要哪個js文件想導出來使用，就exportific XXX.js一下。

這是在本地的玩法，想和大家一起分享這個前端小工具，只需要發布npm包就行了。

同時，一定要注意exportific.js文件頭有

E83E8C; --tt-darkmode-color: E83E8C; --tt-darkmode-color: #E83E8C;">npm publish

沒有任何繁瑣步驟，絲毫審核都沒有，你就發布了一個實用的前端小工具exportific 。任何人都可以通過

npm i exportific -g

全局安裝這一個插件。

提示：==在試驗教程時，請不要和我的包重名，修改一下發包名稱。==

結語

我們對javascript再熟悉不過，但透過AST的視角，最普通的js語句，卻煥發出驚心動魄的美感。你可以通過它批量構建任何javascript代碼！

童年時，這個世界充滿了新奇的玩具，再普通的東西在你眼中都如同至寶。如今，計算機語言就是你手中的大玩具，一段段AST對象的拆分組裝，構建出我們所生活的網絡世界。