初學 Babel 工作原理

本文轉載自查看原文 2021-04-15 15:59 1010 Babel/ JavaScript/ 前端工程化

原文鏈接：http://axuebin.com/articles/fe-solution/babel/first.html，轉載請聯系

前言

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 value = '';
      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 value = '';
      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 = 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 還有很長的路...

參考鏈接

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Babel 及其工作原理深入理解Babel原理及其使用 SpringMVC 工作原理詳解 SpringBean 工作原理詳解 kubelet工作原理 Alink工作原理 Canal工作原理閉包工作原理 1、cpu架構和工作原理系統棧的工作原理