babel-polyfill & babel-runtime & babel-preset-env

babel-preset-env和plugin-transform-runtime區別

使用 @babel/plugin-transform-runtime 編譯後的程式碼和之前的 @babel/preset-env 編譯結果不一樣，
它使用了幫助函數, 並且賦予了別名 ， 抽出為公共方法， 實現復用。 比如它用了 _Promise 代替了 new Promise ， 從而避免了創建全局對象

preset-env 和 plugin-transform-runtime同時使用

useage 和 @babel/runtime 同時使用的情況下比較智慧， 並沒有引入重複的 polyfill

個人分析原因應該是： babel 的 plugin 比 prset 要先執行， 所以preset-env 得到了 @babel/runtime 使用幫助函數包裝後的程式碼，而 useage 又是檢測程式碼使用哪些新特性來判斷的， 所以它拿到手的只是一堆 幫助函數， 自然沒有效果了

.babelrc

{
  "presets": [
    ["@babel/preset-env", 
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    [ 
      "@babel/plugin-transform-runtime", {
        "corejs": 3
      }
    ]
  ]
}

entry 和 @babel/runtime

跟 useage 的情況不一樣， entry 模式下， 在經過 @babel/runtime 處理後不但有了各種幫助函數還引入了許多polyfill， 這就會導致打包體積無情的增大

個人分析: entry 模式下遭遇到入口的 import "core-js" 及就立即替換為當前目標瀏覽器下所需的所有 polyfill, 所以也就跟 @babel/runtime 互不衝突了， 導致了重複引入程式碼的問題， 所以這兩種方式千萬不要一起使用， 二選一即可

{
  "presets": [
    ["@babel/preset-env", 
      {
        "useBuiltIns": "entry"
      }
    ]
  ],
  "plugins": [
    [ 
      "@babel/plugin-transform-runtime", {
        "corejs": 3
      }
    ]
  ]
}

@babel/plugin-transform-runtime默認情況下安裝@babel/runtime這個庫，即corejs為false時使用；
當corejs設置為2時，需要安裝使用@babel/runtime-corejs2。
runtime和runtime-corejs2這兩個庫唯一的區別是，corejs2這個庫增加了對core-js這個庫的依賴，
而core-js是用來對ES6各個語法polyfill的庫，所以在corejs為false的情況下，只能做語法的轉換，並不能polyfill任何api。

總結

1. @babel/preset-env 擁有根據 useBuiltIns 參數的多種polyfill實現，優點是覆蓋面比較全（entry）， 缺點是會污染全局， 推薦在業務項目中使用

   • entry 的覆蓋面積全， 但是打包體積自然就大，
   • useage 可以按需引入 polyfill, 打包體積就小， 但如果打包忽略node_modules 時如果第三方包未轉譯則會出現兼容問題
2. @babel/runtime 在 babel 7.4 之後大放異彩， 利用 corejs 3 也實現了各種內置對象的支援， 並且依靠 @babel/plugin-transform-runtime 的能力，沙箱墊片和程式碼復用， 避免幫助函數重複 inject 過多的問題， 該方式的優點是不會污染全局， 適合在類庫開發中使用

   上面 1， 2 兩種方式取其一即可， 同時使用沒有意義, 還可能造成重複的 polyfill 文件

對比以上三種方案，我們得出以下結論

方案沒有絕對的優劣，在開發過程中還是要根據實際情況靈活運用。

幾個包的包含關係

   babel-polyfill僅僅是引用core-js、regenerator-runtime這兩個npm包。

   @babel/runtime包含兩個文件夾：helpers（定義了一些處理新的語法關鍵字的幫助函數）、regenerator（僅僅是引用regenerator-runtime這個npm包）。

   @babel/runtime-corejs2包含三個文件夾：core-js（引用core-js這個npm包）、helpers（定義了一些處理新的語法關鍵字的幫助函數）、regenerator（僅僅是引用regenerator-runtime這個npm包）。

   可以看出，@babel/runtime-corejs2≈@babel/runtime + babel-polyfill：

   @babel/runtime只能處理語法關鍵字，而@babel/runtime-corejs2還能處理新的全局變數（例如，Promise）、新的原生方法（例如，String.padStart ）；

   使用了@babel/runtime-corejs2，就無需再使用@babel/runtime了。