Babel @babel/polyfil
作者：知否
來源：SegmentFault 思否社區(qū)
Babel 中默認(rèn)只轉(zhuǎn)換新的 JavaScript 句法，例如箭頭函數(shù)、擴(kuò)展運(yùn)算符等。但是不會(huì)轉(zhuǎn)換新的 API，像是Set、Maps、Iterator、Generator 、Symbol、Reflect 等全局對(duì)象，以及一些定義在全局對(duì)象上的方法都不會(huì)進(jìn)行轉(zhuǎn)譯。如果想使用這些新的對(duì)象和方法，則需要為當(dāng)前環(huán)境提供一個(gè) polyfill 墊片。
舉一個(gè)例子，例如 ES6 在 Array 對(duì)象上有一個(gè)新增的 Array.from 方法，因?yàn)檫@個(gè)方法是全局對(duì)象上的方法，所以 Babel 就不會(huì)對(duì)這個(gè)方法進(jìn)行轉(zhuǎn)譯。如果想讓這個(gè)方法運(yùn)行，就要使用 @babel/polyfill 為當(dāng)前環(huán)境提供一個(gè)墊片。
安裝@babel/polyfil
目前最常用的配合 Babel 一起使用的 polyfill 墊片就是 @babel/polyfil，通過改寫全局 prototype 的方式實(shí)現(xiàn)，它會(huì)加載整個(gè) polyfil，針對(duì)編譯的代碼中新的 API 進(jìn)行處理，并且在代碼中插入一些幫助函數(shù)，比較適合單獨(dú)運(yùn)行的項(xiàng)目。
安裝命令如下所示：
$ npm install --save @babel/polyfil
安裝好后我們可以在程序入口文件的頂部引用 @babel/polyfil：：
require('@babel/polyfill')
[].findIndex('babel')
或者使用 ES6 的語(yǔ)法，使用 import 導(dǎo)入：
import '@babel/polyfill'
[].findIndex('babel')
babel-polyfill 解決了 Babel 不轉(zhuǎn)換新 API 的問題，但是直接在代碼中插入幫助函數(shù)，會(huì)導(dǎo)致污染了全局環(huán)境，并且不同的代碼文件中包含重復(fù)的代碼，導(dǎo)致編譯后的代碼體積變大。雖然這對(duì)于應(yīng)用程序或命令行工具來說可能是好事，但如果已有代碼打算發(fā)布為可以供其他人使用的庫(kù)，或我們無法完全控制代碼運(yùn)行的環(huán)境，則會(huì)成為問題。
注意
需要注意的是從 Babel 7.4.0 開始，不再推薦使用 @babel/polyfill 包，而是直接使用 core-js/stable 和 regenerator-runtime/runtime，如下所示：
import "core-js/stable";
import "regenerator-runtime/runtime";
