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