Un conjunto de complementos de Babel que permiten inyectar diferentes polyfills con diferentes estrategias en su código compilado. Además, este repositorio contiene un paquete que ayuda a crear proveedores para otros polyfills.
Este repositorio implementa lo que se propuso inicialmente en babel/babel#10008.
Si está buscando algunos ejemplos de configuración rápida o simplemente desea ver cómo migrar su configuración, consulte
docs/migration.md.
Los paquetes principales de Babel solo transforman la sintaxis de JavaScript: también es necesario cargar un polyfill para que las funciones nativas ( Array.prototype.flat ) o los objetos integrados ( Reflect ) funcionen en navegadores más antiguos.
La forma más sencilla de hacerlo es cargar directamente el polyfill usando una etiqueta "> < script src =" https://unpkg.com/[email protected]/minified.js " > script >
Sin embargo, este enfoque simple puede incluir potencialmente una gran cantidad de código innecesario. Los complementos de Babel implementados en este repositorio inyectan automáticamente los polyfills en su código, mientras intentan cargar solo lo que realmente se necesita. Lo hace en función de sus objetivos de compilación y de lo que está utilizando en su código.
Estos complementos (los llamamos "proveedores de polyfill") admiten diferentes métodos de inyección para adaptarse mejor a sus necesidades.
Por ejemplo, si desea inyectar importaciones a los polyfills es-shims agregando las funciones que faltan a los objetos globales, puede configurar Babel como tal:
| Configuración | Código de entrada | Código de salida |
|---|---|---|
{
"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!" ) ; } ) ; |
Si desea ver más ejemplos de configuración, puede consultar los documentos de migración: docs/migration.md .
Si está interesado en leer sobre todas las opciones admitidas por estos complementos, puede consultar los documentos de uso: docs/usage.md .
| Polirelleno | Complemento | Métodos |
|---|---|---|
core-js@2 | babel-plugin-polyfill-corejs2 | entry-global , usage-global y usage-pure |
core-js@3 | babel-plugin-polyfill-corejs3 | entry-global , usage-global y usage-pure |
es-shims | babel-plugin-polyfill-es-shims | usage-global y usage-pure |
regenerator-runtime | babel-plugin-polyfill-regenerator | entry-global , usage-global y usage-pure |
Mantenemos el soporte para
core-jsyes-shims, pero te recomendamos que implementes un proveedor para tu propio polyfill o para tu favorito. Uno de nuestros objetivos es fomentar la competencia entre diferentes polyfills, para equilibrar mejor las diferentes compensaciones, como el cumplimiento de las especificaciones y el tamaño del código.Si desea implementar soporte para un polyfill personalizado, puede usar
@babel/helper-define-polyfill-provider. (docs/polyfill-provider.md).
Los complementos de Polyfill pueden exponer tres métodos de inyección diferentes: entry-global , usage-global y usage-pure . Tenga en cuenta que los complementos de polyfill no agregan automáticamente los paquetes necesarios a sus dependencias, por lo que debe enumerarlos explícitamente en su package.json .
Todos los ejemplos suponen que su objetivo es Chrome 62.
El método entry-global reemplaza una única importación simple de todo el polyfill con importaciones de características específicas que no son compatibles con los entornos de destino. Es más útil cuando desea asegurarse de que todas las funciones no compatibles estén disponibles, independientemente de lo que esté utilizando en el código que esté compilando con Babel. Es posible que desee utilizar este método si:
| Código de entrada | Código de salida |
|---|---|
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" ; |
El método usage-global inyecta importaciones en polyfills adjuntos al alcance global, pero solo para funciones no compatibles que se utilizan en su código. Es posible que desee utilizar este método si:
| Código de entrada | Código de salida |
|---|---|
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 ) ; |
El método usage-pure inyecta importaciones en polyfills para funciones no compatibles que se utilizan en su código, sin adjuntar los polyfills al alcance global, sino importándolos como funciones normales. Es posible que desee utilizar este método si:
| Código de entrada | Código de salida |
|---|---|
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 ) ; |
En los últimos tres años y medio, @babel/preset-env ha demostrado todo su potencial para reducir el tamaño de los paquetes, no solo al no transpilar las funciones de sintaxis admitidas, sino también al no incluir polyfills core-js innecesarios.
Hasta ahora, Babel proporcionó tres formas diferentes de inyectar polyfills core-js en el código fuente:
useBuiltIns: "entry" de @babel/preset-env , es posible inyectar polyfills autoinstalables para cada funcionalidad ECMAScript que no sea compatible de forma nativa con los navegadores de destino;useBuiltIns: "usage" de @babel/preset-env , Babel solo inyectará polyfills autoinstalables para funciones ECMAScript no compatibles, pero solo si realmente se usan en el código fuente de entrada;@babel/plugin-transform-runtime , Babel inyectará polyfills "puros" (que, a diferencia de los que se instalan automáticamente, no contaminan el alcance global) para cada función ECMAScript utilizada compatible con core-js . Esto suele ser utilizado por los autores de bibliotecas.Nuestro antiguo enfoque tiene dos problemas principales:
targets de @babel/preset-env con polyfills "puros", porque @babel/plugin-transform-runtime es un paquete completamente separado.core-js si querían una integración con Babel. core-js es un polyfill bueno y completo, pero no se adapta a las necesidades de todos nuestros usuarios.Con estos nuevos paquetes proponemos una solución para ambos problemas, manteniendo al mismo tiempo la total compatibilidad con versiones anteriores.
Consulte nuestro CONTRIBUTING.md para comenzar a configurar el repositorio.
