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

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

如果你需要以編程的方式來使用 Babel，可以使用 babel-core 這個包

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

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

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

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

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

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

在options中可以設(shè)置presets和plugins，或者創(chuàng)建.babelrc文件，options默認開啟讀取babelrc文件的功能。以下是開啟自定義預(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 該做什么之前，我們需要創(chuàng)建一個配置文件。你需要做的就是在項目的根路徑下創(chuàng)建 .babelrc 文件。然后輸入以下內(nèi)容作為開始：

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

由于babelrc的功能默認被開啟，可在options中設(shè)置{babelrc:false}來顯式關(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系列中，只羅列了當年ECMAScript公布的新特性中的語法部分，至于新特性中的API則全部在polyfill中。

JavaScript 還有一些提案，正在積極通過 TC39（ECMAScript 標準背后的技術(shù)委員會）的流程成為標準的一部分。

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

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

babel-preset-stage-0 僅僅是個想法

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è)是一個一直變化的插件集合，根據(jù)當年發(fā)布的標準內(nèi)容，動態(tài)改變stage的插件內(nèi)容，stage3中的候選插件很可能被完成，那就會在babel新release的版本中去除，而stage2中的草案就會進入到stage3中的候選名單中，像是一個傳接棒的過程，當然草案或者候選的名單隨時可能會被取消。

其中stage-0的do語法糖可以很好的用在jsx中，我們在開發(fā)recat的jsx條件判斷代碼時，可以有以下幾種方式：

1.第一種三元表達式

{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"]
      }
    }]
  ]
}

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

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

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

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

{
  "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 幾乎可以編譯所有時新的 JavaScript 語法，但對于 APIs 來說卻并非如此。

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

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

最終會變成這樣：

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

然而，它依然無法隨處可用因為不是所有的 JavaScript 環(huán)境都支持 Array.from。
babel墊片有三種：

babel-runtime

babel-plugin-transform-runtime

babel-polyfill

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

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

深入了解babel（二）