关于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

转载于:https://juejin.im/post/5b2cc31f51882574d02facff