初學 Babel 作業原理-有解無憂

前言

babel

Babel 對于前端開發者來說應該是很熟悉了，日常開發中基本上是離不開它的，

已經 9102 了，我們已經能夠熟練地使用 es2015+ 的語法，但是對于瀏覽器來說，可能和它們還不夠熟悉，我們得讓瀏覽器理解它們，這就需要 Babel，

當然，僅僅是 Babel 是不夠的，還需要 polyfill 等等等等，這里就先不說了，

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 能夠轉譯 ECMAScript 2015+ 的代碼，使它在舊的瀏覽器或者環境中也能夠運行，

我們可以在 https://babel.docschina.org/repl 嘗試一下，

一個小 ??：

// es2015 的 const 和 arrow function
const add = (a, b) => a + b;

// Babel 轉譯后
var add = function add(a, b) {
  return a + b;
};

babel-try

Babel 的功能很純粹，我們傳遞一段源代碼給 Babel，然后它回傳一串新的代碼給我們，就是這么簡單，它不會運行我們的代碼，也不會去打包我們的代碼，

它只是一個編譯器，

How: Babel 是如何作業的

首先得要先了解一個概念：抽象語法樹（Abstract Syntax Tree, AST），Babel 本質上就是在操作 AST 來完成代碼的轉譯，

AST

AST 是什么這里就不細說了，想要了解更多資訊可以查看 Abstract syntax tree - Wikipedia，

這里比較關心的一段 JavaScript 代碼會生成一個怎樣的 AST，Babel 又是怎么去操作 AST 的，

我們還是拿上面的 ?? 來說明 const add = (a, b) => a + b;，這樣一句簡單的代碼，我們來看看它生成的 AST 會是怎樣的：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration", // 變數宣告
      "declarations": [
        // 具體宣告
        {
          "type": "VariableDeclarator", // 變數宣告
          "id": {
            "type": "Identifier", // 識別符號（最基礎的）
            "name": "add" // 函式名
          },
          "init": {
            "type": "ArrowFunctionExpression", // 箭頭函式
            "id": null,
            "expression": true,
            "generator": false,
            "params": [
              // 引數
              {
                "type": "Identifier",
                "name": "a"
              },
              {
                "type": "Identifier",
                "name": "b"
              }
            ],
            "body": {
              // 函式體
              "type": "BinaryExpression", // 二項式
              "left": {
                // 二項式左邊
                "type": "Identifier",
                "name": "a"
              },
              "operator": "+", // 二項式運算子
              "right": {
                // 二項式右邊
                "type": "Identifier",
                "name": "b"
              }
            }
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}

我們可以通過一棵“樹”來更為直觀地展示這句代碼的 AST(從第二層的 declarations 開始)：

ast-demo

一個 AST 的根節點始終都是 Program，上面的例子我們從 declarations 開始往下讀：

一個VariableDeclaration(變數宣告)：宣告了一個 name 為 add 的ArrowFunctionExpression(箭頭函式)：

params(函式入參)：a 和 b
函式體：函式主體是一個BinaryExpression(二項式)，一個標準的二項式分為三部分：
- left(左邊)：a
- operator(運算子)：加號 +
- right(右邊)：b

這樣就拆解了這一行代碼，

如果想要了解更多，可以閱讀和嘗試：

分析 AST：https://ASTexplorer.net
AST 規范：https://github.com/estree/estree

Babel 作業程序

了解了 AST 是什么樣的，就可以開始研究 Babel 的作業程序了，

上面說過，Babel 的功能很純粹，它只是一個編譯器，

大多數編譯器的作業程序可以分為三部分：

Parse(決議)：將源代碼轉換成更加抽象的表示方法（例如抽象語法樹）
Transform(轉換)：對（抽象語法樹）做一些特殊處理，讓它符合編譯器的期望
Generate(代碼生成)：將第二步經過轉換過的（抽象語法樹）生成新的代碼

嗯... 既然 Babel 是一個編譯器，當然它的作業程序也是這樣的，我們來仔細看看這三步分別做了什么事，當然，還是拿上面的 ?? 來說明 const add = (a, b) => a + b，看看它是如何經過 Babel 變成：

var add = function add(a, b) {
  return a + b;
};

Parse（決議）

一般來說，Parse 階段可以細分為兩個階段：詞法分析（Lexical Analysis, LA）和語法分析（Syntactic Analysis, SA），

詞法分析

詞法分析階段可以看成是對代碼進行“分詞”，它接收一段源代碼，然后執行一段 tokenize 函式，把代碼分割成被稱為Tokens 的東西，Tokens 是一個陣列，由一些代碼的碎片組成，比如數字、標點符號、運算子號等等等等，例如這樣：

[
  { "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 生成的，

看上去好像很容易啊，就是把一句完整的代碼拆成一個個獨立個體就好了，但是，我們得讓機器知道怎么拆~

我們來試著實作一下 tokenize 函式：

/**
 * 詞法分析 tokenize
 * @param {string} code JavaScript 代碼
 * @return {Array} token
 */
function tokenize(code) {
  if (!code || code.length === 0) {
    return [];
  }
  var current = 0; // 記錄位置
  var tokens = []; // 定義一個空的 token 陣列

  var LETTERS = /[a-zA-Z\$\_]/i;
  var KEYWORDS = /const/; //  模擬一下判斷是不是關鍵字
  var WHITESPACE = /\s/;
  var PARENS = /\(|\)/;
  var NUMBERS = /[0-9]/;
  var OPERATORS = /[+*/-]/;
  var PUNCTUATORS = /[~!@#$%^&*()/\|,.<>?"';:_+-=\[\]{}]/;

  // 從第一個字符開始遍歷
  while (current < code.length) {
    var char = code[current];
    // 判斷空格
    if (WHITESPACE.test(char)) {
      current++;
      continue;
    }
    // 判斷連續字符
    if (LETTERS.test(char)) {
      var valuehttps://www.cnblogs.com/axuebin/archive/2021/04/15/= '';
      var type = 'Identifier';
      while (char && LETTERS.test(char)) {
        value += char;
        char = code[++current];
      }
      // 判斷是否是關鍵字
      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;
    }
    // 判斷連續數字
    if (NUMBERS.test(char)) {
      var valuehttps://www.cnblogs.com/axuebin/archive/2021/04/15/= '';
      while (char && NUMBERS.test(char)) {
        value += char;
        char = code[++current];
      }
      tokens.push({
        type: 'Number',
        value: value,
      });
      continue;
    }
    // 判斷運算子
    if (OPERATORS.test(char)) {
      tokens.push({
        type: 'Operator',
        value: char,
      });
      current++;
      continue;
    }
    // 判斷箭頭函式
    if (PUNCTUATORS.test(char)) {
      var value = https://www.cnblogs.com/axuebin/archive/2021/04/15/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;
}

上面這個 tokenize 函式只是自己實作以下，與實際上 Babel 的實作方式還是差不少的，如果感興趣可以看看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" }
]

看上去和上面的有點不太一樣，沒關系，我只是細化了一下類別，意思就是這么個意思，

語法分析

詞法分析之后，代碼就已經變成了一個 Tokens 陣列了，現在需要通過語法分析把 Tokens 轉化為上面提到過的 AST，

說來慚愧，這里沒有想到很好的思路來實作一個 parse 函式，如果哪天想到了，再補充上來，

現在我們先假設已經實作了這樣一個函式，把上面的 Tokens 轉化成了一個 AST，進入下一步，

如果感興趣可以看看官方的做法https://github.com/babel/babel/tree/master/packages/babel-parser/src/parser

Transform(轉換)

這一步做的事情也很簡單，就是操作 AST，如果忘記了 AST 是什么，可以回到上面再看看，

我們可以看到 AST 中有很多相似的元素，它們都有一個 type 屬性，這樣的元素被稱作節點，一個節點通常含有若干屬性，可以用于描述 AST 的部分資訊，

比如這是一個最常見的 Identifier 節點：

{
  "type": "Identifier",
  "name": "add"
}

表示這是一個識別符號，

所以，操作 AST 也就是操作其中的節點，可以增刪改這些節點，從而轉換成實際需要的 AST，

更多的節點規范可以在https://github.com/estree/estree中查看，

Babel 對于 AST 的遍歷是深度優先遍歷，對于 AST 上的每一個分支 Babel 都會先向下遍歷走到盡頭，然后再向上遍歷退出剛遍歷過的節點，然后尋找下一個分支，

還是上面的 ??：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration", // 變數宣告
      "declarations": [
        // 具體宣告
        {
          "type": "VariableDeclarator", // 變數宣告
          "id": {
            "type": "Identifier", // 識別符號（最基礎的）
            "name": "add" // 函式名
          },
          "init": {
            "type": "ArrowFunctionExpression", // 箭頭函式
            "id": null,
            "expression": true,
            "generator": false,
            "params": [
              // 引數
              {
                "type": "Identifier",
                "name": "a"
              },
              {
                "type": "Identifier",
                "name": "b"
              }
            ],
            "body": {
              // 函式體
              "type": "BinaryExpression", // 二項式
              "left": {
                // 二項式左邊
                "type": "Identifier",
                "name": "a"
              },
              "operator": "+", // 二項式運算子
              "right": {
                // 二項式右邊
                "type": "Identifier",
                "name": "b"
              }
            }
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}

根節點我們就不說了，從 declarations 里開始遍歷：

宣告了一個變數，并且知道了它的內部屬性（id、init），然后我們再以此訪問每一個屬性以及它們的子節點，
id 是一個 Idenrifier，有一個 name 屬性表示變數名，
之后是 init，init 也有好幾個內部屬性：

type 是ArrowFunctionExpression，表示這是一個箭頭函式運算式
params 是這個箭頭函式的入參，其中每一個引數都是一個 Identifier 型別的節點；
body 屬性是這個箭頭函式的主體，這是一個 BinaryExpression 二項式：left、operator、right，分別表示二項式的左邊變數、運算子以及右邊變數，

這是遍歷 AST 的白話形式，再看看 Babel 是怎么做的：

Babel 會維護一個稱作 Visitor 的物件，這個物件定義了用于 AST 中獲取具體節點的方法，

Visitor

一個 Visitor 一般來說是這樣的：

var visitor = {
  ArrowFunction() {
    console.log('我是箭頭函式');
  },
  IfStatement() {
    console.log('我是一個if陳述句');
  },
  CallExpression() {},
};

當我們遍歷 AST 的時候，如果匹配上一個 type，就會呼叫 visitor 里的方法，

這只是一個簡單的 Visitor，

上面說過，Babel 遍歷 AST 其實會經過兩次節點：遍歷的時候和退出的時候，所以實際上 Babel 中的 Visitor 應該是這樣的：

var visitor = {
  Identifier: {
    enter() {
      console.log('Identifier enter');
    },
    exit() {
      console.log('Identifier exit');
    },
  },
};

比如我們拿這個 visitor 來遍歷這樣一個 AST：

{
  "params": [
    // 引數
    {
      "type": "Identifier",
      "name": "a"
    },
    {
      "type": "Identifier",
      "name": "b"
    }
  ]
}

程序可能是這樣的...

進入 Identifier(params[0])
走到盡頭
退出 Identifier(params[0])
進入 Identifier(params[1])
走到盡頭
退出 Identifier(params[1])

當然，Babel 中的 Visitor 模式遠遠比這復雜...

回到上面的 ??，箭頭函式是 ES5 不支持的語法，所以 Babel 得把它轉換成普通函式，一層層遍歷下去，找到了 ArrowFunctionExpression 節點，這時候就需要把它替換成 FunctionDeclaration 節點，所以，箭頭函式可能是這樣處理的：

import * as t from '@babel/types';

var visitor = {
  ArrowFunction(path) {
    path.replaceWith(t.FunctionDeclaration(id, params, body));
  },
};

對細節感興趣的可以翻翻原始碼https://github.com/babel/babel/tree/master/packages/babel-traverse，

Generate(代碼生成)

經過上面兩個階段，需要轉譯的代碼已經經過轉換，生成新的 AST 了，最后一個階段理所應當就是根據這個 AST 來輸出代碼，

Babel 是通過 https://github.com/babel/babel/tree/master/packages/babel-generator 來完成的，當然，也是深度優先遍歷，

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);
  }
}

經過這三個階段，代碼就被 Babel 轉譯成功了，

任重而道遠... 想真正掌握 Babel 還有很長的路...

參考鏈接

Babel
Babel 是如何讀懂 JS 代碼的
the super tiny compiler
Babel 插件手冊
理解 Babel 插件

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/276608.html

標籤：其他

上一篇：如何解決在執行gulp任務中出現的錯誤ReferenceError: primordials is not defined

下一篇：KINME與share point

初學 Babel 作業原理

前言

What：什么是 Babel