關於@babel/polyfill -- 按需加載

什麼是@babel/polyfill

當babel幫咱們編譯了es6語法以後，經常還會遇到了這樣的錯誤提示，好比咱們在項目中運用了async/await。這時咱們就須要@babel/polyfill爲咱們在全局去注入這些ES6+的變量（或者屬性/方法）。

Babel includes a polyfill that includes a custom regenerator runtime
and core-js. This will emulate a full ES2015+ environment (no < Stage
4 proposals) and is intended to be used in an application rather than
a library/tool. (this polyfill is automatically loaded when using
babel-node). This means you can use new built-ins like Promise or
WeakMap, static methods like Array.from or Object.assign, instance
methods like Array.prototype.includes, and generator functions
(provided you use the regenerator plugin). The polyfill adds to the
global scope as well as native prototypes like String in order to do
this.

他會幫咱們模擬一個es6+的環境，而後咱們就能夠愉快的使用es6+中的內置方法(Promise, WeakMap); 靜態方法(Array.from, Object.assign); 原型方法(如Array.prototype.includes, generator)。

使用

咱們只須要安裝
npm install --save @babel/polyfill

而後在項目中引用進來就能夠
require("@babel/polyfill"); or import "@babel/polyfill";
或者在webpack裏配置入口的時候加上去
main: ['@babel/polyfill', './src/main.js']

然而這樣會使咱們的項目代碼變得龐大
before👇

after👇

看着都嚇人，畢竟把es6+全部的東西都引入進來了，然而咱們在項目中其實並無用到全部的語法，這時咱們就能夠按需引入@babel/polyfill。

按需引入

按官方文檔能夠用useBuiltIns的方法實現按需加載，只需在.babelrc中增長環境配置以下👇

{
  "presets": [["@babel/preset-env", {
    "useBuiltIns": "usage" 
  }]],
}

然而問題也出現了，webpack報了這樣的警告👇

倒不是沒有安裝corejs, @babel/polyfill就已經包含了他，其實就是咱們配置少了corejs， 修改以下👇

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

這樣就ok了，項目中我只使用了generator， 因此只會把這部分的給引用進來。