摘要：安裝然后在的配置文件加入入口文件引入這樣就可以啦，還是可以減少很多代碼量的。是參數(shù)，等同于執(zhí)行正常。這個(gè)包很簡(jiǎn)單，就是引用了和，然后生產(chǎn)環(huán)境把它們編譯到目錄下，做了映射，供使用。

這個(gè)問題是對(duì)自己的發(fā)問，但我相信會(huì)有很多跟我一樣的同學(xué)。
對(duì)于 babel 的使用，近半年來一直停留在與 webpack 結(jié)合使用，以及在瀏覽器開發(fā)環(huán)境下。導(dǎo)致很多 babel 的包，我都不清楚他們是干嘛的。比如 babel-register，還有 babel-runtime，各種 presets 的區(qū)別，transform-runtime 和 babel-polyfill 的區(qū)別，helpers 是干嘛的。盡管網(wǎng)上的 babel 的教程很多了，但是解答自己的一些疑問，還是要花費(fèi)一些功夫。所以抽出時(shí)間來總結(jié)一下。如果你對(duì)于以上概念已經(jīng)比較清楚了，就不需要往下看了。

本次的 example 代碼都在 github 上，而且每個(gè)文件夾都有詳細(xì)的 README，說明我的使用方式?？梢匀⒄找幌掠美氖褂?，并 clone 下來自己研究一下。

說實(shí)話，從我做前端的時(shí)候，接觸 babel 的時(shí)候，就已經(jīng)是 babel 6 了，但是這不妨礙了解一下它的重大版本變化。
上一個(gè)版本 babel 5 是全家桶，包括各種package， plugins，盡可能的想通過你的一次安裝，達(dá)到全能的效果。不過你現(xiàn)在安裝npm install babel，會(huì)得到一個(gè) warning。babel 6 是 2015年10月30號(hào)發(fā)布，主要做了以下更新：

拆分成幾個(gè)核心包，babel-core,babel-node,babel-cli...

沒有了默認(rèn)的轉(zhuǎn)換，現(xiàn)在你需要手動(dòng)的添加 plugin。也就是插件化

添加了 preset，也就是預(yù)置條件。

增加了 .babelrc 文件，方便自定義的配置。

差不多了，我感覺其他的也不需要了解了。

babel 里面有好多的包，所以必須搞清楚他們都是干嘛的，才能讓我們更好的使用這個(gè)工具。

可以看做 babel 的編譯器。babel 的核心 api 都在這里面，比如 transform，主要都是處理轉(zhuǎn)碼的。它會(huì)把我們的 js 代碼，抽象成 ast，即 abstract syntax tree 的縮寫，是源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹狀表現(xiàn)形式。我們可以理解為，它定義的一種分析 js 語(yǔ)法的樹狀結(jié)構(gòu)。也就是說 es6 的新語(yǔ)法，跟老語(yǔ)法是不一樣的，那我們?cè)趺慈ザx這個(gè)語(yǔ)法呢。所以必須要先轉(zhuǎn)成 ast，去發(fā)現(xiàn)這個(gè)語(yǔ)法的 kind，分別做對(duì)應(yīng)的處理，才能轉(zhuǎn)化成 es5.

主要 api：

var babel = require("babel-core");
var transform = babel.transform;

babel.transform(code: string, options?: Object)

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

babel.transformFile(filename: string, options?: Object, callback: Function)

var path = require("path");
var result = babel.transformFileSync(path.resolve(__dirname) + "/test.js", {
  presets: ["env"],
  plugins: ["transform-runtime"],
}, function(err, result) {// { code, map, ast }
    console.log(result);
});

babel.transformFileSync(filename: string, options?: Object)

var result = babel.transformFileSync(path.resolve(__dirname) + "/test.js", {
  presets: ["env"],
  plugins: ["transform-runtime"],
});
console.log(result, "res");

babel.transformFromAst(ast: Object, code?: string, options?: Object)

反轉(zhuǎn)，你把 ast 傳入，解析為 code 代碼。

options

提供命令行運(yùn)行 babel。也就是你可以 babel filename 去對(duì)文件轉(zhuǎn)碼。
安裝的話

npm install --save-dev babel-cli

npm isntall babel-cli -g

使用對(duì)應(yīng)就是

node_module/.bin/babel script.js --out-file script-compiled.js

babel script.js --out-file script-compiled.js

具體使用還是看官方文檔吧，我就不搬文檔了。

babel-cli 中的一個(gè)command，用來生成一段代碼，包含 babel 所有的 helper 函數(shù)。

首先我們需要了解什么是 helpers。babel 有很多幫助函數(shù)，例如 toArray函數(shù)， jsx轉(zhuǎn)化函數(shù)。這些函數(shù)是 babel transform 的時(shí)候用的，都放在 babel-helpers這個(gè)包中。如果 babe 編譯的時(shí)候檢測(cè)到某個(gè)文件需要這些 helpers，在編譯成模塊的時(shí)候，會(huì)放到模塊的頂部。
像這樣

(function(module, exports, __webpack_require__) {

function _asyncToGenerator(fn) { return function () {  }; } // 模塊頂部定義 helper

// some code 
// async 語(yǔ)法已經(jīng)被 transform-async-to-generator 轉(zhuǎn)化，再利用 helper 函數(shù)包裝，消費(fèi) generator。
const func = (() => {
  var _ref = _asyncToGenerator(function* () {
    console.log("begin");
    yield new Promise(function (resolve) {
      setTimeout(function () {
        resolve();
      }, 1000);
    });
    console.log("done");
  });
})

})

但是如果多個(gè)文件都需要提供，會(huì)重復(fù)引用這些 helpers，會(huì)導(dǎo)致每一個(gè)模塊都定義一份，代碼冗余。所以 babel 提供了這個(gè)命令，用于生成一個(gè)包含了所有 helpers 的 js 文件，用于直接引用。然后再通過一個(gè) plugin，去檢測(cè)全局下是否存在這個(gè)模塊，存在就不需要重新定義了。

使用：

執(zhí)行 babel-external-helpers 生成 helpers.js 文件，

 node_modules/.bin/babel-external-helpers > helpers.js

注意：示例代碼的包都是裝到項(xiàng)目中的，也就是本地。同樣你可以全局安裝直接執(zhí)行。

安裝 plugin

npm install --save-dev babel-plugin-external-helpers

然后在 babel 的配置文件加入

{
  "plugins": ["external-helpers"]
}

入口文件引入 helpers.js

require("./helpers.js");

這樣就可以啦，還是可以減少很多代碼量的。另外如果使用了 transform-runtime，就不需要生成 helpers.js 文件了，這個(gè)在后面的 babel-runtime 再說。

也是 babel-cli 下面的一個(gè) command，主要是實(shí)現(xiàn)了 node 執(zhí)行腳本和命令行寫代碼的能力。舉兩個(gè)栗子就清楚了。

執(zhí)行腳本

node 環(huán)境肯定是不支持 jsx 的

// test.js
const React = require("react");
const elements = [1, 2, 3].map((item) => {
  return (
    
{item}
  )
});

console.log(elements);

執(zhí)行 test.js，會(huì)報(bào)錯(cuò)，不認(rèn)識(shí)這個(gè)語(yǔ)法。

node test.js //報(bào)錯(cuò)

但是使用 babel-node 就可以。

 node_modules/.bin/babel-node --presets react test.js

--presets react 是參數(shù)，等同于

{
  "presets": ["react"]
}

執(zhí)行正常。

node 命令行寫代碼

注意： 本文所有代碼示例，均在 node 版本 4.8.4 下執(zhí)行。

寫個(gè)解構(gòu)賦值的，直接運(yùn)行 node，不支持。

運(yùn)行 node_modules/.bin/babel-node --presets env

得到 a 的 value 是 1。

通過栗子基本已經(jīng)介紹了 babel-node 的用法了，就是方便我們平常開發(fā)時(shí)候，寫一些腳本的。所以它不適用于生產(chǎn)環(huán)境。另外，babel-node 已經(jīng)內(nèi)置了 polyfill，并依賴 babel-register 來編譯腳本。好，那 babel-register 是什么呢

npm install babel-register --save-dev

babel-node 可以通過它編譯代碼，可以了解到，它其實(shí)就是一個(gè)編譯器。我們同樣可以在代碼中引入它 require("babel-register")，并通過 node 執(zhí)行我們的代碼。

它的原理是通過改寫 node 本身的 require，添加鉤子，然后在 require 其他模塊的時(shí)候，就會(huì)觸發(fā) babel 編譯。也就是你引入require("babel-register")的文件代碼，是不會(huì)被編譯的。只有通過 require 引入的其他代碼才會(huì)。我們是不是可以理解，babel-node 就是在內(nèi)存中寫入一個(gè)臨時(shí)文件，在頂部引入 babel-register，然后再引入我們的腳本或者代碼？

舉個(gè)栗子，還是 node 中執(zhí)行 jsx，要通過 babel 編譯。我們可以把 jsx 的代碼 a.js 編譯完輸出到一個(gè) b.js，然后 node b.js 也是可以執(zhí)行的。但是太麻煩，不利于開發(fā)。讓我們看一下通過 register 怎么用：

// register.js 引入 babel-register，并配置。然后引入要執(zhí)行代碼的入口文件
require("babel-register")({ presets: ["react"] });
require("./test")

// test.js 這個(gè)文件是 jsx...
const React = require("react");
const elements = [1, 2, 3].map((item) => {
  return (
    
{item}
  )
});
console.log(elements);

// 執(zhí)行
$ node register.js

它的特點(diǎn)就是實(shí)時(shí)編譯，不需要輸出文件，執(zhí)行的時(shí)候再去編譯。所以它很適用于開發(fā)?？偨Y(jié)一下就是，多用在 node 跑程序，做實(shí)時(shí)編譯用的，通常會(huì)結(jié)合其他插件作編譯器使用，比如 mocha 做測(cè)試的時(shí)候。

值得一提的是，babel-register 這個(gè)包之前是在 babel-core 下面的，所以也可以 require("babel-core/register") 去引入，跟require("babel-register")是一樣的。但是，babel 的團(tuán)隊(duì)把 register 獨(dú)立出來了，而且未來的某一天（升 7.0）會(huì)從 babel-core 中廢除，所以我們現(xiàn)在最好還是使用 babel-register 吧。babel-core/register.js

npm install babel-runtime --save

這個(gè)包很簡(jiǎn)單，就是引用了 core-js 和 regenerator，然后生產(chǎn)環(huán)境把它們編譯到 dist 目錄下，做了映射，供使用。那么什么是 core-js 和 regenerator 呢。
首先我們要知道上面提到的 babel-core 是對(duì)語(yǔ)法進(jìn)行 transform 的，但是它不支持 build-ints（Eg: promise，Set，Map），prototype function（Eg: array.reduce,string.trim），class static function （Eg：Array.form，Object.assgin），regenerator （Eg：generator，async）等等拓展的編譯。所以才要用到 core-js 和 regenerator。

core-js 是用于 JavaScript 的組合式標(biāo)準(zhǔn)化庫(kù)，它包含 es5 （e.g: object.freeze）, es6的 promise，symbols, collections, iterators, typed arrays， es7+提案等等的 polyfills 實(shí)現(xiàn)。也就是說，它幾乎包含了所有 JavaScript 最新標(biāo)準(zhǔn)的墊片。不過為什么它不把 generator 也實(shí)現(xiàn)了...