Runtime transform/runtime 轉化器詳解

Runtime transform 運行時編譯es6

入口文件引用做爲輔助和內建，自動添加墊片到你的當前代碼模塊而非全局

這個插件建議放在 library/tool中

注意：
實例方法，例如"foobar".includes("foo")將不可以使用，由於它將修正內置的墊片。

爲何使用它 why

Babel對經常使用的函數使用很是小的輔助（內置的墊片比較少），例如_extend。默認狀況下它將會添加到每一個引用的文件。這種重複有時候是很是不必的。特別是你的應用分散在不少文件中。

這是transform-runtime插件之因此產生的緣由：全部的這些輔助（墊片）將會引用babel-runtime來避免編譯時重複。runtime將會編譯到你的build中。

另外一個目的是，這個轉換器爲你的代碼建立了一個沙盒環境。若是你使用babel-polyfill而且把它內置提供promise,set,map這樣的對象或功能，他們將會污染全局環境。也許在一個應用中或者命令行工具中沒問題，可是若是你的代碼是個庫，你想發佈給其餘人使用，由於使用的人可能在各類各樣的執行環境中，因此可能致使錯誤，不能執行。

轉換器transformer會將這些內置（墊片）設置別名到core-js中，所以你能夠不使用require來無縫的使用（墊片中的對象和方法）。

如何生效和工做，請看技術細節

安裝

注意：生產版本(Production) vs 開發版本(development)依賴

在大多數狀況下，你須要安裝babel-plugin-transform-runtime做爲開發版本的依賴（設置--save-dev）。

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

而且babel-runtime做爲生產版本依賴（設置 --save）

npm install --save babel-runtime

轉換器插件通常只用在開發時，而裏面的實際墊片(runtime itself)的代碼在你部署或發佈庫時是須要放到其中的。

請看下面的例子

---

用法

經過.babelrc（推薦）

把下面的代碼添加到你的babelrc文件中（這裏說的是兩種狀況）：

默認設置選項時的寫法

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

使用本身設置設置

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

經過命令行(CLI)

babel --plugins transform-runtime script.js

經過Node 接口 (Node API)

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

選項/設置

輔助(helpers)

默認值是:true

表示是否開啓內聯的babel helpers(即babel或者環境原本的存在的墊片或者某些對象方法函數)(clasCallCheck,extends,etc)在調用模塊名字(moduleName)時將被替換名字。

查看詳情

墊片/polyfill

默認值是:`true'

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

從新生成/regenerator

默認值是:true

是否開啓generator函數轉換成使用regenerator runtime來避免污染全局域。

查看詳情

模塊名字/moduleName

默認值:babel-runtime

當調用輔助（內置墊片）設置模塊（module）名字/路徑.

例子：
json

{
  "moduleName": "flavortown/runtime"
}

javascript

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

技術細節/Techincal details

runtime轉換器插件主要作了三件事：

• 當你使用generators/async方法、函數時自動調用babel-runtime/regenerator

• 當你使用ES6 的Map或者內置的東西時自動調用babel-runtime/core-js

• 移除內聯babel helpers並替換使用babel-runtime/helpers來替換

總的來講一句話，你可使用內置的一些東西例如Promise,Set,Symbol等，就像使用無縫的使用polyfill,來使用babel 特性，而且無全局污染、極高代碼庫適用性。

再生器別名 Regenerator aliasing

不管你何時使用generator函數或者異步函數（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);
}

這種是不太理想的。由於你regenerator運行時會污染全局域的。
做爲替代你須要runtime轉換器來編譯成：

"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時不會污染當前的全局環境。

core-js的別名化/core-js aliasing

有時你想去使用內置的的東西(Promise,Set,Map,etc)。一般狀況下你會使用一個全局的墊片。
runtime轉換器所作的是轉換成以下：

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));

這意味着你能夠無縫的使用本地內置的方法而不用考慮是來自墊片仍是本地。。
警告,實例方法將不能使用，例如"foobar".includes('foo')

輔助重命名 / Helper aliasing

一般babel會把輔助放在文件的頂部作一些經常使用任務來避免重複導入。
有時這些輔助的體積有點大而且不須要的沒有用的東西也在其中。runtime轉換器把全部的輔助轉換到一個模塊中（按他的意思是說只是把用到的轉換到其中）。

以下演示：

class Person {
}

通常的轉化成（即不是用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轉化器轉化成：

"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);
};