詳解polyfills如何按需加載及場(chǎng)景示例詳解

更新時(shí)間：2023年02月05日 15:30:43 作者：為了摸魚(yú)而戰(zhàn)

這篇文章主要為大家介紹了詳解polyfills如何按需加載及場(chǎng)景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

青銅時(shí)代

最使前端頭痛的問(wèn)題，莫過(guò)于瀏覽器兼容性，無(wú)論是js，還是css都要考慮瀏覽器兼容性問(wèn)題，在webpack出來(lái)之前，這無(wú)非是一個(gè)非常頭疼的問(wèn)題，查到一個(gè)兼容性問(wèn)題，查找很多資料，解決一下，再出來(lái)一個(gè)問(wèn)題又要花很長(zhǎng)時(shí)間解決一下，這無(wú)疑要花費(fèi)很長(zhǎng)時(shí)間，這無(wú)疑浪費(fèi)了寶貴的摸魚(yú)時(shí)間。

火槍時(shí)代

webpack出來(lái)之后，效率提高幾倍，但是有一個(gè)問(wèn)題就是配置復(fù)雜，可能有的朋友包括我在內(nèi)，到現(xiàn)在也沒(méi)弄懂 @babel/preset-env,@babel/polyfills, @babel/plugin-transform-runtime的區(qū)別，以及如何配置才是最優(yōu)解

webpack添加babel-loader

首先安裝@babel/core,@babel/cli,babel-loader包

index.js 內(nèi)容

const fn = () => {
  console.log('ws');
}
const array = [1, 2, 3, 4];
array.includes(1);

package.json 編譯·

  "scripts": {
    "build": "babel src --out-dir build"
  },

然后進(jìn)行編譯

const fn = () => {
  console.log('ws');
};
const array = [1, 2, 3, 4];
array.includes(1);

發(fā)現(xiàn)和我代碼幾乎一樣，沒(méi)有啥改變

在加入plugins測(cè)試之前我們需要知道一些前置知識(shí)，babel將ECMAScript 2015+ 版本的代碼分為了兩種情況處理：

語(yǔ)法層： let、const、class、箭頭函數(shù)等，這些需要在構(gòu)建時(shí)進(jìn)行轉(zhuǎn)譯，是指在語(yǔ)法層面上的轉(zhuǎn)譯
api方法層：Promise、includes、map等，這些是在全局或者Object、Array等的原型上新增的方法，它們可以由相應(yīng)es5的方式重新定義

babel對(duì)這兩種情況的轉(zhuǎn)譯是不一樣的，我們需要給出相應(yīng)的配置。

@babel/preset-env

@babel/preset-env 是把語(yǔ)法轉(zhuǎn)化為當(dāng)前瀏覽器能夠理解的代碼, 注意只是語(yǔ)法層面哦

安裝@babel/preset-env還需要在babel.config.js中進(jìn)行一下配置

module.exports = {
  presets: ["@babel/preset-env"]
}

然后我們看一下打印結(jié)果

"use strict";
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
array.includes(1);

箭頭函數(shù)已經(jīng)進(jìn)行了轉(zhuǎn)化，因?yàn)榧^函數(shù)是語(yǔ)法層面的

@babel/polyfill

@babel/polyfill是把api轉(zhuǎn)化為當(dāng)前瀏覽器能夠理解的代碼,此處是轉(zhuǎn)化的api

庫(kù)的使用需要在index.js中引入@babel/polyfill

import "@babel/polyfill";
const fn = () => {
  console.log('ws');
}
const array = [1, 2, 3, 4];
array.includes(1);

編譯后發(fā)現(xiàn)我們的代碼沒(méi)啥變化，但是確把@babel/polyfill都引了過(guò)來(lái)，要知道@babel/polyfill是非常大的，包括所有的api，這無(wú)疑會(huì)使打包體積變大很多

"use strict";
require("@babel/polyfill");
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
array.includes(1);

這就不是我們想要的，我們只想要array.includes方法呀，我們需要按需加載，而不是加載這么多代碼

別慌，接下來(lái)就會(huì)講到

配置 useBuiltIns

為了解決polyfill按需加載的問(wèn)題, @babel/preset-env集成了polyfill,并且可以通過(guò)配置useBuildIns的方式實(shí)現(xiàn)按需加載

corejs 也要同時(shí)配置，2 的版本可以處理全局對(duì)象，但實(shí)例方法并不處理，所以這里用 3 的版本。

npm install core-js@3

usage 會(huì)根據(jù)配置的瀏覽器兼容，以及你代碼中用到的 API 來(lái)進(jìn)行 polyfill，實(shí)現(xiàn)了按需添加。

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: 'usage',
        corejs: 3,
      }
    ]
  ]
}

此時(shí)再查看我們的打包結(jié)果

"use strict";
require("core-js/modules/es.array.includes.js");
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
array.includes(1);

只引入了array.includes，good

加入 @babel/plugin-transform-runtime

改造上面的例子在index.js再加一些

......
class Person {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(this.name);
  }
}

只轉(zhuǎn)換一個(gè) Person 類，我們看看轉(zhuǎn)換后的文件長(zhǎng)啥樣

"use strict";
require("core-js/modules/es.symbol.to-primitive.js");
require("core-js/modules/es.date.to-primitive.js");
require("core-js/modules/es.symbol.js");
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.number.constructor.js");
require("core-js/modules/es.object.define-property.js");
require("core-js/modules/es.symbol.iterator.js");
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/es.string.iterator.js");
require("core-js/modules/web.dom-collections.iterator.js");
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
require("core-js/modules/es.array.includes.js");
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
array.includes(1);
var Person = /*#__PURE__*/function () {
  function Person(name) {
    _classCallCheck(this, Person);
    this.name = name;
  }
  _createClass(Person, [{
    key: "say",
    value: function say() {
      console.log(this.name);
    }
  }]);
  return Person;
}();

除了require的部分，還多了好多自定義的函數(shù)。同學(xué)們想一想，現(xiàn)在只有一個(gè)index文件需要轉(zhuǎn)換，然而實(shí)際項(xiàng)目開(kāi)發(fā)中會(huì)有大量的需要轉(zhuǎn)換的文件，如果每一個(gè)轉(zhuǎn)換后的文件中都存在相同的函數(shù)，那豈不是浪費(fèi)了，怎么才能把重復(fù)的函數(shù)去掉呢？

plugin-transform-runtime 閃亮登場(chǎng)。

上面出現(xiàn)的_classCallCheck，_defineProperties，_createClass三個(gè)函數(shù)叫做輔助函數(shù)，是在編譯階段輔助 Babel 的函數(shù)。

當(dāng)使用了plugin-transform-runtime插件后，就可以將babel轉(zhuǎn)譯時(shí)添加到文件中的內(nèi)聯(lián)輔助函數(shù)統(tǒng)一隔離到babel-runtime提供的helper模塊中，編譯時(shí)，直接從helper模塊加載，不在每個(gè)文件中重復(fù)的定義輔助函數(shù)，從而減少包的尺寸，下面我們看下效果：

// webpack.config.js
module.exports = {
  presets: [
    [
      "@babel/env",
      {
        useBuiltIns: "usage",
        corejs: { version: 3, proposals: true }
      }
    ]
  ],
  plugins: ["@babel/plugin-transform-runtime"]
};

"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
require("core-js/modules/es.array.includes.js");
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
array.includes(1);
var Person = /*#__PURE__*/function () {
  function Person(name) {
    (0, _classCallCheck2.default)(this, Person);
    this.name = name;
  }
  (0, _createClass2.default)(Person, [{
    key: "say",
    value: function say() {
      console.log(this.name);
    }
  }]);
  return Person;
}();

完美的解決了代碼冗余的問(wèn)題。你們以為這就結(jié)束了嗎，還沒(méi)有。仔細(xì)看到這里的同學(xué)應(yīng)該注意到了雖然上面使用 useBuiltIns 配置項(xiàng)實(shí)現(xiàn)了poilyfill的按需引用，可是他還存在全局變量污染的情況，就好比這句代碼，重寫(xiě)了array的prototype方法，造成了全局污染。

require("core-js/modules/es.array.includes.js");

最后再改造一次babel的配置文件

module.exports = {
  presets: [
    "@babel/preset-env",
  ],
  plugins: [["@babel/plugin-transform-runtime", {
    corejs: 3
  }]]
}

去掉了 @babel/preset-env 的相關(guān)參數(shù)，而給 plugin-transform-runtime 添加了corejs參數(shù)，最終轉(zhuǎn)換后的文件不會(huì)再出現(xiàn)polyfill的require的方法了。而是從引入了core-js-stable從而解決轉(zhuǎn)譯api層出現(xiàn)的全局變量污染

"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
(0, _includes.default)(array).call(array, 1);
var Person = /*#__PURE__*/function () {
  function Person(name) {
    (0, _classCallCheck2.default)(this, Person);
    this.name = name;
  }
  (0, _createClass2.default)(Person, [{
    key: "say",
    value: function say() {
      console.log(this.name);
    }
  }]);
  return Person;
}();

綜上所述，plugin-transform-runtime 插件借助babel-runtime實(shí)現(xiàn)了下面兩個(gè)重要的功能