前言

半年前也寫過一篇babel的簡單使用文章，當(dāng)時(shí)看了下babel的文檔，但是很多地方還不理解，所以文章里沒有怎么說道babel的一些關(guān)鍵概念，只是機(jī)械的描述如何使用（配合webstorm）。
最近剛好遇到一個(gè)問題，發(fā)現(xiàn)是因?yàn)閖s代碼中使用的es6的新api沒有被轉(zhuǎn)義，導(dǎo)致拋異常了。查找了下資料，是沒有引入polyfill所致，之前一直對babel的這些概念沒有很好的理解，把這個(gè)bug作為引子，認(rèn)真了解了下babel，寫出此文。
本文的babel使用場景局限于babel配合webpack來轉(zhuǎn)譯輸出es5的js代碼，babel的命令行、以代碼形式調(diào)用或node環(huán)境下這些統(tǒng)統(tǒng)都不會(huì)涉及。

Babel的包構(gòu)成

核心包

• babel-core：babel轉(zhuǎn)譯器本身，提供了babel的轉(zhuǎn)譯API，如babel.transform等，用于對代碼進(jìn)行轉(zhuǎn)譯。像webpack的babel-loader就是調(diào)用這些API來完成轉(zhuǎn)譯過程的。
• babylon：js的詞法解析器
• babel-traverse：用于對AST（抽象語法樹，想了解的請自行查詢編譯原理）的遍歷，主要給plugin用
• babel-generator：根據(jù)AST生成代碼

功能包

• babel-types：用于檢驗(yàn)、構(gòu)建和改變AST樹的節(jié)點(diǎn)
• babel-template：輔助函數(shù)，用于從字符串形式的代碼來構(gòu)建AST樹節(jié)點(diǎn)
• babel-helpers：一系列預(yù)制的babel-template函數(shù)，用于提供給一些plugins使用
• babel-code-frames：用于生成錯(cuò)誤信息，打印出錯(cuò)誤點(diǎn)源代碼幀以及指出出錯(cuò)位置
• babel-plugin-xxx：babel轉(zhuǎn)譯過程中使用到的插件，其中babel-plugin-transform-xxx是transform步驟使用的
• babel-preset-xxx：transform階段使用到的一系列的plugin
• babel-polyfill：JS標(biāo)準(zhǔn)新增的原生對象和API的shim，實(shí)現(xiàn)上僅僅是core-js和regenerator-runtime兩個(gè)包的封裝
• babel-runtime：功能類似babel-polyfill，一般用于library或plugin中，因?yàn)樗粫?huì)污染全局作用域

工具包

babel-cli：babel的命令行工具，通過命令行對js代碼進(jìn)行轉(zhuǎn)譯
babel-register：通過綁定node.js的require來自動(dòng)轉(zhuǎn)譯require引用的js代碼文件

babel的配置

使用形式

如果是以命令行方式使用babel，那么babel的設(shè)置就以命令行參數(shù)的形式帶過去；
還可以在package.json里在babel字段添加設(shè)置；
但是建議還是使用一個(gè)單獨(dú)的.babelrc文件，把babel的設(shè)置都放置在這里，所有babel API的options（除了回調(diào)函數(shù)之外）都能夠支持，具體的options見babel的API options文檔

常用options字段說明

• env：指定在不同環(huán)境下使用的配置。比如production和development兩個(gè)環(huán)境使用不同的配置，就可以通過這個(gè)字段來配置。env字段的從process.env.BABEL_ENV獲取，如果BABEL_ENV不存在，則從process.env.NODE_ENV獲取，如果NODE_ENV還是不存在，則取默認(rèn)值"development"
• plugins：要加載和使用的插件列表，插件名前的babel-plugin-可省略；plugin列表按從頭到尾的順序運(yùn)行
• presets：要加載和使用的preset列表，preset名前的babel-preset-可省略；presets列表的preset按從尾到頭的逆序運(yùn)行（為了兼容用戶使用習(xí)慣）
• 同時(shí)設(shè)置了presets和plugins，那么plugins的先運(yùn)行；每個(gè)preset和plugin都可以再配置自己的option

配置文件的查找

babel會(huì)從當(dāng)前轉(zhuǎn)譯的文件所在目錄下查找配置文件，如果沒有找到，就順著文檔目錄樹一層層往上查找，一直到.babelrc文件存在或者帶babel字段的package.json文件存在為止。

babel的工作原理

babel是一個(gè)轉(zhuǎn)譯器，感覺相對于編譯器compiler，叫轉(zhuǎn)譯器transpiler更準(zhǔn)確，因?yàn)樗皇前淹N語言的高版本規(guī)則翻譯成低版本規(guī)則，而不像編譯器那樣，輸出的是另一種更低級(jí)的語言代碼。
但是和編譯器類似，babel的轉(zhuǎn)譯過程也分為三個(gè)階段：parsing、transforming、generating，以ES6代碼轉(zhuǎn)譯為ES5代碼為例，babel轉(zhuǎn)譯的具體過程如下：

ES6代碼輸入 ==》 babylon進(jìn)行解析 ==》 得到AST
==》 plugin用babel-traverse對AST樹進(jìn)行遍歷轉(zhuǎn)譯 ==》 得到新的AST樹
==》 用babel-generator通過AST樹生成ES5代碼

此外，還要注意很重要的一點(diǎn)就是，babel只是轉(zhuǎn)譯新標(biāo)準(zhǔn)引入的語法，比如ES6的箭頭函數(shù)轉(zhuǎn)譯成ES5的函數(shù)；而新標(biāo)準(zhǔn)引入的新的原生對象，部分原生對象新增的原型方法，新增的API等（如Proxy、Set等），這些babel是不會(huì)轉(zhuǎn)譯的。需要用戶自行引入polyfill來解決

plugins

插件應(yīng)用于babel的轉(zhuǎn)譯過程，尤其是第二個(gè)階段transforming，如果這個(gè)階段不使用任何插件，那么babel會(huì)原樣輸出代碼。
我們主要關(guān)注transforming階段使用的插件，因?yàn)閠ransform插件會(huì)自動(dòng)使用對應(yīng)的詞法插件，所以parsing階段的插件不需要配置。

presets

如果要自行配置轉(zhuǎn)譯過程中使用的各類插件，那太痛苦了，所以babel官方幫我們做了一些預(yù)設(shè)的插件集，稱之為preset，這樣我們只需要使用對應(yīng)的preset就可以了。以JS標(biāo)準(zhǔn)為例，babel提供了如下的一些preset：

• es2015
• es2016
• es2017
• env
  es20xx的preset只轉(zhuǎn)譯該年份批準(zhǔn)的標(biāo)準(zhǔn)，而env則代指最新的標(biāo)準(zhǔn)，包括了latest和es20xx各年份
  另外，還有 stage-0到stage-4的標(biāo)準(zhǔn)成形之前的各個(gè)階段，這些都是實(shí)驗(yàn)版的preset，建議不要使用。

polyfill

polyfill是一個(gè)針對ES2015+環(huán)境的shim，實(shí)現(xiàn)上來說babel-polyfill包只是簡單的把core-js和regenerator runtime包裝了下，這兩個(gè)包才是真正的實(shí)現(xiàn)代碼所在（后文會(huì)詳細(xì)介紹core-js）。
使用babel-polyfill會(huì)把ES2015+環(huán)境整體引入到你的代碼環(huán)境中，讓你的代碼可以直接使用新標(biāo)準(zhǔn)所引入的新原生對象，新API等，一般來說單獨(dú)的應(yīng)用和頁面都可以這樣使用。

使用方法

1. 先安裝包： npm install --save babel-polyfill
2. 要確保在入口處導(dǎo)入polyfill，因?yàn)閜olyfill代碼需要在所有其他代碼前先被調(diào)用
   代碼方式： import "babel-polyfill"
   webpack配置： module.exports = { entry: ["babel-polyfill", "./app/js"] };

如果只是需要引入部分新原生對象或API，那么可以按需引入，而不必導(dǎo)入全部的環(huán)境，具體見下文的core-js

runtime

polyfill和runtime的區(qū)別

直接使用babel-polyfill對于應(yīng)用或頁面等環(huán)境在你控制之中的情況來說，并沒有什么問題。但是對于在library中使用polyfill，就變得不可行了。因?yàn)閘ibrary是供外部使用的，但外部的環(huán)境并不在library的可控范圍，而polyfill是會(huì)污染原來的全局環(huán)境的（因?yàn)樾碌脑鷮ο?、API這些都直接由polyfill引入到全局環(huán)境）。這樣就很容易會(huì)發(fā)生沖突，所以這個(gè)時(shí)候，babel-runtime就可以派上用場了。

transform-runtime和babel-runtime

babel-plugin-transform-runtime插件依賴babel-runtime，babel-runtime是真正提供runtime環(huán)境的包；也就是說transform-runtime插件是把js代碼中使用到的新原生對象和靜態(tài)方法轉(zhuǎn)換成對runtime實(shí)現(xiàn)包的引用，舉個(gè)例子如下：

// 輸入的ES6代碼
var sym = Symbol();
// 通過transform-runtime轉(zhuǎn)換后的ES5+runtime代碼 
var _symbol = require("babel-runtime/core-js/symbol");
var sym = (0, _symbol.default)();

從上面這個(gè)例子可見，原本代碼中使用的ES6新原生對象Symbol被transform-runtimec插件轉(zhuǎn)換成了babel-runtime的實(shí)現(xiàn)，既保持了Symbol的功能，同時(shí)又沒有像polyfill那樣污染全局環(huán)境（因?yàn)樽罱K生成的代碼中，并沒有對Symbol的引用）
另外，這里我們也可以隱約發(fā)現(xiàn)，babel-runtime其實(shí)也不是真正的實(shí)現(xiàn)代碼所在，真正的代碼實(shí)現(xiàn)是在core-js中，后面我們再說

transform-runtime插件的功能

1. 把代碼中的使用到的ES6引入的新原生對象和靜態(tài)方法用babel-runtime/core-js導(dǎo)出的對象和方法替代
2. 當(dāng)使用generators或async函數(shù)時(shí)，用babel-runtime/regenerator導(dǎo)出的函數(shù)取代（類似polyfill分成regenerator和core-js兩個(gè)部分）
3. 把Babel生成的輔助函數(shù)改為用babel-runtime/helpers導(dǎo)出的函數(shù)來替代（babel默認(rèn)會(huì)在每個(gè)文件頂部放置所需要的輔助函數(shù)，如果文件多的話，這些輔助函數(shù)就在每個(gè)文件中都重復(fù)了，通過引用babel-runtime/helpers就可以統(tǒng)一起來，減少代碼體積）

上述三點(diǎn)就是transform-runtime插件所做的事情，由此也可見，babel-runtime就是一個(gè)提供了regenerator、core-js和helpers的運(yùn)行時(shí)庫。
建議不要直接使用babel-runtime，因?yàn)閠ransform-runtime依賴babel-runtime，大部分情況下都可以用transform-runtime達(dá)成目的。
此外，transform-runtime在.babelrc里配置的時(shí)候，還可以設(shè)置helpers、polyfill、regenerator這三個(gè)開關(guān)，以自行決定runtime是否要引入對應(yīng)的功能。
最后補(bǔ)充一點(diǎn)：由于runtime不會(huì)污染全局空間，所以實(shí)例方法是無法工作的（因?yàn)檫@必須在原型鏈上添加這個(gè)方法，這是和polyfill最大的不同） ，比如：

var arr = ['a', 'b', 'c'];
arr.fill(7);  // 實(shí)例方法不行
Array.prototype.fill.apply(arr, 7);  // 用原型鏈來調(diào)用也是不行

通過core-js實(shí)現(xiàn)按需引入polyfill或runtime

core-js包才上述的polyfill、runtime的核心，因?yàn)閜olyfill和runtime其實(shí)都只是對core-js和regenerator的再封裝，方便使用而已。
但是polyfill和runtime都是整體引入的，不能做細(xì)粒度的調(diào)整，如果我們的代碼只是用到了小部分ES6而導(dǎo)致需要使用polyfill和runtime的話，會(huì)造成代碼體積不必要的增大（runtime的影響較小）。所以，按需引入的需求就自然而然產(chǎn)生了，這個(gè)時(shí)候就得依靠core-js來實(shí)現(xiàn)了。

core-js的組織結(jié)構(gòu)

首先，core-js有三種使用方式：

• 默認(rèn)方式：require('core-js')
  這種方式包括全部特性，標(biāo)準(zhǔn)的和非標(biāo)準(zhǔn)的
• 庫的形式： var core = require('core-js/library')
  這種方式也包括全部特性，只是它不會(huì)污染全局名字空間
• 只是shim： require('core-js/shim')或var shim = require('core-js/library/shim')
  這種方式只包括標(biāo)準(zhǔn)特性（就是只有polyfill功能，沒有擴(kuò)展的特性）

core-js的結(jié)構(gòu)是高度模塊化的，它把每個(gè)特性都組織到一個(gè)小模塊里，然后再把這些小模塊組合成一個(gè)大特性，層層組織。比如：
core-js/es6（core-js/library/es6）就包含了全部的ES6特性，而core-js/es6/array（core-js/library/es6/array）則只包含ES6的Array特性，而core-js/fn/array/from（core-js/library/fn/array/from）則只有Array.from這個(gè)實(shí)現(xiàn)。
實(shí)現(xiàn)按需使用，就是自己選擇使用到的特性，然后導(dǎo)入即可。具體的每個(gè)特性和對應(yīng)的路徑可以直接查看core-js的github

core-js的按需使用

1、類似polyfill，直接把特性添加到全局環(huán)境，這種方式體驗(yàn)最完整

require('core-js/fn/set');
require('core-js/fn/array/from');
require('core-js/fn/array/find-index');

Array.from(new Set([1, 2, 3, 2, 1])); // => [1, 2, 3]
[1, 2, NaN, 3, 4].findIndex(isNaN);   // => 2

2、類似runtime一樣，以庫的形式來使用特性，這種方式不會(huì)污染全局名字空間，但是不能使用實(shí)例方法

var Set       = require('core-js/library/fn/set');
var from      = require('core-js/library/fn/array/from');
var findIndex = require('core-js/library/fn/array/find-index');

from(new Set([1, 2, 3, 2, 1]));      // => [1, 2, 3]
findIndex([1, 2, NaN, 3, 4], isNaN); // => 2

3、因?yàn)榈诙N庫的形式不能使用prototype方法，所以第三種方式使用了一個(gè)小技巧，通過::這個(gè)符號(hào)而不是.來調(diào)用實(shí)例方式，從而達(dá)到曲線救國的目的。這種方式的使用，路徑中都會(huì)帶有/virtual/

import {fill, findIndex} from 'core-js/library/fn/array/virtual';

Array(10)::fill(0).map((a, b) => b * b)::findIndex(it => it && !(it % 8)); // => 4

// 對比下polyfill的實(shí)現(xiàn) 
// Array(10).fill(0).map((a, b) => b * b).findIndex(it => it && !(it % 8));

總結(jié)

Babel使用的難點(diǎn)主要在于理解polyfill、runtime和core-js，通過本文，把這三者的概念和關(guān)系理清楚了，對babel的使用就不存在問題！