看了就懂的 AST 和 Babel 工做流程

時間  2020-11-29
標籤 html 前端 git github web 面試 express 數組 瀏覽器 微信 欄目 HTML 简体版
原文   原文鏈接

前言

本文寫於 2019 年，若有不對之處歡迎指出。
html

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

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

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

這篇文章是一個 Babel 的入門文章，但願可以用淺顯易懂的語言讓不懂 Babel 的人再也不恐懼。web

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+ 的代碼，使它在舊的瀏覽器或者環境中也可以運行。express

咱們能夠在 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 的功能很純粹。咱們傳遞一段源代碼給 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：https://ASTexplorer.net
  • AST 規範：https://github.com/estree/estree

Babel 工做過程

瞭解了 AST 是什麼樣的，就能夠開始研究 Babel 的工做過程了。

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

大多數編譯器的工做過程能夠分爲三部分：

  1. 「Parse(解析)」：將源代碼轉換成更加抽象的表示方法（例如抽象語法樹）
  2. 「Transform(轉換)」：對（抽象語法樹）作一些特殊處理，讓它符合編譯器的指望
  3. 「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 裏開始遍歷：

  1. 聲明瞭一個變量，而且知道了它的內部屬性（ id、 init），而後咱們再以此訪問每個屬性以及它們的子節點。
  2. id 是一個 Idenrifier，有一個 name 屬性表示變量名。
  3. 以後是 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: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/

交流討論

歡迎關注公衆號「前端試煉」，公衆號平時會分享一些實用或者有意思的東西，發現代碼之美。專一深度和最佳實踐，但願打造一個高質量的公衆號。

公衆號後臺回覆「加羣」，拉你進交流面試羣。

若是你不想加羣，只是想加我也是能夠的。

若是以爲這篇文章還不錯，來個【分享、點贊、在看】三連吧，讓更多的人也看到~

本文分享自微信公衆號 - 前端試煉（code-photo）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程