babel-polyfill VS babel-runtime

背景

在项目迭代过程当中，由于有兼容 IE 的需求，根据文档使用babel-polyfill和babel-runtime两个插件解决问题。可是对于两者之间的恩怨情仇，却不甚了解，便打算细细探究一番。

关于 Babel

若是咱们没有配置一些规则，Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，好比 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（好比 Object.assign ）都不会转码。 因此，当这样的代码出现时：

const key = 'babel'
const obj = {
    [key]: 'foo',
}
复制代码

Babel 默认会编译成下面的代码

function _defineProperty(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
    } else {
        obj[key] = value;
    }
    return obj;
}

var key = 'babel';
var obj = _defineProperty({}, key, Object.assign({}, { key: 'foo' }));
复制代码

咱们能够看到代码中多了一个名为_defineProperty的帮助函数，可是这个帮助函数仅仅在当前模块中生效，所以其余模块中若是用到了一样的语法，编译后就会出现大量的重复代码。

babel-polyfill

原理是当运行环境中并无实现的一些方法，babel-polyfill 会给其作兼容。 可是这样作也有一个缺点，就是会污染全局变量，并且项目打包之后体积会增大不少，由于把整个依赖包也搭了进去。因此并不推荐在一些方法类库中去使用。

用法

1. `npm install --save babel-polyfill`
2. 在应用的入口引用，以确保它可以最早加载：
`import "babel-polyfill";` 或者
`require("babel-polyfill");`
复制代码

babel-runtime

为了避免污染全局对象和内置的对象原型，可是又想体验使用新鲜语法的快感。就能够配合使用babel-runtime和babel-plugin-transform-runtime。 好比当前运行环境不支持promise，能够经过引入babel-runtime/core-js/promise来获取promise， 或者经过babel-plugin-transform-runtime自动重写你的promise。也许有人会奇怪，为何会有两个runtime插件，实际上是有历史缘由的：刚开始开始只有babel-runtime插件，可是用起来很不方便，在代码中直接引入helper 函数，意味着不能共享，形成最终打包出来的文件里有不少重复的helper代码。因此，Babel又开发了babel-plugin-transform-runtime，这个模块会将咱们的代码重写，如将Promise重写成_Promise（只是打比方），而后引入_Promise helper函数。这样就避免了重复打包代码和手动引入模块的痛苦。

用法

1. `npm install --save-dev babel-plugin-transform-runtime`
2. `npm install --save babel-runtime`
3. 写入 `.babelrc`
复制代码

{
  "plugins": ["transform-runtime"]
}
复制代码

启用插件babel-plugin-transform-runtime后，Babel就会使用babel-runtime下的工具函数，转译代码以下：

'use strict';

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

var key = 'babel';
var obj = (0, _defineProperty3.default)({}, key, 'foo');
复制代码

不足

babel-runtime 不能转码实例方法，好比这样的代码：

'!!!'.repeat(3);
'hello'.includes('h');
复制代码

这只能经过 babel-polyfill 来转码，由于 babel-polyfill 是直接在原型链上增长方法。

And more

随着历史进程的发展，新一代的 babel-prenset-env 很强大，了解一下😜

参考连接

• babel 教程
• Babel 全家桶 · Issue #20 · brunoyang/blog · GitHub
• Runtime transform · Babel
• Polyfill · Babel

自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）