初步認識 Babel

Babel 是怎麼工作的

Babel 是一個 JavaScript 編譯器。

做與不做

注意很重要的一點就是，Babel 只是轉譯新標準引入的語法，比如：

箭頭函數
let / const
解構

哪些在 Babel 範圍外？對於新標準引入的全局變量、部分原生對象新增的原型鏈上的方法，Babel 表示超綱了。

全局變量
- Promise
- Symbol
- WeakMap
- Set
includes
generator 函數

對於上面的這些 API，Babel 是不會轉譯的，需要引入 polyfill 來解決。

Babel 編譯的三個階段

Babel 的編譯過程和大多數其他語言的編譯器相似，可以分爲三個階段：

解析（Parsing）：將代碼字符串解析成抽象語法樹。
轉換（Transformation）：對抽象語法樹進行轉換操作。
生成（Code Generation）: 根據變換後的抽象語法樹再生成代碼字符串。

爲了理解 Babel，我們從最簡單一句 console 命令下手

解析（Parsing）

Babel 拿到源代碼會把代碼抽象出來，變成 AST （抽象語法樹），學過編譯原理的同學應該都聽過這個詞，全稱是 Abstract Syntax Tree。

抽象語法樹是源代碼的抽象語法結構的樹狀表示，樹上的每個節點都表示源代碼中的一種結構，只所以說是抽象的，是因爲抽象語法樹並不會表示出真實語法出現的每一個細節，比如說，嵌套括號被隱含在樹的結構中，並沒有以節點的形式呈現，它們主要用於源代碼的簡單轉換。

console.log('zcy')； 的 AST 長這樣：

{
  "type": "Program",
  "body": [
    {
      "type": "ExpressionStatement",
      "expression": {
        "type": "CallExpression",
        "callee": {
          "type": "MemberExpression",
          "computed": false,
          "object": {
            "type": "Identifier",
            "name": "console"
          },
          "property": {
            "type": "Identifier",
            "name": "log"
          }
        },
        "arguments": [
          {
          "type": "Literal",
          "value": "zcy",
          "raw": "'zcy'"
          }
        ]
      }
    }
  ],
  "sourceType": "script"
}
複製代碼

上面的 AST 描述了源代碼的每個部分以及它們之間的關係，可以自己在這裏試一下 astexplorer。

AST 是怎麼來的

整個解析過程分爲兩個步驟：

分詞：將整個代碼字符串分割成語法單元數組在線分詞工具。
語法分析：建立分析語法單元之間的關係

分詞

語法單元通俗點說就是代碼中的最小單元，不能再被分割，就像原子是化學變化中的最小粒子一樣。

Javascript 代碼中的語法單元主要包括以下這麼幾種：

關鍵字：const、 let、 var 等
標識符：可能是一個變量，也可能是 if、else 這些關鍵字，又或者是 true、false 這些常量
運算符
數字
空格
註釋：對於計算機來說，知道是這段代碼是註釋就行了，不關心其具體內容

其實分詞說白了就是簡單粗暴地對字符串一個個遍歷。爲了模擬分詞的過程，寫了一個簡單的 Demo，僅僅適用於和上面一樣的簡單代碼。Babel 的實現比這要複雜得多，但是思路大體上是相同的。對於一些好奇心比較強的同學，可以看下具體是怎麼實現的，鏈接在文章底部。

function tokenizer(input) {
  const tokens = [];
  const punctuators = [',', '.', '(', ')', '=', ';'];

  let current = 0;
  while (current < input.length) {

    let char = input[current];

    if (punctuators.indexOf(char) !== -1) {

      tokens.push({
        type: 'Punctuator',
        value: char,
      });
      current++;
      continue;
    }
    // 檢查空格，連續的空格放到一起
    let WHITESPACE = /\s/;
    if (WHITESPACE.test(char)) {
      current++;
      continue;
    }

    // 標識符是字母、$、_開始的
    if (/[a-zA-Z\$\_]/.test(char)) {
      let value = '';

      while(/[a-zA-Z0-9\$\_]/.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'Identifier', value });
      continue;
    }

    // 數字從0-9開始，不止一位
    const NUMBERS = /[0-9]/;
    if (NUMBERS.test(char)) {
      let value = '';
      while (NUMBERS.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'Numeric', value });
      continue;
    }

    // 處理字符串
    if (char === '"') {
      let value = '';
      char = input[++current];

      while (char !== '"') {
        value += char;
        char = input[++current];
      }

      char = input[++current];

      tokens.push({ type: 'String', value });

      continue;
    }
    // 最後遇到不認識到字符就拋個異常出來
    throw new TypeError('Unexpected charactor: ' + char);
  }

  return tokens;
}

const input = `console.log("zcy");`

console.log(tokenizer(input));
複製代碼

結果如下：

[ 
  { 
    "type" :  "Identifier" , 
    "value" :  "console"
   }, 
  { 
    "type" :  "Punctuator" , 
    "value" :  "."
   }, 
  { 
    "type" :  "Identifier" , 
    "value" :  "log"
   }, 
  { 
    "type" :  "Punctuator" , 
    "value" :  "("
   }, 
  { 
    "type" :  "String" ,
    "value" :  "'zcy'"
   }, 
  { 
    "type" : "Punctuator" , 
    "value" :  ")"
   }, 
  { 
    "type" :  "Punctuator" , 
    "value" :  ";"
   } 
]
複製代碼

####語法分析：建立分析語法單元之間的關係

語義分析則是將得到的詞彙進行一個立體的組合，確定詞語之間的關係。考慮到編程語言的各種從屬關係的複雜性，語義分析的過程又是在遍歷得到的語法單元組，相對而言就會變得更復雜。

簡單來說語法分析是對語句和表達式識別，這是個遞歸過程，在解析中，Babel 會在解析每個語句和表達式的過程中設置一個暫存器，用來暫存當前讀取到的語法單元，如果解析失敗，就會返回之前的暫存點，再按照另一種方式進行解析，如果解析成功，則將暫存點銷燬，不斷重複以上操作，直到最後生成對應的語法樹。

轉換（Transformation）

Plugins

插件應用於 babel 的轉譯過程，尤其是第二個階段 Transformation，如果這個階段不使用任何插件，那麼 babel 會原樣輸出代碼。

Presets

Babel 官方幫我們做了一些預設的插件集，稱之爲 Preset，這樣我們只需要使用對應的 Preset 就可以了。每年每個 Preset 只編譯當年批准的內容。而 babel-preset-env 相當於 ES2015 ，ES2016 ，ES2017 及最新版本。

Plugin/Preset 路徑

如果 Plugin 是通過 npm 安裝，可以傳入 Plugin 名字給 Babel，Babel 將檢查它是否安裝在 node_modules 中

"plugins": ["babel-plugin-myPlugin"]
複製代碼

也可以指定你的 Plugin/Preset 的相對或絕對路徑。

"plugins": ["./node_modules/asdf/plugin"]
複製代碼

Plugin/Preset 排序

如果兩次轉譯都訪問相同的節點，則轉譯將按照 Plugin 或 Preset 的規則進行排序然後執行。

Plugin 會運行在 Preset 之前。
Plugin 會從第一個開始順序執行。
Preset 的順序則剛好相反(從最後一個逆序執行)。

例如：

{
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}
複製代碼

將先執行 transform-decorators-legacy 再執行 transform-class-properties

但 preset 是反向的

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ]
}
複製代碼

會按以下順序運行: stage-2， react，最後 es2015。

那麼問題來了，如果 presets 和 plugins 同時存在，那執行順序又是怎樣的呢？答案是先執行 plugins 的配置，再執行 presets 的配置。

所以以下代碼的執行順序爲

@babel/plugin-proposal-decorators
@babel/plugin-proposal-class-properties
@babel/plugin-transform-runtime
@babel/preset-env

// .babelrc 文件
{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/plugin-transform-runtime",
  ]
}
複製代碼

生成（Code Generation）

用 babel-generator 通過 AST 樹生成 ES5 代碼。

如何編寫一個 `Babel` 插件

基礎的東西講了些，下面說下具體如何寫插件，只做簡單的介紹，感興趣的同學可以看 Babel 官方的介紹。Plugin Development

插件格式

先從一個接收了當前 Babel 對象作爲參數的 Function 開始。

export default function(babel) {
  // plugin contents
}
複製代碼

我們經常會這樣寫

export default function({ types: t }) {
    //
}
複製代碼

接着返回一個對象，其 visitor 屬性是這個插件的主要訪問者。

export default function({ types: t }) {
  return {
    visitor: {
      // visitor contents
    }
  };
};
複製代碼

visitor 中的每個函數接收 2 個參數：path 和 state

export default function({ types: t }) {
  return {
    visitor: {
      CallExpression(path, state) {}
    }
  };
};
複製代碼

寫一個簡單的插件

我們先寫一個簡單的插件，把所有定義變量名爲 a 的換成 b ，先從 astexplorer 看下 var a = 1 的 AST

{
  "type": "Program",
  "start": 0,
  "end": 10,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 9,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 4,
          "end": 9,
          "id": {
            "type": "Identifier",
            "start": 4,
            "end": 5,
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "start": 8,
            "end": 9,
            "value": 1,
            "raw": "1"
          }
        }
      ],
      "kind": "var"
    }
  ],
  "sourceType": "module"
}
複製代碼

從這裏看，要找的節點類型就是 VariableDeclarator ，下面開始擼代碼

export default function({ types: t }) {
  return {
    visitor: {
      VariableDeclarator(path, state) {
        if (path.node.id.name == 'a') {
          path.node.id = t.identifier('b')
        }
      }
    }
  }
}
複製代碼

我們要把 id 屬性是 a 的替換成 b 就好了。但是這裏不能直接 path.node.id.name = 'b' 。如果操作的是Object，就沒問題，但是這裏是 AST 語法樹，所以想改變某個值，就是用對應的 AST 來替換，現在我們用新的標識符來替換這個屬性。

最後測試一下

import * as babel from '@babel/core';
const c = `var a = 1`;

const { code } = babel.transform(c, {
  plugins: [
    function({ types: t }) {
      return {
        visitor: {
          VariableDeclarator(path, state) {
            if (path.node.id.name == 'a') {
              path.node.id = t.identifier('b')
            }
          }
        }
      }
    }
  ]
})

console.log(code); // var b = 1
複製代碼

實現一個簡單的按需打包功能

例如我們要實現把 import { Button } from 'antd' 轉成 import Button from 'antd/lib/button'

通過對比 AST 發現，specifiers 裏的 type 和 source 不同。

// import { Button } from 'antd'
"specifiers": [
    {
        "type": "ImportSpecifier",
        ...
    }
]
複製代碼

// import Button from 'antd/lib/button'
"specifiers": [
    {
        "type": "ImportDefaultSpecifier",
        ...
    }
]
複製代碼

import * as babel from '@babel/core';
const c = `import { Button } from 'antd'`;

const { code } = babel.transform(c, {
  plugins: [
    function({ types: t }) {
      return {
        visitor: {
          ImportDeclaration(path) {
            const { node: { specifiers, source } } = path;
            if (!t.isImportDefaultSpecifier(specifiers[0])) { // 對 specifiers 進行判斷，是否默認倒入
              const newImport = specifiers.map(specifier => (
                t.importDeclaration(
                  [t.ImportDefaultSpecifier(specifier.local)],
                  t.stringLiteral(`${source.value}/lib/${specifier.local.name}`)
                )
              ))
              path.replaceWithMultiple(newImport)
            }
          }
        }
      }
    }
  ]
})

console.log(code); // import Button from "antd/lib/Button";
複製代碼

當然 babel-plugin-import 這個插件是有配置項的，我們可以對代碼做以下更改

export default function({ types: t }) {
  return {
    visitor: {
      ImportDeclaration(path, { opts }) {
        const { node: { specifiers, source } } = path;
        if (source.value === opts.libraryName) {
          // ...
        }
      }
    }
  }
}
複製代碼

Babel 常用 API

@babel/core

Babel 的編譯器，核心 API 都在這裏面，比如常見的 transform、parse。

@babel/cli

cli 是命令行工具, 安裝了 @babel/cli 就能夠在命令行中使用 babel 命令來編譯文件。當然我們一般不會用到，打包工具已經幫我們做好了。

@babel/node

直接在 node 環境中，運行 ES6 的代碼。

babylon

Babel 的解析器。

babel-traverse

用於對 AST 的遍歷，維護了整棵樹的狀態，並且負責替換、移除和添加節點。

babel-types

用於 AST 節點的 Lodash 式工具庫, 它包含了構造、驗證以及變換 AST 節點的方法，對編寫處理 AST 邏輯非常有用。

babel-generator

Babel 的代碼生成器，它讀取 AST 並將其轉換爲代碼和源碼映射（sourcemaps）。

總結

文章主要介紹了一下幾個 Babel 的 API，和 Babel 編譯代碼的過程以及簡單編寫了一個 babel 插件

轉載自：政採雲前端團隊

初步認識 Babel

Babel 是怎麼工作的

Babel 編譯的三個階段

如何編寫一個 `Babel` 插件

Babel 常用 API

總結

win11關閉自動檢測病毒刪文件

React、Vue、Angular 對比優劣勢之處

初步認識 Babel

手動實現完整的Promise

Webpack面試題總結

執行上下文/作用域/閉包/一等公民

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

初步認識 Babel

Babel 是怎麼工作的

Babel 編譯的三個階段

如何編寫一個 Babel 插件

Babel 常用 API

總結

如何編寫一個 `Babel` 插件