Eine Reihe von Babel-Plugins, die das Einfügen verschiedener Polyfills mit unterschiedlichen Strategien in Ihren kompilierten Code ermöglichen. Darüber hinaus enthält dieses Repository ein Paket, das beim Erstellen von Anbietern für andere Polyfills hilft.
Dieses Repository implementiert, was ursprünglich unter babel/babel#10008 vorgeschlagen wurde.
Wenn Sie nach Beispielen für eine schnelle Einrichtung suchen oder einfach nur sehen möchten, wie Sie Ihre Konfiguration migrieren, sehen Sie sich bitte
docs/migration.mdan.
Die Hauptpakete von Babel transformieren lediglich die JavaScript- Syntax : Sie müssen außerdem eine Polyfüllung laden, damit native Funktionen ( Array.prototype.flat ) oder integrierte Objekte ( Reflect ) in älteren Browsern funktionieren.
Der einfachste Weg, dies zu tun, besteht darin, die Polyfüllung direkt mit einem "> < script src =" https://unpkg.com/[email protected]/minified.js " > script >
Dieser einfache Ansatz kann jedoch möglicherweise eine Menge unnötigen Code enthalten. Die in diesem Repository implementierten Babel-Plugins fügen die Polyfills automatisch in Ihren Code ein und versuchen dabei, nur das zu laden, was wirklich benötigt wird. Dies geschieht basierend auf Ihren Kompilierungszielen und dem, was Sie in Ihrem Code verwenden.
Diese Plugins (wir nennen sie „Polyfill-Anbieter“) unterstützen verschiedene Injektionsmethoden , um Ihren Anforderungen besser gerecht zu werden.
Wenn Sie beispielsweise Importe in es-shims Polyfills injizieren möchten, indem Sie die fehlenden Funktionen zu den globalen Objekten hinzufügen, können Sie Babel wie folgt konfigurieren:
| Konfiguration | Eingabecode | Ausgabecode |
|---|---|---|
{
"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!" ) ; } ) ; |
Wenn Sie weitere Konfigurationsbeispiele sehen möchten, können Sie die Migrationsdokumente überprüfen: docs/migration.md .
Wenn Sie mehr über alle von diesen Plugins unterstützten Optionen erfahren möchten, können Sie sich die Nutzungsdokumente ansehen: docs/usage.md .
| Polyfill | Plugin | Methoden |
|---|---|---|
core-js@2 | babel-plugin-polyfill-corejs2 | entry-global , usage-global und usage-pure |
core-js@3 | babel-plugin-polyfill-corejs3 | entry-global , usage-global und usage-pure |
es-shims | babel-plugin-polyfill-es-shims | usage-global und usage-pure |
regenerator-runtime | babel-plugin-polyfill-regenerator | entry-global , usage-global und usage-pure |
Wir unterstützen weiterhin
core-jsundes-shims, empfehlen Ihnen jedoch, einen Anbieter für Ihr eigenes Polyfill oder für Ihr Lieblingspolyfill zu implementieren! Eines unserer Ziele besteht darin, den Wettbewerb zwischen verschiedenen Polyfills zu fördern, um die verschiedenen Kompromisse wie Spezifikationskonformität und Codegröße besser auszubalancieren.Wenn Sie Unterstützung für eine benutzerdefinierte Polyfüllung implementieren möchten, können Sie
@babel/helper-define-polyfill-providerverwenden. (docs/polyfill-provider.md.)
Polyfill-Plugins können drei verschiedene Injektionsmethoden verfügbar machen: entry-global , usage-global und usage-pure . Beachten Sie, dass Polyfill-Plugins die erforderlichen Pakete nicht automatisch zu Ihren Abhängigkeiten hinzufügen. Sie müssen sie daher explizit in Ihrer package.json auflisten.
Bei allen Beispielen wird davon ausgegangen, dass Sie auf Chrome 62 abzielen.
Die entry-global Methode ersetzt einen einzelnen einfachen Import in die gesamte Polyfüllung durch Importe in die spezifischen Funktionen, die von den Zielumgebungen nicht unterstützt werden. Dies ist am nützlichsten, wenn Sie sicherstellen möchten, dass jede nicht unterstützte Funktion verfügbar ist, unabhängig davon, was Sie in dem Code verwenden, den Sie mit Babel kompilieren. Möglicherweise möchten Sie diese Methode verwenden, wenn:
| Eingabecode | Ausgabecode |
|---|---|
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" ; |
Die Methode usage-global injiziert Importe in Polyfills, die an den globalen Bereich angehängt sind, jedoch nur für nicht unterstützte Funktionen, die in Ihrem Code verwendet werden. Möglicherweise möchten Sie diese Methode verwenden, wenn:
| Eingabecode | Ausgabecode |
|---|---|
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 ) ; |
Die usage-pure Methode injiziert Importe in Polyfills für nicht unterstützte Features, die in Ihrem Code verwendet werden, ohne die Polyfills an den globalen Bereich anzuhängen, sondern sie als normale Funktionen zu importieren. Möglicherweise möchten Sie diese Methode verwenden, wenn:
| Eingabecode | Ausgabecode |
|---|---|
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 ) ; |
In den letzten dreieinhalb Jahren hat @babel/preset-env sein volles Potenzial bei der Reduzierung der Bundle-Größen gezeigt, nicht nur durch die Nichttranspilierung unterstützter Syntaxfunktionen, sondern auch durch den Verzicht auf unnötige core-js -Polyfills.
Bisher stellte Babel drei verschiedene Möglichkeiten bereit, core-js -Polyfills in den Quellcode einzufügen:
useBuiltIns: "entry" -Option von @babel/preset-env ist es möglich, selbstinstallierende Polyfills für jede ECMAScript-Funktionalität einzufügen, die von den Zielbrowsern nicht nativ unterstützt wird;@babel/preset-env 's useBuiltIns: "usage" fügt Babel nur selbstinstallierende Polyfills für nicht unterstützte ECMAScript-Funktionen ein, aber nur , wenn sie tatsächlich im Eingabequellcode verwendet werden;@babel/plugin-transform-runtime fügt Babel „reine“ Polyfills (die im Gegensatz zu selbstinstallierenden Polyfills den globalen Bereich nicht verschmutzen) für jede verwendete ECMAScript-Funktion ein, die von core-js unterstützt wird. Dies wird normalerweise von Bibliotheksautoren verwendet.Unser alter Ansatz hat zwei Hauptprobleme:
targets -Option von @babel/preset-env mit „reinen“ Polyfills zu verwenden, da @babel/plugin-transform-runtime ein völlig separates Paket ist.core-js zu verwenden, wenn sie eine Babel-Integration wünschen. core-js ist ein gutes und umfassendes Polyfill, aber es erfüllt nicht die Bedürfnisse aller unserer Benutzer.Mit diesen neuen Paketen schlagen wir eine Lösung für diese beiden Probleme vor und behalten gleichzeitig die volle Abwärtskompatibilität bei.
Sehen Sie sich unsere CONTRIBUTING.md an, um mit der Einrichtung des Repos zu beginnen.
