參考文件 Babel 外掛手冊
Babel的作用
Babel是一個JavaScript編譯器
很多瀏覽器目前還不支援ES6的程式碼，Babel的作用就是把瀏覽器不資辭的程式碼編譯成資辭的程式碼。
注意很重要的一點就是，Babel只是轉譯新標準引入的語法，比如ES6的箭頭函式轉譯成ES5的函式, 但是對於新標準引入的新的原生物件，部分原生物件新增的原型方法，新增的API等（如Set、Promise），這些Babel是不會轉譯的，需要引入polyfill來解決。
API
Babel實際上是一組模組的集合。
@babel/core
Babel 的編譯器，核心 API 都在這裡面，比如常見的transform、parse。
npm i @babel/core -D
複製程式碼- 使用
import { transform } from '@babel/core';
import * as babel from '@babel/core';
複製程式碼- transform
babel.transform(code: string, options?: Object)
babel.transform(code, options, function(err, result) {
result; // => { code, map, ast }
});
複製程式碼- parse
babel.parse(code: string, options?: Object, callback: Function)
@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命令，可以看下官方文件
@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外掛