> 作者：商見曜
>
> 來源：[恆生LIGHT雲社群](https://developer.hs.net/thread/1799)

作為現代前端專案必備的一種技術，Babel 是一個編譯器，用於將前沿的 JS 語法轉換為瀏覽器支援的語法。接下來就讓我們一起深入學習一下吧。

### Babel 的介紹

Babel 指的是“巴別塔”，出自聖經典故：

當時的人類只說一種語言，聯合起來無所不能，要建立一座通向天堂的塔，上帝害怕了，為了分化他們，於是就讓人類說不同的語言，人類因此失去了這種力量，分化了。而這座塔就是巴別塔。
![](http://img.blog.itpub.net/blog/2021/12/29/fd09dac039ef2d3b.png?x-oss-process=style/bb)

### Babel 的用途

- 轉譯 esnext，typescript，flow 等到目標環境支援的 js
  這是最常用的功能，用來吧程式碼中的 esnext 的語法，ts 和 flow 的語法轉為基於目標環境支援的語法的實現。並且可以吧目標環境不支援的 api 進行 polyfill
- 自由自在的編譯器
  它暴露了很多的 api，想對原始碼進行怎麼轉譯都行
- 程式碼的靜態分析
  對程式碼進行 parse 之後，能夠進行轉換，是因為透過 AST 的結構能夠理解程式碼，在轉換之前生成目的碼之外，也可以用於分析程式碼的資訊，進行檢查。比如 linter，api 文件自動生成工具透過提取註釋生成文件等。

### Babel 的轉譯流程

Babel 是 source to source 的轉換，整體轉譯過程分為三步：
![](http://img.blog.itpub.net/blog/2021/12/29/5a4b969617fea634.png?x-oss-process=style/bb)

1. parse： 透過 parser 將原始碼轉換為抽象語法樹 (AST)
2. transform：遍歷 AST，呼叫各種 transform 外掛對 AST 進行增刪查改
3. generate: 把轉換後的 AST 列印成目的碼，並生成 sourcemap

為什麼是三步而不是一步呢？因為原始碼太亂了，沒有統一的格式，直接 source to source 不現實，於是就加一層 AST，將原始碼中混亂的、無意義的部分去掉，這樣對 AST 操作就能統一起來了。於是一步就變成了三步。(~~經典中介軟體思維了~~)

簡單分析一下這三步
**parse**

前面已經說過 parse 是將原始碼轉換為統一格式的 AST，這個過程是一個詞法分析、語法分析的過程；

比如 let name = 'shangjianyao'; 這樣一段程式碼，parse 先把它分成一個個不能細分的單詞（術語叫 token），得到 let,name,=,'shangjianyao'，這個過程叫詞法分析，按照單詞的構成規則拆分原始碼。

之後要把 token 進行遞迴的組裝，生產 AST，這個過程是語法分析，按照不同的語法規則，把一組單片語合成物件。
也就是說先拆了，再按照新規則組裝。

**transform**

transform 階段對 parse 生成的 AST 進行處理：對 AST 進行深度優先遍歷，遍歷的過程中處理不同的 AST 節點會呼叫註冊的相應的 vistor 函式（來源於外掛），vistor 函式里可以對 AST 節點進行增刪改，返回新的節點。**這一步是邏輯處理的核心和多變的關鍵**

**generate**

這個階段會把 AST 列印成目標字串，並且會生成 sourcemap。不同的 AST 對應不同結構的字串。而 sourcemap 記錄了從原始碼到目的碼的轉換關係，透過它可以找到目的碼中每個節點對應的原始碼位置。

### 好好聊聊 AST

AST （Abstract Syntax Tree）抽象語法樹是整個轉譯流程的核心，它是一個樹狀結構，有不同型別的節點，基本對應了 JS 語法裡的資料型別和語法，我們分別瞭解一下：

**Literal**
Literal 字面量，比如 let name = 'shangjianyao' 中，shangjianyao 就是一個字串字面量 StringLiteral，相應的還有數字字面量 NumericLiteral，布林字面量 BooleanLiteral，null 字面量 NullLiteral，undefined 字面量 UndefinedLiteral，這些都是 Literal，規則就是這樣的 --xxLiteral。

**Identifier**
也即是識別符號的意思，變數名、屬性名、引數名等各種宣告和引用的名字，都是 Ientifer。（js 裡的識別符號規則是？Identifer 就是這個識別規則）

試試看，下面這段程式碼裡有多少 identifier？

```js
let name = 'shangjianyao';
function sayHello(name) {
  console.log('hello ' + name);
}
```

圖裡標紅色下劃線的都是 identifier：
![](http://img.blog.itpub.net/blog/2021/12/29/2a90e7dc4f8205e0.png?x-oss-process=style/bb)

**Statement**
statement 是語句，它是可以獨立執行的單位，比如包含了一些保留字或者關鍵詞比如 break、continue、return，或者流程控制 if、for、while 等，還有宣告語句、表示式語句，這些都是 statement。一般來說，我們寫的每一條可以獨立執行的程式碼都是語句。
下面是一些常見的語句，每一行是一個 statement：

```js
break;
continue;
return;
debugger;
throw Error();
{}
try {} catch (e) {} finally {}
for (;;) {}
while (true) {}
do {} while (true);
switch (x) { case 1: break; default: ;}
console.log();
with (x) {}
```

stament 的名字組合也是和 literal 的規則相似，都是 xxStatement，比如 break 對應 BreakStament。

![](http://img.blog.itpub.net/blog/2021/12/29/93c4e23361b22530.png?x-oss-process=style/bb)

**Declaration**

宣告語句，是一種特殊的語句，它執行的邏輯是在作用域裡宣告一個變數、函式、class，import、export 等。
比如：

```js
const name = 'shangjianyao';
function sayHello(name) {}
class Person {}

import {name} from './name';

export {name};
export default name;
export * from './name';
```

對應 DeclarationStatement，比如：
![](http://img.blog.itpub.net/blog/2021/12/29/f6c08089d34cefbc.png?x-oss-process=style/bb)
**Expression**

expression 是表示式，特點是執行完以後有返回值，這是和語句（statement）的區別。
常見表示式有：

```js
[1,2,3];
name = 'shangjianyao';
1+1;
-1;
function (){}
() => {}
class {}
name;
this;
super;
a::b;
```

對應的 expression 是 xxExpression，比如：
![](http://img.blog.itpub.net/blog/2021/12/29/83c3c6ef5852da68.png?x-oss-process=style/bb)
對於上面的表示式裡面，怎麼混入了 identifier？因為 identifier 會返回值，所以他也是 expression。有些表示式不能單獨執行比如匿名函式表示式和匿名 class 表示式，需要和其他部分組成一個 statement。表示式在被 parse 時會包裹一層 ExpressionStatement，標識這個表示式是被當成語句執行的。
![](http://img.blog.itpub.net/blog/2021/12/29/fd225da084bf5c3f.png?x-oss-process=style/bb)

**Class**

作為重要語法糖，class 也有專門的 AST 節點標識。

整個 class 的內容是 ClassBody，屬性是 ClassProperty，方法是 MethodDefinition，透過 MethodDefinition 欄位來區分建構函式和普通方法。
比如下面這段程式碼：

```js
class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log('hello ' + this.name);
  }
}
```

對應的 AST
![](http://img.blog.itpub.net/blog/2021/12/29/03b2f939b9976877.png?x-oss-process=style/bb)
**Modules**
es module 是語法級別的模組規範，所以也有專門的 AST 節點。

```js
// name import
import {name} from './name';
// default import
import name from './name';
// namespace import
import * as name from './name';
```

對應的 AST
![](http://img.blog.itpub.net/blog/2021/12/29/846875540d6fa9a2.png?x-oss-process=style/bb)

有不同的語法就有不同的 importDeclaration 節點，透過 specifiers 欄位來區分 import 的型別，分別對應為 importSpecifier、importDefaultSpecifier、importNamespaceSpecifier。

```js
// name export
export { name };
// default export
export default name;
// all export
export * from './name';
```

對應的 AST
![](http://img.blog.itpub.net/blog/2021/12/29/182073347e597755.png?x-oss-process=style/bb)
分別對應 ExportNameDeclaration、ExportDefaultDeclaration、ExportAllDeclaration。只有 ExportNameDeclaration 才有 specifiers 欄位。

**Program & Directive**

program 是代表整個程式的節點，他有一個 body 欄位，是一個陣列，裡面存放了所有的 statement，執行語句的集合。directives 屬性存放 Directive 節點，比如 use strict。
Program 是包裹具體執行語句的節點，而 Directive 則是程式碼中的指令。

**File & Comment**

Babel 的 AST 最外層節點是 File，它有 program、comments、tokens 等屬性，分別存放 Program 程式體、註釋、token 等，是最外層的節點。註釋分為塊註釋（/**/) 和行註釋（//）。

**公共屬性**
每種節點都有自己的屬性用來標識身份，自然地，也需要一些公共屬性去構建和維持 AST，比如：

- type： AST 節點的型別
- start、end、loc：start 和 end 代表該節點對應的原始碼字串的起始和結束下標，不區分行列。loc 是一個物件，有 line 和 column 屬性分別記錄開始和結束行列號。
- leadingComments,innerComments,trailingComments：leadingComments、innerComments、trailingComments 分別存放前面註釋，中間註釋，後面註釋。
- extra: 存放一些額外的資訊，比如 StringLiteral 修改 value 只是值的修改，而修改 extra.raw 則可以連同單雙引號一起修改。

#### AST 視覺化檢視工具

我們不需要記住上面的這些太多，需要的時候到視覺化的 AST 裡檢視即可。
![](http://img.blog.itpub.net/blog/2021/12/29/94e3d569f2e7a717.png?x-oss-process=style/bb)
或者查閱 Babel parser 倉庫的 AST。
或者檢視 @Babel/types 的 typescript 型別定義

## 小結

本文簡單介紹了一下 Babel 的用途：將超前語法轉譯為相容語法。
介紹了 Babel 的轉譯過程：`source code -> AST -> transformed AST -> code + sourcemap`
介紹了 AST 是如何抽象原始碼的：利用各種節點來描述原始碼。比如識別符號 Identifier，表示式 xxExpression，語句 xxStatement，宣告語句 xxDeclaration, 字面量 xxLiteral,class,modules,file,Program,Directicve,Comment 等等。瞭解有哪些節點就知道怎麼用 AST 標識原始碼了，當然也不需要記，用（astexpoler.net）進行視覺化的檢視更加理想。
下一節，我們將會學習 Babel 的 api，以及進行一次簡單的實戰，下期再見。✈️

***

想向技術大佬們多多取經？開發中遇到的問題何處探討？如何獲取金融科技海量資源？

[恆生LIGHT雲社群](https://developer.hs.net/)，由恆生電子搭建的金融科技專業社群平臺，分享實用技術乾貨、資源資料、金融科技行業趨勢，擁抱所有金融開發者。

掃描下方小程式二維碼，加入我們！

![](https://developer.hs.net/storage/attachments/2021/12/20/vzjJlveZdvxcz6rUjIBaPMbRK36iL8jCjtMU5h97.png)

Babel 學習日記（0）

相關文章