Babel transform-runtime
注意:例如 "foobar".includes("foo") 等实例将不起作用,因为这需要现有的内置(此时使用 )。
为什么?
Babel 使用了非常小的 helpers 来实现诸如 _extend 等常用。认情况下,它将被到每个通过 require 引用它的中。这种重复(操作)有时是不必要的,特别是当你的应用程序被拆分为多个时。
这时则需要使用 transform-runtime:所有的 helper 都会引用模块 babel-runtime,以避免编译的重复问题。这个运行时会被编译到你的构建版本当中。
这个转译器的另外目的就是为你的创建沙盒环境。如果你使用了 ,它提供了诸如 Promise,Set 以及 Map 之类的内置,这些将污染全局作用域。虽然这对于应用程序或命令行工具来说可能是好事,但如果你的打算发布为供其他人使用的库,或你无法完全控制运行的环境,则会成为问题。
转译器将这些内置起了别名 core-js,这样你就可以无缝的使用它们,并且无需使用 polyfill。
请参阅 以更多信息,可以了解它如何工作以及发生转换的类型。
安装
注意 - 生产依赖 vs. 开发依赖
在大多数情况下,你应该安装 babel-plugin-transform-runtime 作为开发依赖(使用 --save-dev)。
npm install --save-dev babel-plugin-transform-runtime
并且将 babel-runtime 作为生产依赖(使用 --save)。
npm install --save babel-runtime
转译通常只用于开发,但你已部署/已发布的依赖于运行时(runtime)。有关更多详细信息,请参阅以下示例。
将以下到你的 .babelrc 中:
未包含选项:
{ "plugins": ["transform-runtime"] }
包含选项:
{ "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"]});
选项
boolean, 认为 true。
是否切换将内联(inline)的 Babel helper(classCallCheck,extends 等)替换为对 moduleName 的。
欲了解更多,请查阅 。
boolean,认为 true。
是否切换新的内置(Promise,Set,Map等)为使用非全局污染的 polyfill。
欲了解更多,请查阅 。
boolean,认为 true。
是否切换 generator 为不污染全局作用域的 regenerator 运行时。
欲了解更多,请查阅 。
string,认为 "babel-runtime"。
当引入 helper 时,设置要使用的模块的/路径。
示例:
{ "moduleName": "flavortown/runtime" }
import extends from 'flavortown/runtime/helpers/extends';
Technical details
runtime 编译器做了以下三件事:
当你使用 generators/async 时,引入 babel-runtime/regenerator 。
引入 babel-runtime/core-js 并映射 ES6 静态和内置。
移除内联的 Babel helper 并使用模块 babel-runtime/helpers 代替。
这意味着什么?基本上,你可以使用诸如 Promise,Set,Symbol 等内置,以及所有需要 polyfill 来完成且不带来全局污染的 Babel ,因此非常适合作为库使用。
确保你引入 babel-runtime 作为依赖。
每当你使用 generator 或 async 时:
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 = _interopefault(_regenerator); function _interopefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var _marked = [foo].map(_regenerator2.default.mark); function foo() { return _regenerator2.default.wrap(function foo$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: case "end": return _context.stop(); } } }, _marked[0], this); }
这意味着你可以使用 regenerator 运行时而不会污染当前环境。
有时你可能想要使用新的内置,例如 Map,Set,Promise 等。使用这些的唯一方式通常是引入污染全局的 polyfill。
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 = _interopefault(_getIterator2); var _promise = require("babel-runtime/core-js/promise"); var _promise2 = _interopefault(_promise); var _symbol = require("babel-runtime/core-js/symbol"); var _symbol2 = _interopefault(_symbol); function _interopefault(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") 等实例将不会正常工作。
通常,Babel 会将 helper 放置在顶部执行通用任务,以避免在中出现重复。有时这些 helper 可能会变得笨重,并且在中不必要的重复。该 runtime 转译器将所有 helper 替换为模块。
这意味着下面的:
class Person {}
通常会变成:
"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 = _interopefault(_classCallCheck2); function _interopefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var Person = function Person() { (0, _classCallCheck3.default)(this, Person); };