摘要：并且作為生產(chǎn)版本依賴設(shè)置轉(zhuǎn)換器插件一般只用在開(kāi)發(fā)時(shí)，而里面的實(shí)際墊片的代碼在你部署或發(fā)布庫(kù)時(shí)是需要放到其中的。轉(zhuǎn)換器所做的是轉(zhuǎn)換成如下添加到這意味著你可以無(wú)縫的使用本地內(nèi)置的方法而不用考慮是來(lái)自墊片還是本地。。

入口文件引用作為輔助和內(nèi)建，自動(dòng)添加墊片到你的當(dāng)前代碼模塊而非全局

這個(gè)插件建議放在 library/tool中

注意：
實(shí)例方法，例如"foobar".includes("foo")將不能夠使用，因?yàn)樗鼘⑿拚齼?nèi)置的墊片。

Babel對(duì)常用的函數(shù)使用非常小的輔助（內(nèi)置的墊片比較少），例如_extend。默認(rèn)情況下它將會(huì)添加到每個(gè)引用的文件。這種重復(fù)有時(shí)候是非常沒(méi)必要的。特別是你的應(yīng)用分散在很多文件中。

這是transform-runtime插件之所以產(chǎn)生的原因：所有的這些輔助（墊片）將會(huì)引用babel-runtime來(lái)避免編譯時(shí)重復(fù)。runtime將會(huì)編譯到你的build中。

另一個(gè)目的是，這個(gè)轉(zhuǎn)換器為你的代碼創(chuàng)建了一個(gè)沙盒環(huán)境。如果你使用babel-polyfill并且把它內(nèi)置提供promise,set,map這樣的對(duì)象或功能，他們將會(huì)污染全局環(huán)境。也許在一個(gè)應(yīng)用中或者命令行工具中沒(méi)問(wèn)題，但是如果你的代碼是個(gè)庫(kù)，你想發(fā)布給其他人使用，因?yàn)槭褂玫娜丝赡茉诟鞣N各樣的執(zhí)行環(huán)境中，所以可能導(dǎo)致錯(cuò)誤，不能執(zhí)行。

轉(zhuǎn)換器transformer會(huì)將這些內(nèi)置（墊片）設(shè)置別名到core-js中，因此你可以不使用require來(lái)無(wú)縫的使用（墊片中的對(duì)象和方法）。

如何生效和工作，請(qǐng)看技術(shù)細(xì)節(jié)

注意：生產(chǎn)版本(Production) vs 開(kāi)發(fā)版本(development)依賴

在大多數(shù)情況下，你需要安裝babel-plugin-transform-runtime作為開(kāi)發(fā)版本的依賴（設(shè)置--save-dev）。

npm install --save-dev babel-plugin-transform-runtime

并且babel-runtime作為生產(chǎn)版本依賴（設(shè)置 --save）

npm install --save babel-runtime

轉(zhuǎn)換器插件一般只用在開(kāi)發(fā)時(shí)，而里面的實(shí)際墊片(runtime itself)的代碼在你部署或發(fā)布庫(kù)時(shí)是需要放到其中的。

請(qǐng)看下面的例子

把下面的代碼添加到你的babelrc文件中（這里說(shuō)的是兩種情況）：

默認(rèn)設(shè)置選項(xiàng)時(shí)的寫(xiě)法

{
  "plugins": ["transform-runtime"]
}

使用自己設(shè)置設(shè)置

{
  "plugins": [
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
}

babel --plugins transform-runtime script.js

require("babel-core").transform("code",{
    plugins:["transform-runtime"]
})

默認(rèn)值是:true

表示是否開(kāi)啟內(nèi)聯(lián)的babel helpers(即babel或者環(huán)境本來(lái)的存在的墊片或者某些對(duì)象方法函數(shù))(clasCallCheck,extends,etc)在調(diào)用模塊名字(moduleName)時(shí)將被替換名字。

查看詳情

默認(rèn)值是:`true"

表示是否把內(nèi)置的東西(Promise,Set,Map,tec)轉(zhuǎn)換成非全局污染墊片。
查看詳情

默認(rèn)值是:true

是否開(kāi)啟generator函數(shù)轉(zhuǎn)換成使用regenerator runtime來(lái)避免污染全局域。

查看詳情

默認(rèn)值:babel-runtime

當(dāng)調(diào)用輔助（內(nèi)置墊片）設(shè)置模塊（module）名字/路徑.

例子：
json

{
  "moduleName": "flavortown/runtime"
}

javascript

import extends from "flavortown/runtime/helpers/extends";

runtime轉(zhuǎn)換器插件主要做了三件事：

當(dāng)你使用generators/async方法、函數(shù)時(shí)自動(dòng)調(diào)用babel-runtime/regenerator

當(dāng)你使用ES6 的Map或者內(nèi)置的東西時(shí)自動(dòng)調(diào)用babel-runtime/core-js

移除內(nèi)聯(lián)babel helpers并替換使用babel-runtime/helpers來(lái)替換

總的來(lái)說(shuō)一句話，你可以使用內(nèi)置的一些東西例如Promise,Set,Symbol等，就像使用無(wú)縫的使用polyfill,來(lái)使用babel 特性，并且無(wú)全局污染、極高代碼庫(kù)適用性。

無(wú)論你什么時(shí)候使用generator函數(shù)或者異步函數(shù)（async function).

function* foo(){

}

下面的將被生成：

"use strict";

var _marked = [foo].map(regeneratorRuntime.mark);

function foo() {
  return regeneratorRuntime.wrap(function foo$(_context) {
    while (1) switch (_context.prev = _context.next) {
      case 0:
      case "end":
        return _context.stop();
    }
  }, _marked[0], this);
}

這種是不太理想的。因?yàn)槟鉹egenerator運(yùn)行時(shí)會(huì)污染全局域的。
作為替代你需要runtime轉(zhuǎn)換器來(lái)編譯成：

"use strict";

var _regenerator = require("babel-runtime/regenerator");

var _regenerator2 = _interopRequireDefault(_regenerator);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _marked = [foo].map(_regenerator2.default.mark);

function foo() {
  return regeneratorRuntime.wrap(function foo$(_context) {
    while (1) switch (_context.prev = _context.next) {
      case 0:
      case "end":
        return _context.stop();
    }
  }, _marked[0], this);
}

這意味著在使用regenerator時(shí)不會(huì)污染當(dāng)前的全局環(huán)境。

有時(shí)你想去使用內(nèi)置的的東西(Promise,Set,Map,etc)。通常情況下你會(huì)使用一個(gè)全局的墊片。
runtime轉(zhuǎn)換器所做的是轉(zhuǎn)換成如下：

var sym = Symbol();

var promise = new Promise;

console.log(arr[Symbol.iterator]());

添加到

"use strict";

var _getIterator2 = require("babel-runtime/core-js/get-iterator");

var _getIterator3 = _interopRequireDefault(_getIterator2);

var _promise = require("babel-runtime/core-js/promise");

var _promise2 = _interopRequireDefault(_promise);

var _symbol = require("babel-runtime/core-js/symbol");

var _symbol2 = _interopRequireDefault(_symbol);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var sym = (0, _symbol2.default)();

var promise = new _promise2.default();

console.log((0, _getIterator3.default)(arr));

這意味著你可以無(wú)縫的使用本地內(nèi)置的方法而不用考慮是來(lái)自墊片還是本地。。
警告,實(shí)例方法將不能使用，例如"foobar".includes("foo")

通常babel會(huì)把輔助放在文件的頂部做一些常用任務(wù)來(lái)避免重復(fù)導(dǎo)入。
有時(shí)這些輔助的體積有點(diǎn)大并且不需要的沒(méi)有用的東西也在其中。runtime轉(zhuǎn)換器把所有的輔助轉(zhuǎn)換到一個(gè)模塊中（按他的意思是說(shuō)只是把用到的轉(zhuǎn)換到其中）。

如下演示：

class Person {
}

一般的轉(zhuǎn)化成（即不是用runtime）：

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Person = function Person() {
  _classCallCheck(this, Person);
};

runtime轉(zhuǎn)化器轉(zhuǎn)化成：

"use strict";

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Person = function Person() {
  (0, _classCallCheck3.default)(this, Person);
};