[TOC] # 抽象語法樹 抽象語法樹（abstract syntax code，AST）是源代碼的抽象語法結構的分級規劃的表示（hierarchical program representation），樹上的每個節點都表示源代碼中的一種結構。  這所以說是抽象的，是因為抽象語法樹并不會表示出真實語法出現的每一個細節，比如說，嵌套括號被隱含在樹的結構中，并沒有以節點的形式呈現。抽象語法樹并不依賴于源語言的語法，也就是說語法分析階段所采用的上下文無文文法，因為在寫文法時，經常會對文法進行等價的轉換（消除左遞歸，回溯，二義性等），這樣會給文法分析引入一些多余的成分，對后續階段造成不利影響，甚至會使合個階段變得混亂。因些，很多編譯器經常要獨立地構造語法分析樹，為前端，后端建立一個清晰的接口。 抽象語法樹在很多領域有廣泛的應用，比如瀏覽器，智能編輯器，編譯器。 # 解析過程 Babel 是通過?[Babylon](https://hub.fastgit.org/babel/babylon)?實現的。在解析過程中有兩個階段：?詞法分析?和?語法分析?， 詞法分析（Lexical Analysis）：把字符串形式的代碼轉換為?令牌?（tokens）流，令牌類似于 AST 中節點； 語法分析（Syntax Analysis）：則會把一個令牌流轉換成 AST的形式，同時這個階段會把令牌中的信息轉換成 AST 的表述結構。 > [JavaScript 語法解析、AST、V8、JIT](https://cheogo.github.io/learn-javascript/201709/runtime.html) # 解析（PARSE） ## @babel/parser [@babel/parser](https://hub.fastgit.org/babel/babel/tree/main/packages/babel-parser)?是一個解析器，它可以將 JavaScript 字符串轉換為對計算機來說更加友好的表現形式，稱之為抽象語法樹（AST）。 # 轉換（TRANSFORM） ## @babel/traverse 模塊允許你瀏覽、分析和修改抽象語法樹（AST）。 # 生成（GENERATE） ## @babel/generator [babel-generator](https://www.npmjs.com/package/@babel/generator)?模塊用來將轉換后的抽象語法樹（AST）轉換為 JavaScript 字符串。 ## recast # 參考 * [jamiebuilds/the-super-tiny-compiler](https://github.com/jamiebuilds/the-super-tiny-compiler) * [一文助你搞懂 AST](https://chengyuming.cn/views/webpack/AST.html) * [五分鐘了解抽象語法樹（AST）babel是如何轉換的？](https://www.cnblogs.com/nelson-hu/p/12368253.html)