关于babel-polyfill和babel-runtime

Babel 默认只转换新的 JavaScript语法，而不转换新的API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法都不会转译。若是想使用这些新的对象和方法，必须使用 polyfill。提供polyfill的有2个插件：babel-runtime和babel-polyill。

关于babel-runtime

babel 对一些公共方法使用了很是小的辅助代码，好比 _extend。默认状况下会被添加到每个须要它的文件中能够引入 babel runtime 做为一个独立模块，来避免重复引入。 须要

yarn add babel-plugin-transform-runtime --dev 
复制代码

来把它包含到你的项目中，也要使用

yarn add babel-runtime --dev 
复制代码

把 babel-runtime 安装为一个依赖

翻译自官网： runtime transformer plugin作3件事:

1. 当使用generators/async功能时，自动添加babel-runtime/regenerator
2. 自动添加babel-runtime/core-js而且映射ES6静态方法和内置方法
3. 移除内联的babel帮助代码并使用babel-runtime/helpers模块来替代 简单来讲，基本上你可使用内置函数如Promise,Set,Symbol等；也能够无缝地使用须要polyfill的全部Babel特性，而不会污染全局，对于库来讲很实用。 必定要把babel-runtime做为依赖引入！

babel-polyfill Babel 有一个 polyfill ，它包括 a custom regenerator runtime 和 core-js. babel-polyfill会完整的模拟ES2015+的环境，目标是用于应用中而不是库或工具中。使用babel-node时，它会自动的加载。 这意味你能使用内置的函数如Promise或WeakMap，静态方法如Array.from 或 Object.assign，实例方法如Array.prototype.includes，以及generator函数。为了实现这些方法，它被添加到全局，也被添加到原生的原型上。

若是不想污染全局可使用transform-runtime插件，但这意味着你没法使用上述提到的实例方法。

babel-polyfill babel-plugin-transform-runtime transform-runtime 会自动应用 polyfill，即使没有使用 babel-polyfill

注意：

1. fetch方法不在polyfill中须要单独加载包

yarn add whatwg-fetch
复制代码

关于babel-polyfill和babel-runtime具体用哪些方法是有区别的能够查看core-js 2. 总结来讲

// .babelrc
{
  "presets": ["env"],
  "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}
复制代码

这种配置下，runtime不会添加任何polyfill。

// .babelrc
{
  "presets": ["env"],
  "plugins": ["transform-runtime"],
}

复制代码

只要把polyfill改为true便可，babel会自动识别代码里用到了哪些对象方法，并自动polyfill这些方法。而这实际上是默认开启的,能够写成如上的配置。（如要要支持一些实例方法等仍是须要单独引入对应的polyfill）

babel-polyfill压缩后105kb，压缩前249kb。因此按需加载是更好的方式。

实战中遇到的问题：

1. 使用webpack4的code split功能时，webpack未自动打包promise polyfill transform-runtime只能识别webpack处理前须要自动polyfill的静态方法和内置对象。因此，使用webpack的code split时，promise的polyfill不会自动添加。一种解决方法时手动引入promise的polyfill或者在js代码中添加window.Promise =Promise。这样webpack就能是识别到Promise，并自动添加polyfill