參考文檔 Babel 插件手冊
Babel
的作用
Babel
是一個(gè)JavaScript
編譯器
很多瀏覽器目前還不支持ES6的代碼,Babel
的作用就是把瀏覽器不資辭的代碼編譯成資辭的代碼。
注意很重要的一點(diǎn)就是惠赫,Babel
只是轉(zhuǎn)譯新標(biāo)準(zhǔn)引入的語法,比如ES6的箭頭函數(shù)轉(zhuǎn)譯成ES5的函數(shù), 但是對于新標(biāo)準(zhǔn)引入的新的原生對象故黑,部分原生對象新增的原型方法儿咱,新增的API等(如Set
、Promise
)场晶,這些Babel
是不會轉(zhuǎn)譯的混埠,需要引入polyfill
來解決。
API
Babel
實(shí)際上是一組模塊的集合诗轻。
@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: 因?yàn)闆]有全局安裝
@babel/cli
, 建議用npx
命令來運(yùn)行,或者./node_modules/.bin/babel
半醉,關(guān)于npx
命令疚俱,可以看下官方文檔
@babel/node
直接在node
環(huán)境中,運(yùn)行 ES6 的代碼
- 使用
npx babel-node script.js
babylon
Babel
的解析器
首先缩多,安裝一下這個(gè)插件呆奕。
npm i babylon -S
先從解析一個(gè)代碼字符串開始:
// 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 的遍歷,維護(hù)了整棵樹的狀態(tài)衬吆,并且負(fù)責(zé)替換梁钾、移除和添加節(jié)點(diǎn)。
運(yùn)行以下命令安裝:
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 節(jié)點(diǎn)的 Lodash 式工具庫, 它包含了構(gòu)造逊抡、驗(yàn)證以及變換 AST 節(jié)點(diǎn)的方法陈轿,對編寫處理 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并將其轉(zhuǎn)換為代碼和源碼映射(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最受歡迎的特性箭頭函數(shù)入手。
假設(shè)要把下面這個(gè)箭頭函數(shù)的Javascript
代碼
(foo, bar) => foo + bar;
編譯成瀏覽器支持的代碼:
'use strict';
(function (foo, bar) {
return foo + bar;
});
Babel的編譯過程和大多數(shù)其他語言的編譯器相似灯谣,可以分為三個(gè)階段:
- 解析(Parsing):將代碼字符串解析成抽象語法樹潜秋。
- 轉(zhuǎn)換(Transformation):對抽象語法樹進(jìn)行轉(zhuǎn)換操作。
- 生成(Code Generation): 根據(jù)變換后的抽象語法樹再生成代碼字符串胎许。
解析(Parsing)
Babel
拿到源代碼會把代碼抽象出來峻呛,變成AST
(抽象語法樹),洋文是Abstract Syntax Tree
辜窑。
抽象語法樹是源代碼的抽象語法結(jié)構(gòu)的樹狀表示钩述,樹上的每個(gè)節(jié)點(diǎn)都表示源代碼中的一種結(jié)構(gòu),這所以說是抽象的穆碎,是因?yàn)槌橄笳Z法樹并不會表示出真實(shí)語法出現(xiàn)的每一個(gè)細(xì)節(jié)牙勘,比如說,嵌套括號被隱含在樹的結(jié)構(gòu)中所禀,并沒有以節(jié)點(diǎn)的形式呈現(xiàn)方面。它們主要用于源代碼的簡單轉(zhuǎn)換。
箭頭函數(shù)(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
描述了源代碼的每個(gè)部分以及它們之間的關(guān)系色徘,可以自己在這里試一下astexplorer恭金。
AST
是怎么來的?解析過程分為兩個(gè)步驟:
- 分詞:將整個(gè)代碼字符串分割成語法單元數(shù)組
Javascript
代碼中的語法單元主要指如標(biāo)識符(if/else褂策、return横腿、function)颓屑、運(yùn)算符、括號耿焊、數(shù)字揪惦、字符串、空格等等能被解析的最小單元
[
{
"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"
}
]
- 語法分析:建立分析語法單元之間的關(guān)系
語義分析則是將得到的詞匯進(jìn)行一個(gè)立體的組合搀别,確定詞語之間的關(guān)系∥惨郑考慮到編程語言的各種從屬關(guān)系的復(fù)雜性歇父,語義分析的過程又是在遍歷得到的語法單元組,相對而言就會變得更復(fù)雜再愈。
簡單來說語義分析既是對語句和表達(dá)式識別榜苫,這是個(gè)遞歸過程,在解析中翎冲,Babel
會在解析每個(gè)語句和表達(dá)式的過程中設(shè)置一個(gè)暫存器垂睬,用來暫存當(dāng)前讀取到的語法單元,如果解析失敗抗悍,就會返回之前的暫存點(diǎn)驹饺,再按照另一種方式進(jìn)行解析,如果解析成功缴渊,則將暫存點(diǎn)銷毀赏壹,不斷重復(fù)以上操作,直到最后生成對應(yīng)的語法樹衔沼。
轉(zhuǎn)換(Transformation)
Plugins
插件應(yīng)用于babel
的轉(zhuǎn)譯過程蝌借,尤其是第二個(gè)階段Transformation
,如果這個(gè)階段不使用任何插件指蚁,那么babel
會原樣輸出代碼菩佑。
Presets
babel
官方幫我們做了一些預(yù)設(shè)的插件集,稱之為preset
凝化,這樣我們只需要使用對應(yīng)的preset就可以了稍坯。每年每個(gè)preset
只編譯當(dāng)年批準(zhǔn)的內(nèi)容。 而babel-preset-env
相當(dāng)于 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 排序
如果兩次轉(zhuǎn)譯都訪問相同的節(jié)點(diǎn)遣疯,則轉(zhuǎn)譯將按照 plugin 或 preset 的規(guī)則進(jìn)行排序然后執(zhí)行雄可。
- Plugin 會運(yùn)行在 Preset 之前凿傅。
- Plugin 會從第一個(gè)開始順序執(zhí)行。
- Preset 的順序則剛好相反(從最后一個(gè)逆序執(zhí)行)数苫。
例如:
{
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
}
將先執(zhí)行transform-decorators-legacy
再執(zhí)行transform-class-properties
但 preset 是反向的
{
"presets": [
"es2015",
"react",
"stage-2"
]
}
會按以下順序運(yùn)行: stage-2
聪舒, react
, 最后es2015
虐急。
生成(Code Generation)
用babel-generator
通過 AST 樹生成 ES5 代碼
編寫一個(gè)Babel
插件
基礎(chǔ)的東西講了些箱残,下面說下具體如何寫插件。
插件格式
先從一個(gè)接收了當(dāng)前babel對象作為參數(shù)的function
開始止吁。
export default function(babel) {
// plugin contents
}
我們經(jīng)常會這樣寫
export default function({ types: t }) {
//
}
接著返回一個(gè)對象被辑,其visitor
屬性是這個(gè)插件的主要訪問者。
export default function({ types: t }) {
return {
visitor: {
// visitor contents
}
};
};
visitor
中的每個(gè)函數(shù)接收2個(gè)參數(shù):path
和state
export default function({ types: t }) {
return {
visitor: {
CallExpression(path, state) {}
}
};
};
寫一個(gè)簡單的插件
我們寫一個(gè)簡單的插件敬惦,把所有定義變量名為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"
}
從這里看盼理,要找的節(jié)點(diǎn)類型就是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 語法樹臊诊,所以想改變某個(gè)值,就是用對應(yīng)的 AST 來替換斜脂,現(xiàn)在我們用新的標(biāo)識符來替換這個(gè)屬性妨猩。
測試一下
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
實(shí)現(xiàn)一個(gè)簡單的按需打包功能
例如我們要實(shí)現(xiàn)把import { Button } from 'antd'
轉(zhuǎn)成import Button from 'antd/lib/button'
通過對比 AST 發(fā)現(xiàn),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 進(jìn)行判斷
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";
總結(jié)
主要介紹了一下幾個(gè)babel
的 API壶硅,和babel
編譯代碼的過程以及簡單編寫了一個(gè)babel
插件