初學 Babel 工做原理

時間 2019-12-07

標籤初學 babel 原理简体版

原文原文鏈接

原文連接：初學 Babel 工做原理html

前言

Babel 對於前端開發者來講應該是很熟悉了，平常開發中基本上是離不開它的。前端

已經9102了，咱們已經可以熟練地使用 es2015+ 的語法。可是對於瀏覽器來講，可能和它們還不夠熟悉，咱們得讓瀏覽器理解它們，這就須要 Babel。git

固然，僅僅是 Babel 是不夠的，還須要 polyfill 等等等等，這裏就先不說了。github

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.express

簡單地說，Babel 可以轉譯 ECMAScript 2015+ 的代碼，使它在舊的瀏覽器或者環境中也可以運行。數組

咱們能夠在 babel.docschina.org/repl 嘗試一下。瀏覽器

一個小🌰：bash

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

// Babel 轉譯後
var add = function add(a, b) {
  return a + b;
};
複製代碼

Babel 的功能很純粹。咱們傳遞一段源代碼給 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 的根節點始終都是 Program，上面的例子咱們從 declarations 開始往下讀：

一個VariableDeclaration(變量聲明)：聲明瞭一個 name 爲 add 的ArrowFunctionExpression(箭頭函數)：

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

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

若是想要了解更多，能夠閱讀和嘗試：

分析 AST：ASTexplorer.net
AST 規範：github.com/estree/estr…

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" }
]
複製代碼

經過 esprima.org/demo/parse.… 生成的。

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

咱們來試着實現一下 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 的實現方式仍是差很多的，若是感興趣能夠看看github.com/babel/babel…

咱們來測試一下：

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，進入下一步。

若是感興趣能夠看看官方的作法github.com/babel/babel…

Transform(轉換)

這一步作的事情也很簡單，就是操做 AST。若是忘記了 AST 是什麼，能夠回到上面再看看。

咱們能夠看到 AST 中有不少類似的元素，它們都有一個 type 屬性，這樣的元素被稱做節點。一個節點一般含有若干屬性，能夠用於描述 AST 的部分信息。

好比這是一個最多見的 Identifier 節點：

{
    type: 'Identifier',
    name: 'add'
}
複製代碼

表示這是一個標識符。

因此，操做 AST 也就是操做其中的節點，能夠增刪改這些節點，從而轉換成實際須要的 AST。

更多的節點規範能夠在github.com/estree/estr…中查看。

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));
    }
};
複製代碼

對細節感興趣的能夠翻翻源碼github.com/babel/babel…。

Generate(代碼生成)

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

Babel 是經過 github.com/babel/babel… 來完成的。固然，也是深度優先遍歷。

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 還有很長的路...