快捷導(dǎo)航

詳解如何添加babel?polyfill

更新時間：2023年06月29日 10:38:38 作者：時傾

這篇文章主要介紹了詳解vue如何添加babel?polyfill實現(xiàn)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

由于 Babel 7.4 之后不再推薦使用 @babel/polyfill，而 @babel/preset-env 和 plugin-transform-runtime 二者都可以設(shè)置 corejs 來處理 polyfill。

@babel/polyfill廢棄的主要原因有：

此包僅僅是引入了 stable core-js 和 regenerator-runtime/runtime，其中后者可以使用插件 @babel/plugin-transform-regenerator 代替。
此包不能從core-js@2 平滑過渡到 core-js@3。

Babel 簡介

簡單來說，Babel 是一個編譯器，主要用于將采用 ECMAScript 2015+ 語法編寫的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法，以便能夠運行在新舊版本的瀏覽器等各個環(huán)境中。而 Babel 代碼轉(zhuǎn)換功能以 plugin 的方式實現(xiàn)，plugin 就是小型的 JavaScript 程序。

preset可以被看作是一組 Babel 插件或 options 配置的可共享模塊。

plugins 在 presets 前運行；
plugins 從前往后順序執(zhí)行；
presets 根據(jù)排列順序倒序執(zhí)行；

babel 主要實現(xiàn)的兩個功能：

轉(zhuǎn)換新語法。將新版 js 語法用舊版語法實現(xiàn)，從而在對應(yīng)環(huán)境中運行，比如箭頭函數(shù)；
轉(zhuǎn)換新 API。為舊版運行時打補丁(也被稱為polyfill)，從而使用在新版 js 中定義但在舊版運行時提供的功能，包括三類：
- 新定義的內(nèi)置對象，例如 Promise
- 原有內(nèi)置對象新添加的靜態(tài)方法，例如 Array.from
- 原有內(nèi)置對象新添加的實例方法，例如 Array.prototype.includes

preset-env

preset-env 既可以轉(zhuǎn)換新語法，也可以通過配置轉(zhuǎn)換新的 API。preset-env 的 polyfill 會污染全局環(huán)境。

target

這個字段可以填寫 browserslist 的查詢字符串，官方推薦使用 .browserslistrc 文件去指明編譯的 target，這個配置文件還可以和autoprefixer、stylelint等工具一起共享配置。所以不推薦在.babelrc的preset-env配置中直接使用targets進行配置。

如果需要單獨在這里配置targets的話，preset-env中指明ignoreBrowserslistConfig為true則忽略.browserslistrc的配置項。

useBuiltIns

是否使用其polyfill功能（全局環(huán)境的core-js）。有三個值：

false：默認值。在不主動import的情況下不使用preset-env來實現(xiàn)polyfills，只使用其默認的語法轉(zhuǎn)換功能。如果使用默認值false，則應(yīng)該避免在入口文件引入polyfill，使得打包體積過大。

entry：需要手動在入口處引入 polyfill，根據(jù)瀏覽器目標環(huán)境(targets)的配置，引入全部瀏覽器暫未支持的 polyfill模塊，無論在項目中是否使用到。

import "core-js/proposals/string-replace-all"

usage：不需要手動在入口文件引入polyfill，Babel將會根據(jù)代碼使用情況自動注入polyfill，如此一來在打包的時候?qū)鄬Φ販p少打包體積。

corejs

配置core-js，默認值"2.0"。此選項僅在與 useBuiltIns: usage 或 useBuiltIns: entry 一起使用時有效。

core-js: JavaScript 的模塊化標準庫，包含 Promise、Symbol、Iterator和許多其他的特性，它可以讓你僅加載必需的功能。

version: 【string】版本號；
proposals: 【boolean】是否實現(xiàn)提案中的特性；

//?.babelrc
{
  "presets":?[????
    [??????
      "@babel/preset-env",??????
      {????????
        "targets":?{??????????
          "chrome":?"80"?//?推薦使用?.browserslistrc????????
        },????????
        "useBuiltIns":?"usage",????????
        "corejs":?{??????????
          "version":?3,?//?2?和?3?版本都需要手動安裝庫：yarn?add?core-js@3?
          "proposals":?false????????
        }??????
      }????
    ]??
  ]
}

plugin-transform-runtime

plugin-transform-runtime 主要做了三件事：

當開發(fā)者使用異步或生成器的時候，自動引入@babel/runtime/regenerator，開發(fā)者不必在入口文件做額外引入；
動態(tài)引入 polyfill，提供沙盒環(huán)境，避免全局環(huán)境的污染；

如果直接導(dǎo)入 core-js 或 @babel/polyfill 以及它提供的 Promise、Set 和 Map 等內(nèi)置組件，這些都會污染全局。雖然這不影響應(yīng)用程序或命令行工具，但如果代碼是要發(fā)布給其他人使用的庫，或者無法準確控制代碼將運行的環(huán)境，則會出現(xiàn)問題。
所有 helpers 幫助模塊都將引用模塊 @babel/runtime，以避免編譯輸出中的重復(fù)，減小打包體積；

corejs

配置值：false, 2, 或者 { version: number, proposals: boolean }，默認值 false。

corejs	安裝建議
false	npm install --save @babel/runtime
2	npm install --save @babel/runtime-corejs2
3	npm install --save @babel/runtime-corejs3

helpers

配置值 boolean 類型，默認值 true。
是否用對 moduleName 的調(diào)用替換內(nèi)聯(lián) Babel 幫助程序（classCallCheck、extends等）。

regenerator

配置值 boolean 類型，默認值 true。
是否將生成器函數(shù)轉(zhuǎn)換為使用不污染全局范圍的再生器運行時。

useESModules

配置值 boolean 類型，默認值 false。
啟用后，轉(zhuǎn)換將使用幫助程序，而不是@babel/plugin-transform-modules-commonjs。這允許在 webpack 等模塊系統(tǒng)中進行較小的構(gòu)建，因為它不需要保留 commonjs 語義。

使用場景與實例分析

@babel/preset-env 和 plugin-transform-runtime 二者都可以設(shè)置使用 corejs 來處理polyfill，二者各有使用場景，在項目開發(fā)和類庫開發(fā)的時候可以使用不同的配置。

不要同時為二者配置 core-js，以免產(chǎn)生復(fù)雜的不良后果。

項目開發(fā)

useBuiltIns 使用 usage。plugin-transform-runtime 只使用其移除內(nèi)聯(lián)復(fù)用的輔助函數(shù)的特性，減小打包體積。

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

類庫開發(fā)

類庫開發(fā)盡量不使用污染全局環(huán)境的 polyfill，因此 @babel/preset-env 只發(fā)揮語法轉(zhuǎn)換的功能， polyfill 由 plugin-transform-runtime 來處理，推薦使用 core-js@3，并且不使用未進入規(guī)范的特性。

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": {
          "version": 3,
          "proposals": false
        },
        "useESModules": true
      }
    ]
  ]
}

打包分析

測試代碼如下：

// syntax
class Person {}
typeof Person
const array = [1, 2, 3]
const fun = () => {}
// api
const a = Array.isArray([3, 5, 8])
const b = array.map(itm => itm * 2)
const p1 = Promise.resolve(true)
const p2 = Promise.reject(false)
Promise.allSettled([p1, p2]).then(() => {
  console.log('then')
}).catch(() => {
  console.log('catch')
}).finally(() => {
  console.log('finally')
})

通過 preset-env 配置 core-js:

"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
require("core-js/modules/es.array.is-array.js");
require("core-js/modules/es.array.map.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.promise.js");
require("core-js/modules/es.promise.finally.js");
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/esnext.promise.all-settled.js");
require("core-js/modules/es.string.iterator.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
// syntax
var Person = /*#__PURE__*/(0, _createClass2["default"])(function Person() {
  (0, _classCallCheck2["default"])(this, Person);
});
(0, _typeof2["default"])(Person);
var array = [1, 2, 3];
var fun = function fun() {}; // api
var a = Array.isArray([3, 5, 8]);
var b = array.map(function (itm) {
  return itm * 2;
});
var p1 = Promise.resolve(true);
var p2 = Promise.reject(false);
Promise.allSettled([p1, p2]).then(function () {
  console.log('then');
})["catch"](function () {
  console.log('catch');
})["finally"](function () {
  console.log('finally');
});

通過 plugin-transform-runtime 配置 core-js:

"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
// syntax
var Person = /*#__PURE__*/(0, _createClass2["default"])(function Person() {
  (0, _classCallCheck2["default"])(this, Person);
});
(0, _typeof2["default"])(Person);
var array = [1, 2, 3];
var fun = function fun() {}; // api
var a = (0, _isArray["default"])([3, 5, 8]);
var b = (0, _map["default"])(array).call(array, function (itm) {
  return itm * 2;
});
var p1 = _promise["default"].resolve(true);
var p2 = _promise["default"].reject(false);
_promise["default"].allSettled([p1, p2]).then(function () {
  console.log('then');
})["catch"](function () {
  console.log('catch');
})["finally"](function () {
  console.log('finally');
});

通過打包后代碼分析，以 preset-env 的方式會引入不必須的 polyfill，以 plugin-transform-runtime 的方式只會引入當前頁面所需的 polyfill。

以上就是詳解如何添加 babel polyfill的詳細內(nèi)容，更多關(guān)于添加 babel polyfill的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: