前端工程師須要掌握的 Babel 知識

時間  2019-11-18
標籤 前端 工程師 須要 掌握 babel 知識 简体版
原文   原文鏈接

在前端圈子裏，對於 Babel，你們確定都比較熟悉了。若是哪天少了它，對於前端工程師來講確定是個噩夢。Babel 的工做原理是怎樣的可能瞭解的人就不太多了。
本文將主要介紹 Babel 的工做原理以及怎麼寫一個 Babel 插件。前端

Babel 是怎麼工做的

Babel 是一個 JavaScript 編譯器。node

作與不作

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

  • 箭頭函數
  • let / const
  • 解構

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

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

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

Babel 編譯的三個階段

Babel 的編譯過程和大多數其餘語言的編譯器類似，能夠分爲三個階段：編程

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


 

 



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

解析（Parsing）

Babel 拿到源代碼會把代碼抽象出來，變成 AST （抽象語法樹），學過編譯原理的同窗應該都聽過這個詞，全稱是 Abstract Syntax Tree。抽象語法樹是源代碼的抽象語法結構的樹狀表示，樹上的每一個節點都表示源代碼中的一種結構，只因此說是抽象的，是由於抽象語法樹並不會表示出真實語法出現的每個細節，好比說，嵌套括號被隱含在樹的結構中，並無以節點的形式呈現，它們主要用於源代碼的簡單轉換。console.log('zcy')； 的 AST 長這樣：babel

{
  "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 描述了源代碼的每一個部分以及它們之間的關係。前端工程師

AST 是怎麼來的？

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

  • 分詞：將整個代碼字符串分割成語法單元數組
  • 語法分析：創建分析語法單元之間的關係


分詞語法單元通俗點說就是代碼中的最小單元，不能再被分割，就像原子是化學變化中的最小粒子同樣。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 的配置。因此如下代碼的執行順序爲

  1. @babel/plugin-proposal-decorators
  2. @babel/plugin-proposal-class-properties
  3. @babel/plugin-transform-runtime
  4. @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 官方的介紹。

插件格式

先從一個接收了當前 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 ，先看下 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）。

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