作者：京東科技 周明亮
AST 基礎與功能
在前端里面有一個很重要的概念，也是最原子化的內容，就是 AST ，幾乎所有的框架，都是基于 AST 進行改造運行，比如：React / Vue /Taro 等等。 多端的運行使用，都離不開 AST 這個概念。
在大家理解相關原理和背景后，我們可以通過手寫簡單的編譯器，簡單實現一個 JAVAscript 的代碼編譯器，編譯后在瀏覽器端正常運行。
創建數字小明，等于六加一。
創建數字小亮，等于七減二。
輸出，小明乘小亮。
通過實現一個自定義的編譯器，我們發現我們自己也能寫出很多新的框架。最終目標都是通過編譯轉換，翻譯為瀏覽器識別的 JavaScript + css + html。
沒錯！翻譯翻譯～
當然我們也可以以這個為基礎，去實現跨端的框架，直接翻譯為機器碼，跑到各種硬件上。當然一個人肯定比較困難，你會遇到各種各樣的問題需要解決，不過沒關系，只要你有好的想法，拉上一群人，你就能實現。
大家記得點贊，評論，收藏，一鍵三連啊～
分析器
說到這個代碼語義化操作前，我們先說說分析器，其實就是編譯原理。當你寫了一段代碼，要想讓機器知道，你寫了啥。
那機器肯定是要開始掃描，掃描每一個關鍵詞，每一個符號，我們將進行詞法分析的程序或者函數叫作詞法分析器（Lexical analyzer），通過它的掃描可以將字符序列轉換為單詞（Token）序列的過程。
掃描到了關鍵詞，我們怎么才能把它按照規則，轉換為機器認識的特定規則呢？比如你掃描到：
const a = 1
機器怎么知道要創建一個 變量 a 并且等于 1 呢？
所以，這時候就引入一個概念：語法分析器（Syntactic analysis，Parser）。通過語法分析器，不斷的調用詞法分析器，進行語法檢查、并構建由輸入的單詞組成的數據結構（一般是語法分析樹、抽象語法樹等層次化的數據結構）。
在JS的世界里，這個掃描后得到的數據結構 抽象語法樹 【AST】。可能很多人聽過這個概念，但是具體沒有深入了解。機緣巧合，剛好我需要用到這個玩意，今天就簡單聊聊。
抽象語法樹 AST
AST 是 Abstract Syntax Tree 的縮寫，也就是：抽象語法樹。在代碼的世界里，它叫這個。在語言的世界里面，他叫語法分析樹。
語言世界，舉個栗子：
我寫文章。
語法分析樹：
主語：我，人稱代詞。
謂語：寫，動詞。
賓語：文章，名詞。
長一點的可能會有：主謂賓定狀補。是不是發現好熟悉，想當年大家學語文和英語，那是一定要進行語法分析，方便你理解句子要表達的含義。
PS：對我來說，語法老難了！！！哈哈哈，大家是不是找到感覺了～
接下來我們講講代碼里面的抽象語法樹。
const me = "我"
function write() {
console.log("文章")
}
那我們用來進行語法分析，能夠得到什么內容了？這時候我們可以借助已有的工具，將他們進行分析，進行一個初級入門。
其實我們也可以完全自己進行分析，不過這樣就不容易入門，定義的語法規則很多，如果只是看，很容易就被勸退了。而通過輔助工具，我們可以很快接受相關的概念。
常用的工具有很多，比如：Recast 、Babel、Acorn 等等
也可以使用在線 AST 解析：AST Explorer，左上角菜單可以切換到各種解析工具，并且支持各類編程語言的解析，強大好用，可以用來學習，幫助你理解 AST。
為了幫助大家理解，我們一點點的進行解析，并且去掉了部分屬性，留下主干部分，完整的可以通過在線工具查看。【不同解析器，對于根節點或者部分屬性稍有區別，但是本質是一樣的。】
{
"type": "Program",
"body": [
{
"type": "VariableDeclaration",
"declarations": [
{
"type": "VariableDeclarator",
"id": {
"type": "Identifier",
"name": "me"
},
"init": {
"type": "Literal",
"value": "我",
"raw": ""我""
}
}
],
"kind": "const"
},
{
"type": "FunctionDeclaration",
"id": {
"type": "Identifier",
"name": "write"
},
"params": [],
"body": {
"type": "BlockStatement",
"body": [
{
"type": "ExpressionStatement",
"expression": {
"type": "CallExpression",
"callee": {
"type": "MemberExpression",
"object": {
"type": "Identifier",
"name": "console"
},
"property": {
"type": "Identifier",
"name": "log"
}
},
"arguments": [
{
"type": "Literal",
"value": "文章",
"raw": ""文章""
}
]
}
}
]
}
}
],
"sourceType": "module"
}
接下來，我們一個一個節點看，首先是第一個節點 Program
{
"type": "Program",
"body": [
{
"type": "VariableDeclaration",
"kind": "const"
...
},
{
"type": "FunctionDeclaration",
"id": {
"type": "Identifier",
"name": "write"
},
....
}
],
"sourceType": "module"
}
Program 是代碼程序的根節點，通過它進行節點一層一層的遍歷操作。 上面我們看出它有兩個節點，一個是變量聲明節點，另外一個是函數聲明節點。
如果我們再定義一個變量或者函數，這時候 body 就又會產生一個節點。我們要掃描代碼文件時，我們就是基于 body 進行層層的節點掃描，直到把所有的節點掃描完成。
{
"type": "VariableDeclaration",
"declarations": [
{
"type": "VariableDeclarator",
"id": {
"type": "Identifier",
"name": "me"
},
"init": {
"type": "Literal",
"value": "我",
"raw": ""我""
}
}
],
"kind": "const"
},
上面對應的代碼，就是 const me = "我" ，這個節點告訴我們。 聲明一個變量，使用類型是：VariableDeclaration, 他的唯一標識名是：me，初始化值："我"。
后續的函數分析，也是一樣的。
{
"type": "FunctionDeclaration",
"id": {
"type": "Identifier",
"name": "write"
},
"params": [],
"body": {
"type": "BlockStatement",
"body": [
{
"type": "ExpressionStatement",
"expression": {
"type": "CallExpression",
"callee": {
"type": "MemberExpression",
"object": {
"type": "Identifier",
"name": "console"
},
"property": {
"type": "Identifier",
"name": "log"
},
},
"arguments": [
{
"type": "Literal",
"value": "文章",
"raw": ""文章""
}
],
}
}
]
}
}
這個節點，清楚的告訴我們，這個函數名是什么，他里面有哪些內容，入參是什么，調用了什么函數對象。
我們發現，通過語法分析器的解析，我們可以把代碼，變成一個對象。這個對象將代碼分割為原子化的內容，很容易能夠幫助機器或者我們去理解它的組成。
這個就是分析器的作用，我們不再是一大段一大段的看代碼邏輯，而是一小段一小段的看節點。
有了這個我們可以干什么呢？
AST 在 JS 中的用途
1. 自定義語法分析器，寫一個新的框架。
通過對現有的 AST 理解，我們可以依葫蘆畫瓢，寫出自定義的語法分析器，轉成自定義的抽象語法樹，再進行解析轉為瀏覽器可識別的 Javascript 語言，或者其他硬件上能識別的語言。
比如：React / Vue 等等框架。其實這些框架，就是自定義了一套語法分析器，用他們特定的語言，進行轉換，翻譯翻譯，生成相關的DOM節點，操作函數等等 JS 函數。
2. 利用已有語法分析器，實現多端運行。
通過已有的 AST，我們將代碼進行翻譯翻譯，實現跨平臺多端運行。我們將得到代碼進行語法解析，通過遍歷所有的節點，我們將他們進行改造，使得它能夠運行在其他的平臺上。
比如：Taro / uni-App 等等框架。我們只要寫一次代碼，框架通過分析轉換，就可以運行到 H5 / 小程序等等相關的客戶端。
3. 進行代碼改造，預編譯增強處理。
依舊是通過已有的 AST，我們將代碼進行分析。再進行代碼混淆，代碼模塊化處理，自動進行模塊引入，低版本兼容處理。
比如：Webpack / Vite 等等打包工具。我們寫完代碼，通過他們的處理，進行增強編譯，增強代碼的健壯性。
AST 的應用實踐
我們在進行框架的改造或者適配時，我們可能才會用到這個。常規的方法，可能有兩種：
- 按照特定的寫法，通過正則表達式，直接進行大段代碼替換。
- /** mingliang start */ const a = 1 /** mingliang end */
如，我們找到這段代碼注釋，直接通過 code.replace(/mingliang/g, 'xxxx') 類似這種方式替換。
- 通過引入運行，改造相關的變量，再重新寫入。
// a.js
cost config = { a: 1 }
return config
我們可能先 let config = require(a.js) 運行這個文件，我們就得到了這個 config 這個變量值。
之后我們改寫變量 config.a = 2,
最后，重新通過 fs.writeSync('a.js', 'return ' + JSON.stringify(config, null, 2)) 寫入。
現在，我們就可以掌握新的方法，進行代碼改造。
