面試官：寫過 Babel 插件嗎？沒有 卒

時間  2019-11-29
標籤 面試 babel 插件 沒有 欄目 快樂工作 简体版
原文   原文鏈接

參考文檔 Babel 插件手冊 html

Babel的做用

Babel是一個JavaScript編譯器node

不少瀏覽器目前還不支持ES6的代碼，Babel的做用就是把瀏覽器不資辭的代碼編譯成資辭的代碼。react

注意很重要的一點就是，Babel只是轉譯新標準引入的語法，好比ES6的箭頭函數轉譯成ES5的函數, 可是對於新標準引入的新的原生對象，部分原生對象新增的原型方法，新增的API等（如Set、Promise），這些Babel是不會轉譯的，須要引入polyfill來解決。git

API

Babel其實是一組模塊的集合。github

@babel/core

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

npm i @babel/core -D
複製代碼
  • 使用
import { transform } from '@babel/core';
import * as babel from '@babel/core';
複製代碼
  • transform

babel.transform(code: string, options?: Object)express

babel.transform(code, options, function(err, result) {
  result; // => { code, map, ast }
});
複製代碼
  • parse

babel.parse(code: string, options?: Object, callback: Function)npm

@babel/cli

cli是命令行工具, 安裝了@babel/cli就可以在命令行中使用babel 命令來編譯文件。編程

npm i @babel/core @babel/cli -D
複製代碼
  • 使用
babel script.js
複製代碼

Note: 由於沒有全局安裝@babel/cli, 建議用npx命令來運行，或者./node_modules/.bin/babel，關於npx命令，能夠看下官方文檔json

@babel/node

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

  • 使用
npx babel-node script.js
複製代碼

babylon

Babel的解析器

首先，安裝一下這個插件。

npm i babylon -S
複製代碼

先從解析一個代碼字符串開始：

// src/index.js
import * as babylon from 'babylon';

const code = `function add(m, n) { return m + n; }`;

babylon.parse(code);
複製代碼
npx babel-node src/index.js
複製代碼
Node {
   type: "File",
   start: 0,
   end: 38,
   loc: SourceLocation {...},
   program: Node {...},
   comments: [],
   tokens: [...]
}
複製代碼

babel-traverse

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

運行如下命令安裝：

npm i babel-traverse -S
複製代碼
import * as babylon from 'babylon';
import traverse from 'babel-traverse';

const code = `function add(m, n) { return m + n; }`;

const ast = babylon.parse(code);

traverse(ast, {
  enter(path) {
    if (
      path.node.type === 'Identifier' &&
      path.node.name === 'm'
    ) {
      // do something
    }
  }
});
複製代碼

babel-types

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

npm i babel-types -S
複製代碼
import traverse from 'babel-traverse';
import * as t from 'babel-types';

traverse(ast, {
  enter(path) {
    if (t.isIdentifier(path.node, { name: 'm' })) {
      // do something
    }
  }
});
複製代碼

babel-generator

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

npm i babel-generator -S
複製代碼
import * as babylon from 'babylon';
import generate from 'babel-generator';

const code = `function add(m, n) { return m + n; }`;

const ast = babylon.parse(code);

generate(ast, {}, code);
// {
// code: "...",
// map: "...",
// rawMappings: "..."
// }
複製代碼

Babel是怎麼工做的

爲了理解Babel，咱們從ES6最受歡迎的特性箭頭函數入手。

假設要把下面這個箭頭函數的Javascript代碼

(foo, bar) => foo + bar;
複製代碼

編譯成瀏覽器支持的代碼：

'use strict';
(function (foo, bar) {
  return foo + bar;
});
複製代碼

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

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

解析(Parsing)

Babel拿到源代碼會把代碼抽象出來，變成AST(抽象語法樹)，洋文是Abstract Syntax Tree。

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

箭頭函數(foo, bar) => foo + bar;的AST長這樣：

{
  "type": "Program",
  "start": 0,
  "end": 202,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 179,
      "end": 202,
      "expression": {
        "type": "ArrowFunctionExpression",
        "start": 179,
        "end": 202,
        "id": null,
        "expression": true,
        "generator": false,
        "params": [
          {
            "type": "Identifier",
            "start": 180,
            "end": 183,
            "name": "foo"
          },
          {
            "type": "Identifier",
            "start": 185,
            "end": 188,
            "name": "bar"
          }
        ],
        "body": {
          "type": "BinaryExpression",
          "start": 193,
          "end": 202,
          "left": {
            "type": "Identifier",
            "start": 193,
            "end": 196,
            "name": "foo"
          },
          "operator": "+",
          "right": {
            "type": "Identifier",
            "start": 199,
            "end": 202,
            "name": "bar"
          }
        }
      }
    }
  ],
  "sourceType": "module"
}
複製代碼

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

AST是怎麼來的？解析過程分爲兩個步驟：

  • 分詞：將整個代碼字符串分割成語法單元數組

Javascript代碼中的語法單元主要指如標識符（if/else、return、function）、運算符、括號、數字、字符串、空格等等能被解析的最小單元

[
    {
        "type": "Punctuator",
        "value": "("
    },
    {
        "type": "Identifier",
        "value": "foo"
    },
    {
        "type": "Punctuator",
        "value": ","
    },
    {
        "type": "Identifier",
        "value": "bar"
    },
    {
        "type": "Punctuator",
        "value": ")"
    },
    {
        "type": "Punctuator",
        "value": "=>"
    },
    {
        "type": "Identifier",
        "value": "foo"
    },
    {
        "type": "Punctuator",
        "value": "+"
    },
    {
        "type": "Identifier",
        "value": "bar"
    }
]
複製代碼
  • 語法分析：創建分析語法單元之間的關係

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

簡單來講語義分析既是對語句和表達式識別，這是個遞歸過程，在解析中，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。

生成(Code Generation)

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

編寫一個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, 先從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的 API，和babel編譯代碼的過程以及簡單編寫了一個babel插件

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