コンパイルされたコードにさまざまな戦略を持つさまざまなポリフィルを挿入できるようにする Babel プラグインのセット。さらに、このリポジトリには、他のポリフィルのプロバイダーの作成に役立つパッケージが含まれています。
このリポジトリは、最初に babel/babel#10008 で提案されたものを実装しています。
簡単なセットアップ例を探している場合、または構成を移行する方法を知りたい場合は、
docs/migration.md確認してください。
メインの Babel パッケージは JavaScript構文を変換するだけです。ネイティブ関数 ( Array.prototype.flat ) または組み込みオブジェクト( Reflect ) を古いブラウザで動作させるには、ポリフィルをロードする必要もあります。
これを行う最も簡単な方法は、 "> < script src =" https://unpkg.com/[email protected]/minified.js " > script >
ただし、この単純なアプローチには、不要なコードが大量に含まれる可能性があります。このリポジトリに実装されている Babel プラグインは、コードにポリフィルを自動的に挿入し、本当に必要なものだけをロードしようとします。これは、コンパイル ターゲットとコードで使用している内容に基づいて行われます。
これらのプラグイン (私たちは「ポリフィル プロバイダー」と呼んでいます) は、ニーズに合わせてさまざまな注入方法をサポートしています。
たとえば、欠落している関数をグローバル オブジェクトに追加することでes-shimsポリフィルにインポートを挿入したい場合は、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確認してください。
| ポリフィル | プラグイン | メソッド |
|---|---|---|
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のサポートを維持していますが、独自のポリフィルまたはお気に入りのポリフィルのプロバイダーを実装することをお勧めします。私たちの目標の 1 つは、異なるポリフィル間の競争を促進し、仕様への準拠性やコード サイズなどのさまざまなトレードオフのバランスをより良くすることです。カスタム ポリフィルのサポートを実装したい場合は、
@babel/helper-define-polyfill-provider使用できます。 (docs/polyfill-provider.md。)
Polyfill プラグインは、 entry-global 、 usage-global 、およびusage-pureの 3 つの異なる注入メソッドを公開できます。ポリフィル プラグインは必要なパッケージを依存関係に自動的に追加しないため、 package.jsonに明示的にリストする必要があることに注意してください。
すべての例は、Chrome 62 をターゲットにしていることを前提としています。
entry-globalメソッドは、ポリフィル全体への単一の単純なインポートを、ターゲット環境でサポートされていない特定の機能へのインポートに置き換えます。これは、Babel でコンパイルしているコードで何を使用しているかに関係なく、サポートされていないすべての関数が利用可能であることを確認したい場合に最も役立ちます。次のような場合にこの方法を使用するとよいでしょう。
| コードを入力してください | 出力コード |
|---|---|
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メソッドは、コード内で使用されているサポートされていない機能に対してのみ、グローバル スコープにアタッチされたポリフィルにインポートを挿入します。次のような場合にこの方法を使用するとよいでしょう。
| コードを入力してください | 出力コード |
|---|---|
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メソッドは、コード内で使用されているサポートされていない機能のポリフィルにインポートを挿入します。ポリフィルをグローバル スコープにアタッチせず、通常の関数としてインポートします。次のような場合にこの方法を使用するとよいでしょう。
| コードを入力してください | 出力コード |
|---|---|
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 ) ; |
過去 3 年半で、 @babel/preset-envサポートされている構文機能をトランスパイルしないだけでなく、不要なcore-jsポリフィルを含めないことによって、バンドル サイズを削減するという点でその可能性を最大限に発揮してきました。
これまでのところ、Babel はソース コードにcore-jsポリフィルを挿入する 3 つの異なる方法を提供しました。
@babel/preset-envのuseBuiltIns: "entry"オプションを使用すると、ターゲット ブラウザでネイティブにサポートされていないすべての ECMAScript 機能に自己インストール ポリフィルを挿入できます。@babel/preset-envのuseBuiltIns: "usage"を使用すると、Babel はサポートされていない ECMAScript 機能に対してのみ、入力ソース コードで実際に使用されている場合にのみ、自己インストール ポリフィルを挿入します。@babel/plugin-transform-runtime使用することで、Babel はcore-jsでサポートされているすべての使用済み ECMAScript 機能に対して「純粋な」ポリフィル (自己インストール型とは異なり、グローバル スコープを汚染しません) を挿入します。これは通常、ライブラリの作成者によって使用されます。私たちの古いアプローチには 2 つの主な問題があります。
@babel/plugin-transform-runtimeは完全に別個のパッケージであるため、「純粋な」ポリフィルで@babel/preset-envのtargetsオプションを使用することはできませんでした。core-jsの使用を強制しました。 core-jsは優れた包括的なポリフィルですが、すべてのユーザーのニーズに適合するわけではありません。この新しいパッケージでは、完全な下位互換性を維持しながら、これらの問題の両方に対する解決策を提案しています。
リポジトリの設定を開始するには、CONTRIBUTING.md を参照してください。
