babel polyfills 下載 - babel polyfills 原始碼下載

Babel Polyfills

一組 Babel 插件，可以在編譯的程式碼中使用不同的策略注入不同的 polyfill。此外，該儲存庫還包含一個包，可協助為其他 Polyfill 建立提供者。

該存儲庫實現了 babel/babel#10008 最初提出的內容。

如果您正在尋找一些快速設定範例，或者只是想了解如何遷移您的配置，請查看docs/migration.md 。

用法

主要的 Babel 套件僅轉換 JavaScript語法：您還需要載入一個 polyfill，以使本機函數( Array.prototype.flat ) 或內建物件( Reflect ) 在舊瀏覽器中運作。

最簡單的方法是使用">

 < script src =" https://unpkg.com/[email protected]/minified.js " >  script >

然而，這種簡單的方法可能會包含大量不必要的程式碼。在此儲存庫中實作的 Babel 外掛程式會自動將填滿程式碼注入到您的程式碼中，同時嘗試僅載入真正需要的內容。它根據您的編譯目標和您在程式碼中使用的內容來執行此操作。

這些外掛程式（我們稱之為「polyfill 提供者」）支援不同的注入方法，以便更好地滿足您的需求。

例如，如果你想透過將缺少的函數加入全域物件來將匯入註入到es-shims polyfills，你可以這樣設定 Babel：

配置 輸入代碼 輸出程式碼
{
  "targets" : { "firefox" : 65 },
  "plugins" : [
    [ " polyfill-es-shims " , {
      "method" : " usage-global "
    }]
  ]
}
 Promise . allSettled ( [
  p1 ,
  p2
] ) . finally ( ( ) => {
  console . log ( "Done!" ) ;
} ) ;  {
  console.log("Done!");
});"> import "promise.prototype.finally/auto" ;
import "promise.allsettled/auto" ;

Promise . allSettled ( [
  p1 ,
  p2
] ) . finally ( ( ) => {
  console . log ( "Done!" ) ;
} ) ;如果您想查看更多設定範例，可以查看遷移文件： docs/migration.md 。
如果您有興趣閱讀這些外掛程式支援的所有選項，您可以查看使用文件： docs/usage.md 。
 支援的 Polyfill
聚合物填料 外掛 方法
core-js@2  babel-plugin-polyfill-corejs2  entry-global 、 usage-global和usage-pure
 core-js@3  babel-plugin-polyfill-corejs3  entry-global 、 usage-global和usage-pure
 es-shims  babel-plugin-polyfill-es-shims  usage-global和usage-pure
 regenerator-runtime  babel-plugin-polyfill-regenerator  entry-global 、 usage-global和usage-pure我們將維持對core-js和es-shims的支持，但我們鼓勵您為您自己的 polyfill 或您最喜歡的polyfill 實作一個提供者！我們的目標之一是鼓勵不同的 Polyfill 之間的競爭，以更好地平衡規範合規性和程式碼大小等不同的權衡。
如果你想實現對自訂 polyfill 的支持，可以使用@babel/helper-define-polyfill-provider 。 （ docs/polyfill-provider.md 。） 
注射方法
Polyfill 外掛程式可以公開三種不同的注入方法： entry-global 、 usage-global和usage-pure 。請注意，polyfill 外掛程式不會自動將必要的套件新增到您的依賴項中，因此您必須在package.json中明確列出它們。
所有範例均假設您的目標平台是 Chrome 62。
 entry-global方法以對目標環境不支援的特定功能的匯入來取代整個polyfill的單一簡單導入。當您想要確保每個不支援的函數都可用時，無論您在使用 Babel 編譯的程式碼中使用什麼，它都是最有用的。如果出現以下情況，您可能需要使用此方法：
您沒有編譯您的依賴項，但您要確保它們具有所有必要的填充；
 Babel 的偵測邏輯不夠智能，無法理解你正在使用哪些函數；
您希望擁有一個包含所有 polyfill 的捆綁文件，而無需在程式碼變更時重新產生它。
輸入代碼 輸出程式碼
 import "core-js" ;  import "core-js/modules/es7.array.flat-map.js" ;
import "core-js/modules/es6.array.sort.js" ;
import "core-js/modules/es7.promise.finally.js" ;
import "core-js/modules/es7.symbol.async-iterator.js" ;
import "core-js/modules/es7.string.trim-left.js" ;
import "core-js/modules/es7.string.trim-right.js" ;
import "core-js/modules/web.timers.js" ;
import "core-js/modules/web.immediate.js" ;
import "core-js/modules/web.dom.iterable.js" ;
 usage-global方法將導入註入附加到全域範圍的 polyfill，但僅限於程式碼中使用的不受支援的功能。如果出現以下情況，您可能需要使用此方法：
您需要使程式碼大小盡可能小，並且只包含有效使用的內容；
你的polyfill不支援單一入口點，但它的每個功能都必須單獨載入。
輸入代碼 輸出程式碼
 foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;  [x, x + 1]);
bar.trimLeft();
arr.includes(2);"> import "core-js/modules/es.array.flat-map.js" ;
import "core-js/modules/es.array.unscopables.flat-map.js" ;
import "core-js/modules/es.string.trim-start.js" ;

foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;
 usage-pure方法將導入註入到程式碼中使用的不受支援的功能的 polyfill 中，而不將 polyfill 附加到全域範圍，而是將它們作為普通函數導入。如果出現以下情況，您可能需要使用此方法：
您是一個庫作者，並且不想用您正在加載的填充代碼“污染”全域範圍。
輸入代碼 輸出程式碼
 foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;  [x, x + 1]);
_trimLeftInstanceProperty(bar).call(bar);
arr.includes(2);"> import _flatMapInstanceProperty from "core-js-pure/stable/instance/flat-map.js" ;
import _trimLeftInstanceProperty from "core-js-pure/stable/instance/trim-left.js" ;

_flatMapInstanceProperty ( foo ) . call ( foo , x => [ x , x + 1 ] ) ;
_trimLeftInstanceProperty ( bar ) . call ( bar ) ;
arr . includes ( 2 ) ; 
歷史和動機
在過去的三年半中， @babel/preset-env展示了其在減少套件大小方面的全部潛力，不僅不轉譯支援的語法功能，而且不包含不必要的core-js polyfill。
到目前為止，Babel 提供了三種不同的方式在原始碼中註入core-js polyfill：
透過使用@babel/preset-env的useBuiltIns: "entry"選項，可以為目標瀏覽器本身不支援的每個 ECMAScript 功能注入自安裝的 polyfill；
透過使用@babel/preset-env的useBuiltIns: "usage" ，Babel 只會為不支援的 ECMAScript 功能注入自安裝的 polyfill，但前提是它們實際在輸入原始碼中使用；
透過使用@babel/plugin-transform-runtime ，Babel 將為core-js支援的每個使用的 ECMAScript 功能注入「純」polyfill（與自安裝的不同，它不會污染全域範圍）。這通常由庫作者使用。
我們的舊方法有兩個主要問題：
不可能將@babel/preset-env的targets選項與「純」polyfills 一起使用，因為@babel/plugin-transform-runtime是一個完全獨立的套件。
如果使用者想要 Babel 集成，我們強迫他們使用core-js 。 core-js是優秀且全面的 polyfill，但它並不能滿足我們所有使用者的需求。
透過這個新的軟體包，我們提出了解決這兩個問題的方案，同時仍然保持完全的向後相容性。
想做出貢獻嗎？
請參閱我們的 CONTRIBUTING.md 以開始設定儲存庫。

配置	輸入代碼	輸出程式碼
{ "targets" : { "firefox" : 65 }, "plugins" : [ [ " polyfill-es-shims " , { "method" : " usage-global " }] ] }	Promise . allSettled ( [ p1 , p2 ] ) . finally ( ( ) => { console . log ( "Done!" ) ; } ) ;	{ console.log("Done!"); });"> import "promise.prototype.finally/auto" ; import "promise.allsettled/auto" ; Promise . allSettled ( [ p1 , p2 ] ) . finally ( ( ) => { console . log ( "Done!" ) ; } ) ;

聚合物填料	外掛	方法
`core-js@2`	`babel-plugin-polyfill-corejs2`	`entry-global` 、 `usage-global`和`usage-pure`
`core-js@3`	`babel-plugin-polyfill-corejs3`	`entry-global` 、 `usage-global`和`usage-pure`
`es-shims`	`babel-plugin-polyfill-es-shims`	`usage-global`和`usage-pure`
`regenerator-runtime`	`babel-plugin-polyfill-regenerator`	`entry-global` 、 `usage-global`和`usage-pure`

輸入代碼	輸出程式碼
import "core-js" ;	import "core-js/modules/es7.array.flat-map.js" ; import "core-js/modules/es6.array.sort.js" ; import "core-js/modules/es7.promise.finally.js" ; import "core-js/modules/es7.symbol.async-iterator.js" ; import "core-js/modules/es7.string.trim-left.js" ; import "core-js/modules/es7.string.trim-right.js" ; import "core-js/modules/web.timers.js" ; import "core-js/modules/web.immediate.js" ; import "core-js/modules/web.dom.iterable.js" ;

輸入代碼	輸出程式碼
foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;	[x, x + 1]); bar.trimLeft(); arr.includes(2);"> import "core-js/modules/es.array.flat-map.js" ; import "core-js/modules/es.array.unscopables.flat-map.js" ; import "core-js/modules/es.string.trim-start.js" ; foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;

輸入代碼	輸出程式碼
foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;	[x, x + 1]); _trimLeftInstanceProperty(bar).call(bar); arr.includes(2);"> import _flatMapInstanceProperty from "core-js-pure/stable/instance/flat-map.js" ; import _trimLeftInstanceProperty from "core-js-pure/stable/instance/trim-left.js" ; _flatMapInstanceProperty ( foo ) . call ( foo , x => [ x , x + 1 ] ) ; _trimLeftInstanceProperty ( bar ) . call ( bar ) ; arr . includes ( 2 ) ;