如何区分 babel polyfill 和 transform-runtime
如何区分 babel polyfill 和 transform-runtime
官方文档上
Runtime transform
Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals
从最终的行为来解释就是说babel引入了helper工具函数自动来执行polyfill并且不污染全局作用于，采用require的方式。
This plugin is recommended in a library/tool.
推荐在工具库中使用。
NOTE: Instance methods such as “foobar”.includes(“foo”) will not work since that would require modification of existing built-ins (Use babel-polyfill for that).
同时该插件并不会转换诸如数组的includes方法
polyfill
This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-node
polyfill 本质上就是一个降级方案，它作用在全局，将你的ES6语法做转换。
差异
- 都做转换
- 但是polyfill转换的东西更多更全面
- 而runtime仅仅转换一些语法，类似数组的API是不做转换的
- polyfill作用在全局
- 而runtime则是通过引用模块的方式来实现
- 那些需要修改内置api才能达成的功能，譬如：扩展String.prototype，给上面增加includes方法，就属于修改内置API的范畴，这是polyfill来做的
不使用transform-runtime转换async/await
"use strict";
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
_asyncToGenerator(regeneratorRuntime.mark(function _callee() {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return loadStory();
case 2:
console.log("Yey, story successfully loaded!");
case 3:
case "end":
return _context.stop();
}
}
}, _callee, this);
}))();使用transform-runtime 转换async/await
"use strict";
var _regenerator = require("babel-runtime/regenerator");
var _regenerator2 = _interopRequireDefault(_regenerator);
var _asyncToGenerator2 = require("babel-runtime/helpers/asyncToGenerator");
var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee() {
return _regenerator2.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return loadStory();
case 2:
console.log("Yey, story successfully loaded!");
case 3:
case "end":
return _context.stop();
}
}
}, _callee, this);
}))();这里可以看到两者的区别在于，使用了transform-runtime 之后 babel会自动引入模块的方式来实现es5的写法，可以看出是利用了babel的工具函数，工具函数中把Promise都实现了一遍。
而不用 transform-runtime 的时候，仅仅是使用 Promise 来实现 async/await 但是并未考虑对 Promise 做转换。 总结：
- 具体项目还是需要使用 babel-polyfill，只使用 babel-runtime 的话，实例方法不能正常工作（例如 “foobar”.includes(“foo”)）。
- JavaScript 库和工具可以使用 babel-runtime，在实际项目中使用这些库和工具，需要该项目本身提供 polyfill。
- 单独的库如果仅仅是转换ES6语法，那么也可以不使用runtime，babel本身就是会自带这部分的转换的。