摘要：目前羅列的只是的情況。例如，包含了。的執(zhí)行過(guò)程是，首先讀取配置中的條件，根據(jù)這些條件從模塊可得出該條件下的所有瀏覽器最低版本號(hào)列表，而又為的轉(zhuǎn)譯插件提供了瀏覽器的最低版本號(hào)列表，兩個(gè)瀏覽器版本號(hào)列表的查詢可得出一個(gè)轉(zhuǎn)譯插件的集合。

Babel 是 JavaScript 編譯器，更確切地說(shuō)是源碼到源碼的編譯器，通常也叫做“轉(zhuǎn)換編譯器（transpiler）”。

如果你需要以編程的方式來(lái)使用 Babel，可以使用 babel-core 這個(gè)包

npm install babel-core
var babel = require("babel-core");

字符串形式的 JavaScript 代碼可以直接使用 babel.transform 來(lái)編譯

babel.transform("code();....", options);
// => { code, map, ast }

如果是文件的話，可以使用異步 api

babel.transformFile("./myCode.js", options, function(err, result) {
  result; // => { code, map, ast }
});

對(duì)于上述所有方法，options 指的都是http://babeljs.io/docs/usage/...

在options中可以設(shè)置presets和plugins，或者創(chuàng)建.babelrc文件，options默認(rèn)開(kāi)啟讀取babelrc文件的功能。以下是開(kāi)啟自定義預(yù)設(shè)和插件的例子：

const {transform,generate}=require("babel-core");
const myPlugin=require("./myPlugin");
const mypreset=require("./mypreset");

const code = `d = a + b + c`;

var es5Code = transform(code, {
  plugins: [myPlugin],
  presets: [mypreset]
})
console.log(es5Code.code);

在我們告訴 Babel 該做什么之前，我們需要?jiǎng)?chuàng)建一個(gè)配置文件。你需要做的就是在項(xiàng)目的根路徑下創(chuàng)建 .babelrc 文件。然后輸入以下內(nèi)容作為開(kāi)始：

{
  "presets": [],
  "plugins": []
}

由于babelrc的功能默認(rèn)被開(kāi)啟，可在options中設(shè)置{babelrc:false}來(lái)顯式關(guān)閉。

預(yù)設(shè)，包含一系列插件的集合。目前常用的presets包括es201x,stage-x,env,latest,react,flow。目前羅列的只是babel6的情況。

1. es2015

check-es2015-constants
transform-es2015-arrow-functions
transform-es2015-block-scoped-functions
transform-es2015-block-scoping
transform-es2015-classes
transform-es2015-computed-properties
transform-es2015-destructuring
transform-es2015-duplicate-keys
transform-es2015-for-of
transform-es2015-function-name
transform-es2015-literals
transform-es2015-modules-commonjs
transform-es2015-object-super
transform-es2015-parameters
transform-es2015-shorthand-properties
transform-es2015-spread
transform-es2015-sticky-regex
transform-es2015-template-literals
transform-es2015-typeof-symbol
transform-es2015-unicode-regex
transform-regenerator

2. es2016
transform-exponentiation-operator

3. es2017
syntax-trailing-function-commas
transform-async-to-generator

es201x系列中，只羅列了當(dāng)年ECMAScript公布的新特性中的語(yǔ)法部分，至于新特性中的API則全部在polyfill中。

JavaScript 還有一些提案，正在積極通過(guò) TC39（ECMAScript 標(biāo)準(zhǔn)背后的技術(shù)委員會(huì)）的流程成為標(biāo)準(zhǔn)的一部分。

這個(gè)流程分為 5（0－4）個(gè)階段。 隨著提案得到越多的關(guān)注就越有可能被標(biāo)準(zhǔn)采納，于是他們就繼續(xù)通過(guò)各個(gè)階段，最終在階段 4 被標(biāo)準(zhǔn)正式采納。

以下是5 個(gè)不同階段的（打包的）預(yù)設(shè)：

babel-preset-stage-0 僅僅是個(gè)想法

babel-preset-stage-1 提議

babel-preset-stage-2 草案

babel-preset-stage-3 候選

babel-preset-stage-4 已完成

以上每種預(yù)設(shè)都依賴于緊隨的后期階段預(yù)設(shè)。例如，babel-preset-stage-0 包含了 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3。

stage預(yù)設(shè)是一個(gè)一直變化的插件集合，根據(jù)當(dāng)年發(fā)布的標(biāo)準(zhǔn)內(nèi)容，動(dòng)態(tài)改變stage的插件內(nèi)容，stage3中的候選插件很可能被完成，那就會(huì)在babel新release的版本中去除，而stage2中的草案就會(huì)進(jìn)入到stage3中的候選名單中，像是一個(gè)傳接棒的過(guò)程，當(dāng)然草案或者候選的名單隨時(shí)可能會(huì)被取消。

其中stage-0的do語(yǔ)法糖可以很好的用在jsx中，我們?cè)陂_(kāi)發(fā)recat的jsx條件判斷代碼時(shí)，可以有以下幾種方式：

1.第一種三元表達(dá)式

{condition1?condition2?result1:result2:result3}

2.第二種自執(zhí)行函數(shù)

{(()=>{
    if(a){
        return ...;
    }else{
        return ...;
    }
})()}

3.第三種do
{

do{
    if(a){
        "result1"
    }else{
        "result2"
    }
}

}

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

當(dāng)env的配置只簡(jiǎn)單配置為{presets:["env"]}時(shí)，與babel-preset-latest（官方已不推薦使用）等價(jià)，相當(dāng)于同時(shí)集合了三個(gè)babel-preset-es201x預(yù)設(shè)。
env的執(zhí)行過(guò)程是，首先讀取browsers配置中的條件，根據(jù)這些條件從browserslist模塊可得出該條件下的所有瀏覽器最低版本號(hào)列表，而env又為babel的轉(zhuǎn)譯插件提供了瀏覽器的最低版本號(hào)列表，兩個(gè)瀏覽器版本號(hào)列表的查詢可得出一個(gè)babel轉(zhuǎn)譯插件的集合。

browserslist根據(jù)條件查出的瀏覽器及版本號(hào)：

1%, Last 2 versions => {ie:10,chrome:56...}

env提供的轉(zhuǎn)譯插件對(duì)應(yīng)瀏覽器版本號(hào)列表：

{
  "check-es2015-constants": {
    "chrome": "49",
    "edge": "14",
    "firefox": "51",
    "safari": "10",
    "node": "6",
    "ios": "10",
    "opera": "36",
    "electron": "1"
  },
  "transform-es2015-arrow-functions": {
    "chrome": "47",
    "edge": "13",
    "firefox": "45",
    "safari": "10",
    "node": "6",
    "ios": "10",
    "opera": "34",
    "electron": "0.36"
  }....

最后得出結(jié)果

{
plugins:[babel插件1，babel插件2...]
}

Babel 幾乎可以編譯所有時(shí)新的 JavaScript 語(yǔ)法，但對(duì)于 APIs 來(lái)說(shuō)卻并非如此。

比方說(shuō)，下列含有箭頭函數(shù)的需要編譯的代碼：

function addAll() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

最終會(huì)變成這樣：

function addAll() {
  return Array.from(arguments).reduce(function(a, b) {
    return a + b;
  });
}

然而，它依然無(wú)法隨處可用因?yàn)椴皇撬械?JavaScript 環(huán)境都支持 Array.from。
babel墊片有三種：

babel-runtime

babel-plugin-transform-runtime

babel-polyfill

babel-runtime和 babel-plugin-transform-runtime的區(qū)別是，相當(dāng)一前者是手動(dòng)擋而后者是自動(dòng)擋，每當(dāng)要轉(zhuǎn)譯一個(gè)api時(shí)都要手動(dòng)加上require("babel-runtime")，而babel-plugin-transform-runtime會(huì)由工具自動(dòng)添加，主要的功能是為api提供沙箱的墊片方案，不會(huì)污染全局的api，因此適合用在第三方的開(kāi)發(fā)產(chǎn)品中。

babel-polyfill則是通過(guò)改寫全局prototype的方式實(shí)現(xiàn)，比較適合多帶帶運(yùn)行的項(xiàng)目。開(kāi)啟babel-polyfill的方式，可以直接在代碼中require，或者在webpack的entry中添加，也可以在babel的env中設(shè)置useBuildins為true來(lái)開(kāi)啟。

深入了解babel（二）