看了就懂的 AST 和 Babel 工作流程
前言
本文寫于 2019 年，如有不對之處歡迎指出。
Babel 對于前端開發(fā)者來說應(yīng)該是很熟悉了，日常開發(fā)中基本上是離不開它的。
已經(jīng) 9102?年了，我們已經(jīng)能夠熟練地使用 es2015+ 的語法。但是對于瀏覽器來說，可能和它們還不夠熟悉，我們得讓瀏覽器理解它們，這就需要 Babel。
當(dāng)然，僅僅是 Babel 是不夠的，還需要 polyfill 等等等等，這里就先不說了。
這篇文章是一個(gè) Babel?的入門文章，希望能夠用淺顯易懂的語言讓不懂 Babel 的人不再恐懼。
What：什么是 Babel
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
簡單地說，Babel 能夠轉(zhuǎn)譯 ECMAScript 2015+ 的代碼，使它在舊的瀏覽器或者環(huán)境中也能夠運(yùn)行。
我們可以在 https://babel.docschina.org/repl 嘗試一下。
一個(gè)小?：
// es2015 的 const 和 arrow function
const add = (a, b) => a + b;
// Babel 轉(zhuǎn)譯后
var add = function add(a, b) {
return a + b;
};
Babel 的功能很純粹。我們傳遞一段源代碼給 Babel，然后它返回一串新的代碼給我們。就是這么簡單，它不會運(yùn)行我們的代碼，也不會去打包我們的代碼。
它只是一個(gè)編譯器。
How: Babel 是如何工作的
首先得要先了解一個(gè)概念：抽象語法樹（Abstract Syntax Tree, AST），Babel 本質(zhì)上就是在操作 AST 來完成代碼的轉(zhuǎn)譯。
AST
AST 是什么這里就不細(xì)說了，想要了解更多信息可以查看 Abstract syntax tree - Wikipedia。
這里比較關(guān)心的一段 JavaScript 代碼會生成一個(gè)怎樣的 AST，Babel 又是怎么去操作 AST 的。
我們還是拿上面的?來說明 const add = (a, b) => a + b;，這樣一句簡單的代碼，我們來看看它生成的 AST 會是怎樣的：
{
"type": "Program",
"body": [
{
"type": "VariableDeclaration", // 變量聲明
"declarations": [ // 具體聲明
{
"type": "VariableDeclarator", // 變量聲明
"id": {
"type": "Identifier", // 標(biāo)識符（最基礎(chǔ)的）
"name": "add" // 函數(shù)名
},
"init": {
"type": "ArrowFunctionExpression", // 箭頭函數(shù)
"id": null,
"expression": true,
"generator": false,
"params": [ // 參數(shù)
{
"type": "Identifier",
"name": "a"
},
{
"type": "Identifier",
"name": "b"
}
],
"body": { // 函數(shù)體
"type": "BinaryExpression", // 二項(xiàng)式
"left": { // 二項(xiàng)式左邊
"type": "Identifier",
"name": "a"
},
"operator": "+", // 二項(xiàng)式運(yùn)算符
"right": { // 二項(xiàng)式右邊
"type": "Identifier",
"name": "b"
}
}
}
}
],
"kind": "const"
}
],
"sourceType": "module"
}
我們可以通過一棵“樹”來更為直觀地展示這句代碼的 AST(從第二層的 declarations 開始)：
一個(gè) AST 的根節(jié)點(diǎn)始終都是 Program，上面的例子我們從 declarations 開始往下讀：
一個(gè)VariableDeclaration(變量聲明)：聲明了一個(gè) name 為 add 的ArrowFunctionExpression(箭頭函數(shù))：
params(函數(shù)入?yún)?：a和b函數(shù)體：函數(shù)主體是一個(gè) BinaryExpression(二項(xiàng)式)，一個(gè)標(biāo)準(zhǔn)的二項(xiàng)式分為三部分：left(左邊)：aoperator(運(yùn)算符)：加號 +right(右邊)：b
這樣就拆解了這一行代碼。
如果想要了解更多，可以閱讀和嘗試：
分析 AST：https://ASTexplorer.netAST規(guī)范：https://github.com/estree/estree
Babel 工作過程
了解了 AST 是什么樣的，就可以開始研究 Babel 的工作過程了。
上面說過，Babel 的功能很純粹，它只是一個(gè)編譯器。
大多數(shù)編譯器的工作過程可以分為三部分：
「Parse(解析)」：將源代碼轉(zhuǎn)換成更加抽象的表示方法（例如抽象語法樹） 「Transform(轉(zhuǎn)換)」：對（抽象語法樹）做一些特殊處理，讓它符合編譯器的期望 「Generate(代碼生成)」：將第二步經(jīng)過轉(zhuǎn)換過的（抽象語法樹）生成新的代碼
嗯... 既然 Babel 是一個(gè)編譯器，當(dāng)然它的工作過程也是這樣的。我們來仔細(xì)看看這三步分別做了什么事。當(dāng)然，還是拿上面的?來說明 const add = (a, b) => a + b，看看它是如何經(jīng)過 Babel 變成：
var add = function add(a, b) {
return a + b;
};
Parse（解析）
一般來說，Parse 階段可以細(xì)分為兩個(gè)階段：「詞法分析」（Lexical Analysis, LA）和「語法分析」（Syntactic Analysis, SA）。
詞法分析
詞法分析階段可以看成是對代碼進(jìn)行“分詞”，它接收一段源代碼，然后執(zhí)行一段 tokenize 函數(shù)，把代碼分割成被稱為Tokens 的東西。Tokens 是一個(gè)數(shù)組，由一些代碼的碎片組成，比如數(shù)字、標(biāo)點(diǎn)符號、運(yùn)算符號等等等等，例如這樣：
[
{ "type": "Keyword", "value": "const" },
{ "type": "Identifier", "value": "add" },
{ "type": "Punctuator", "value": "=" },
{ "type": "Punctuator", "value": "(" },
{ "type": "Identifier", "value": "a" },
{ "type": "Punctuator", "value": "," },
{ "type": "Identifier", "value": "b" },
{ "type": "Punctuator", "value": ")" },
{ "type": "Punctuator", "value": "=>" },
{ "type": "Identifier", "value": "a" },
{ "type": "Punctuator", "value": "+" },
{ "type": "Identifier", "value": "b" }
]
通過 http://esprima.org/demo/parse.html 生成的。
看上去好像很容易啊，就是把一句完整的代碼拆成一個(gè)個(gè)獨(dú)立個(gè)體就好了。但是，我們得讓機(jī)器知道怎么拆~
我們來試著實(shí)現(xiàn)一下 tokenize 函數(shù)：
/**
* 詞法分析 tokenize
* @param {string} code JavaScript 代碼
* @return {Array} token
*/
function tokenize(code) {
if (!code || code.length === 0) {
return [];
}
var current = 0; // 記錄位置
var tokens = []; // 定義一個(gè)空的 token 數(shù)組
var LETTERS = /[a-zA-Z\$\_]/i;
var KEYWORDS = /const/; // 模擬一下判斷是不是關(guān)鍵字
var WHITESPACE = /\s/;
var PARENS = /\(|\)/;
var NUMBERS = /[0-9]/;
var OPERATORS = /[+*/-]/;
var PUNCTUATORS = /[~!@#$%^&*()/\|,.<>?"';:_+-=\[\]{}]/;
// 從第一個(gè)字符開始遍歷
while (current < code.length) {
var char = code[current];
// 判斷空格
if (WHITESPACE.test(char)) {
current++;
continue;
}
// 判斷連續(xù)字符
if (LETTERS.test(char)) {
var value = '';
var type = 'Identifier';
while (char && LETTERS.test(char)) {
value += char;
char = code[++current];
}
// 判斷是否是關(guān)鍵字
if (KEYWORDS.test(value)) {
type = 'Keyword'
}
tokens.push({
type: type,
value: value
});
continue;
}
// 判斷小括號
if (PARENS.test(char)) {
tokens.push({
type: 'Paren',
value: char
});
current++;
continue;
}
// 判斷連續(xù)數(shù)字
if (NUMBERS.test(char)) {
var value = '';
while (char && NUMBERS.test(char)) {
value += char;
char = code[++current];
}
tokens.push({
type: 'Number',
value: value
});
continue;
}
// 判斷運(yùn)算符
if (OPERATORS.test(char)) {
tokens.push({
type: 'Operator',
value: char
});
current++;
continue;
}
// 判斷箭頭函數(shù)
if (PUNCTUATORS.test(char)) {
var value = char;
var type = 'Punctuator';
var temp = code[++current];
if (temp === '>') {
type = 'ArrowFunction';
value += temp;
current ++;
}
tokens.push({
type: type,
value: value
});
continue;
}
tokens.push({
type: 'Identifier',
value: char
});
current++;
}
return tokens;
}
上面這個(gè) tokenize 函數(shù)只是自己實(shí)現(xiàn)一下，與實(shí)際上 Babel 的實(shí)現(xiàn)方式還是差不少的，如果感興趣可以看看https://github.com/babel/babel/blob/master/packages/babel-parser/src/tokenizer
我們來測試一下：
const tokens = tokenize('const add = (a, b) => a + b')；
console.log(tokens);
[
{ "type": "Keyword", "value": "const" },
{ "type": "Identifier", "value": "add" },
{ "type": "Punctuator", "value": "=" },
{ "type": "Paren", "value": "(" },
{ "type": "Identifier", "value": "a" },
{ "type": "Punctuator", "value": "," },
{ "type": "Identifier", "value": "b" },
{ "type": "Paren", "value": ")" },
{ "type": "ArrowFunction", "value": "=>" },
{ "type": "Identifier", "value": "a" },
{ "type": "Operator", "value": "+" },
{ "type": "Identifier", "value": "b" }
]
看上去和上面的有點(diǎn)不太一樣，沒關(guān)系，我只是細(xì)化了一下類別，意思就是這么個(gè)意思。
語法分析
「詞法分析」之后，代碼就已經(jīng)變成了一個(gè) Tokens 數(shù)組了，現(xiàn)在需要通過「語法分析」把 Tokens 轉(zhuǎn)化為上面提到過的 AST。
說來慚愧，這里沒有想到很好的思路來實(shí)現(xiàn)一個(gè) parse 函數(shù)。如果哪天想到了，再補(bǔ)充上來。
現(xiàn)在我們先假設(shè)已經(jīng)實(shí)現(xiàn)了這樣一個(gè)函數(shù)，把上面的 Tokens 轉(zhuǎn)化成了一個(gè) AST，進(jìn)入下一步。
如果感興趣可以看看官方的做法https://github.com/babel/babel/tree/master/packages/babel-parser/src/parser
Transform(轉(zhuǎn)換)
這一步做的事情也很簡單，就是操作 AST。如果忘記了 AST 是什么，可以回到上面再看看。
我們可以看到 AST 中有很多相似的元素，它們都有一個(gè) type 屬性，這樣的元素被稱作「節(jié)點(diǎn)」。一個(gè)節(jié)點(diǎn)通常含有若干屬性，可以用于描述 AST 的部分信息。
比如這是一個(gè)最常見的 Identifier 節(jié)點(diǎn)：
{
type: 'Identifier',
name: 'add'
}
表示這是一個(gè)標(biāo)識符。
所以，操作 AST 也就是操作其中的節(jié)點(diǎn)，可以增刪改這些節(jié)點(diǎn)，從而轉(zhuǎn)換成實(shí)際需要的 AST。
更多的節(jié)點(diǎn)規(guī)范可以在https://github.com/estree/estree中查看。
Babel 對于 AST 的遍歷是深度優(yōu)先遍歷，對于 AST 上的每一個(gè)分支 Babel 都會先向下遍歷走到盡頭，然后再向上遍歷退出剛遍歷過的節(jié)點(diǎn)，然后尋找下一個(gè)分支。
還是上面的?：
{
"type": "Program",
"body": [
{
"type": "VariableDeclaration", // 變量聲明
"declarations": [ // 具體聲明
{
"type": "VariableDeclarator", // 變量聲明
"id": {
"type": "Identifier", // 標(biāo)識符（最基礎(chǔ)的）
"name": "add" // 函數(shù)名
},
"init": {
"type": "ArrowFunctionExpression", // 箭頭函數(shù)
"id": null,
"expression": true,
"generator": false,
"params": [ // 參數(shù)
{
"type": "Identifier",
"name": "a"
},
{
"type": "Identifier",
"name": "b"
}
],
"body": { // 函數(shù)體
"type": "BinaryExpression", // 二項(xiàng)式
"left": { // 二項(xiàng)式左邊
"type": "Identifier",
"name": "a"
},
"operator": "+", // 二項(xiàng)式運(yùn)算符
"right": { // 二項(xiàng)式右邊
"type": "Identifier",
"name": "b"
}
}
}
}
],
"kind": "const"
}
],
"sourceType": "module"
}
根節(jié)點(diǎn)我們就不說了，從 declarations 里開始遍歷：
聲明了一個(gè)變量，并且知道了它的內(nèi)部屬性（ id、init），然后我們再以此訪問每一個(gè)屬性以及它們的子節(jié)點(diǎn)。id是一個(gè)Idenrifier，有一個(gè)name屬性表示變量名。之后是 init，init也有好幾個(gè)內(nèi)部屬性：
type是ArrowFunctionExpression，表示這是一個(gè)箭頭函數(shù)表達(dá)式params是這個(gè)箭頭函數(shù)的入?yún)?，其中每一個(gè)參數(shù)都是一個(gè)Identifier類型的節(jié)點(diǎn)；body屬性是這個(gè)箭頭函數(shù)的主體，這是一個(gè)BinaryExpression二項(xiàng)式：left、operator、right，分別表示二項(xiàng)式的左邊變量、運(yùn)算符以及右邊變量。
這是遍歷 AST 的白話形式，再看看 Babel 是怎么做的：
Babel 會維護(hù)一個(gè)稱作 Visitor 的對象，這個(gè)對象定義了用于 AST 中獲取具體節(jié)點(diǎn)的方法。
Visitor
一個(gè) Visitor 一般來說是這樣的：
var visitor = {
ArrowFunction() {
console.log('我是箭頭函數(shù)');
},
IfStatement() {
console.log('我是一個(gè)if語句');
},
CallExpression() {}
};
當(dāng)我們遍歷 AST 的時(shí)候，如果匹配上一個(gè) type，就會調(diào)用 visitor 里的方法。
這只是一個(gè)簡單的 Visitor。
上面說過，Babel 遍歷 AST 其實(shí)會經(jīng)過兩次節(jié)點(diǎn)：遍歷的時(shí)候和退出的時(shí)候，所以實(shí)際上 Babel 中的 Visitor 應(yīng)該是這樣的：
var visitor = {
Identifier: {
enter() {
console.log('Identifier enter');
},
exit() {
console.log('Identifier exit');
}
}
};
比如我們拿這個(gè) visitor 來遍歷這樣一個(gè) AST：
params: [ // 參數(shù)
{
"type": "Identifier",
"name": "a"
},
{
"type": "Identifier",
"name": "b"
}
]
過程可能是這樣的...
進(jìn)入 Identifier(params[0])走到盡頭 退出 Identifier(params[0])進(jìn)入 Identifier(params[1])走到盡頭 退出 Identifier(params[1])
當(dāng)然，Babel 中的 Visitor 模式遠(yuǎn)遠(yuǎn)比這復(fù)雜...
回到上面的?，箭頭函數(shù)是 ES5 不支持的語法，所以 Babel 得把它轉(zhuǎn)換成普通函數(shù)，一層層遍歷下去，找到了 ArrowFunctionExpression 節(jié)點(diǎn)，這時(shí)候就需要把它替換成 FunctionDeclaration 節(jié)點(diǎn)。所以，箭頭函數(shù)可能是這樣處理的：
import * as t from "@babel/types";
var visitor = {
ArrowFunction(path) {
path.replaceWith(t.FunctionDeclaration(id, params, body));
}
};
對細(xì)節(jié)感興趣的可以翻翻源碼https://github.com/babel/babel/tree/master/packages/babel-traverse。
Generate(代碼生成)
經(jīng)過上面兩個(gè)階段，需要轉(zhuǎn)譯的代碼已經(jīng)經(jīng)過轉(zhuǎn)換，生成新的 AST 了，最后一個(gè)階段理所應(yīng)當(dāng)就是根據(jù)這個(gè) AST 來輸出代碼。
Babel 是通過 https://github.com/babel/babel/tree/master/packages/babel-generator 來完成的。當(dāng)然，也是深度優(yōu)先遍歷。
class Generator extends Printer {
constructor(ast, opts = {}, code) {
const format = normalizeOptions(code, opts);
const map = opts.sourceMaps ? new SourceMap(opts, code) : null;
super(format, map);
this.ast = ast;
}
ast: Object;
generate() {
return super.generate(this.ast);
}
}
經(jīng)過這三個(gè)階段，代碼就被 Babel 轉(zhuǎn)譯成功了。
任重而道遠(yuǎn)...?
，想真正掌握 Babel 還有很長的路...
參考鏈接
Babel:https://babel.docschina.org/ Babel是如何讀懂JS代碼的: https://zhuanlan.zhihu.com/p/27289600 the super tiny compiler: https://github.com/jamiebuilds/the-super-tiny-compiler Babel 插件手冊: https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md#toc-stages-of-babel 理解 Babel 插件: http://taobaofed.org/blog/2016/09/30/babel-plugins/
交流討論
如果你喜歡探討技術(shù)，或者對本文有任何的意見或建議，非常歡迎加魚頭微信好友一起探討，當(dāng)然，魚頭也非常希望能跟你一起聊生活，聊愛好，談天說地。魚頭的微信號是：krisChans95 也可以掃碼關(guān)注公眾號，訂閱更多精彩內(nèi)容。