你怎麼可以不瞭解 AST 呢？

周世鐵，微醫前端技術部醫療支撐組前端亂構師

前言

本文將通過以下幾個方面對AST進行學習

1. 基礎知識

• AST是什麼
• AST有什麼用
• AST如何生成

• 去掉debugger
• 修改函數中執行的console.log參數

基礎知識

AST是什麼

在電腦科學中，抽象語法樹（abstract syntax tree 或者縮寫為 AST），或者語法樹（syntax tree），是原始碼的抽象語法結構的樹狀表現形式，這裡特指程式語言的原始碼。

var tree = 'this is tree'
js 源程式碼將會被轉化成下面的抽象語法樹

{  "type": "Program",  "start": 0,  "end": 25,  "body": [    {      "type": "VariableDeclaration",      "start": 0,      "end": 25,      "declarations": [        {          "type": "VariableDeclarator",          "start": 4,          "end": 25,          "id": {            "type": "Identifier",            "start": 4,            "end": 8,            "name": "tree"          },          "init": {            "type": "Literal",            "start": 11,            "end": 25,            "value": "this is tree",            "raw": "'this is tree'"          }        }      ],      "kind": "var"    }  ],  "sourceType": "module"}
可以看到一條語句由若干個詞法單元組成。這個詞法單元就像 26 個字母。創造出個十幾萬的單詞，通過不同單詞的組合又能寫出不同內容的文章。

至於有哪些詞法單元可點選檢視AST 物件文件 或者 參考掘金大佬的文章高階前端基礎-JavaScript 抽象語法樹 AST裡面列舉了語法樹節點與解釋。

AST 有什麼用

• IDE 的錯誤提示、程式碼格式化、程式碼高亮、程式碼自動補全等
• JSLint、JSHint 對程式碼錯誤或風格的檢查等
• webpack、rollup 進行程式碼打包等
• CoffeeScript、TypeScript、JSX 等轉化為原生 Javascript.
• vue 模板編譯、react 模板編譯

AST 如何生成

• 詞法分析 (Lexical Analysis)：掃描輸入的原始碼字元串，生成一系列的詞法單元 (tokens)。這些詞法單元包括數字，標點符號，運算符等。詞法單元之間都是獨立的，也即在該階段我們並不關心每一行程式碼是通過什麼方式組合在一起的。
• 語法分析 (Syntax Analysis)：建立分析語法單元之間的關係

正規理解

• 詞法分析

• 語法分析

非正規理解

• 詞法分析

• 語法分析

• JsParser

• acorn
• esprima
• traceur
• @babel/parser

實戰小例子

例子 1：去 debugger

function fn() {  console.log('debugger')  debugger;}
根據前面學過的知識點，我們先腦海中意淫下如何去掉這個debugger

1. 先將原始碼轉化成AST
2. 遍歷**AST**上的節點，找到**debugger**節點，並刪除
3. 將轉換過的AST再生成JS程式碼

const parser = require('@babel/parser');const traverse = require("@babel/traverse");const generator = require("@babel/generator");
// 原始碼const code = `function fn() {  console.log('debugger')  debugger;}`;
// 1. 原始碼解析成 astconst ast = parser.parse(code);

// 2. 轉換const visitor = {  // traverse 會遍歷樹節點，只要節點的 type 在 visitor 物件中出現，變化呼叫該方法  DebuggerStatement(path) {    // 刪除該抽象語法樹節點    path.remove();  }}traverse.default(ast, visitor);
// 3. 生成const result = generator.default(ast, {}, code);
console.log(result.code)
// 4. 日誌輸出
// function fn() {//   console.log('debugger');// }

例子 2：修改函數中執行的 console.log 參數

function funA() { console.log(1)}// 轉換成
function funA() { console.log('from function funA:', 1)}

1. 使用 @babel/parser 將原始碼解析成 ast
2. 監聽 @babel/traverse 遍歷到 CallExpression
3. 觸發後，判斷如果執行的方法是 console.log 時，往 arguments unshift一個 StringLiteral
4. 將轉換後的 ast 生成程式碼

const visitor = {  CallExpression(path) {    // console.log(path)  }

const visitor = {  // 當遍歷到 CallExpression 時候觸發  CallExpression(path) {    const callee = path.node.callee;    // 判斷當前當前執行的函數是否是組合表示式    if (types.isMemberExpression(callee)) {      const { object, property } = callee;      if (types.isIdentifier(object, { name: 'console' }) && types.isIdentifier(property, { name: 'log' })) {        // 查詢最接近的父函數或程式        const parent = path.getFunctionParent();        const parentFunName = parent.node.id.name;        path.node.arguments.unshift(types.stringLiteral(`from function ${parentFunName}`))      }    }  }}

總結

參考

• babel-handbook(https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md)
• 深入 Babel，這一篇就夠了(https://juejin.im/post/6844903746804137991)
• 高階前端基礎-JavaScript 抽象語法樹 AST(https://juejin.cn/post/6844903798347939853#heading-12)

因融資失敗，應用崩潰，3名程式設計師被「祭天」！
「35歲才是一個程式設計師成熟的開始！」
B站就機房伺服器故障道歉；羅永浩否認將啟動自動駕駛項目；亞馬遜收購 Facebook 衛星網際網路團隊|極客頭條