關於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