前端工程師須要瞭解的 Babel 知識
原創不易，但願能關注下咱們，再順手點個贊~~
本文首發於政採雲前端團隊博客： 前端工程師須要瞭解的 Babel 知識html
在前端圈子裏，對於 Babel，你們確定都比較熟悉了。若是哪天少了它，對於前端工程師來講確定是個噩夢。Babel 的工做原理是怎樣的可能瞭解的人就不太多了。前端
本文將主要介紹 Babel 的工做原理以及怎麼寫一個 Babel 插件。node
Babel 是怎麼工做的
Babel 是一個 JavaScript 編譯器。react
作與不作
注意很重要的一點就是，Babel 只是轉譯新標準引入的語法，好比：express
-
箭頭函數npm
-
let / const編程
-
解構json
哪些在 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 插件。
招賢納士
招人，前端，隸屬政採雲前端大團隊（ZooTeam），50 餘個小夥伴正等你加入一塊兒浪。若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「5年工做時間3年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手參與一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com
推薦閱讀
- 1. 前端工程師須要瞭解的 Babel 知識
- 2. 前端工程師須要掌握的 Babel 知識
- 3. 前端工程師須要瞭解的知識點
- 4. 84.前端工程師須要瞭解的知識點
- 5. 前端須要瞭解的RTMP知識
- 6. 前端須要瞭解的http知識
- 7. Web前端開發工程師必須瞭解的HTTP知識
- 8. 前端工程師須要知道的性能知識
- 9. web前端開發工程師須要掌握的知識點
- 10. web前端工程師須要掌握哪些知識
- 更多相關文章...
- • ARP協議的工作機制詳解 - TCP/IP教程
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • IDEA下SpringBoot工程配置文件沒有提示
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策