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

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

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

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

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

沒有了默認的轉換，現在你需要手動的添加 plugin。也就是插件化

添加了 preset，也就是預置條件。

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

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

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

可以看做 babel 的編譯器。babel 的核心 api 都在這里面，比如 transform，主要都是處理轉碼的。它會把我們的 js 代碼，抽象成 ast，即 abstract syntax tree 的縮寫，是源代碼的抽象語法結構的樹狀表現形式。我們可以理解為，它定義的一種分析 js 語法的樹狀結構。也就是說 es6 的新語法，跟老語法是不一樣的，那我們怎么去定義這個語法呢。所以必須要先轉成 ast，去發現這個語法的 kind，分別做對應的處理，才能轉化成 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)

反轉，你把 ast 傳入，解析為 code 代碼。

options

提供命令行運行 babel。也就是你可以 babel filename 去對文件轉碼。
安裝的話

npm install --save-dev babel-cli

npm isntall babel-cli -g

使用對應就是

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

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

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

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

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

(function(module, exports, __webpack_require__) {

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

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

})

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

使用：

執行 babel-external-helpers 生成 helpers.js 文件，

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

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

安裝 plugin

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

然后在 babel 的配置文件加入

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

入口文件引入 helpers.js

require("./helpers.js");

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

也是 babel-cli 下面的一個 command，主要是實現了 node 執行腳本和命令行寫代碼的能力。舉兩個栗子就清楚了。

執行腳本

node 環境肯定是不支持 jsx 的

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

console.log(elements);

執行 test.js，會報錯，不認識這個語法。

node test.js //報錯

但是使用 babel-node 就可以。

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

--presets react 是參數，等同于

{
  "presets": ["react"]
}

執行正常。

node 命令行寫代碼

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

寫個解構賦值的，直接運行 node，不支持。

運行 node_modules/.bin/babel-node --presets env

得到 a 的 value 是 1。

通過栗子基本已經介紹了 babel-node 的用法了，就是方便我們平常開發時候，寫一些腳本的。所以它不適用于生產環境。另外，babel-node 已經內置了 polyfill，并依賴 babel-register 來編譯腳本。好，那 babel-register 是什么呢

npm install babel-register --save-dev

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

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

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

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

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

// 執行
$ node register.js

它的特點就是實時編譯，不需要輸出文件，執行的時候再去編譯。所以它很適用于開發。總結一下就是，多用在 node 跑程序，做實時編譯用的，通常會結合其他插件作編譯器使用，比如 mocha 做測試的時候。

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

npm install babel-runtime --save

這個包很簡單，就是引用了 core-js 和 regenerator，然后生產環境把它們編譯到 dist 目錄下，做了映射，供使用。那么什么是 core-js 和 regenerator 呢。
首先我們要知道上面提到的 babel-core 是對語法進行 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 的組合式標準化庫，它包含 es5 （e.g: object.freeze）, es6的 promise，symbols, collections, iterators, typed arrays， es7+提案等等的 polyfills 實現。也就是說，它幾乎包含了所有 JavaScript 最新標準的墊片。不過為什么它不把 generator 也實現了...