Um conjunto de plugins Babel que permitem injetar diferentes polyfills com diferentes estratégias em seu código compilado. Além disso, este repositório contém um pacote que ajuda na criação de provedores para outros polyfills.
Este repositório implementa o que foi inicialmente proposto em babel/babel#10008.
Se você estiver procurando alguns exemplos de configuração rápida ou apenas quiser ver como migrar sua configuração, verifique
docs/migration.md.
Os principais pacotes do Babel apenas transformam a sintaxe do JavaScript: você também precisa carregar um polyfill, para fazer funções nativas ( Array.prototype.flat ) ou objetos integrados ( Reflect ) funcionarem em navegadores mais antigos.
A maneira mais fácil de fazer isso é carregar diretamente o polyfill usando uma tag "> < script src =" https://unpkg.com/[email protected]/minified.js " > script >
No entanto, esta abordagem simples pode incluir potencialmente uma grande quantidade de código desnecessário. Os plugins Babel implementados neste repositório injetam automaticamente os polyfills no seu código, enquanto tentam carregar apenas o que é realmente necessário. Ele faz isso com base nos seus objetivos de compilação e no que você está usando no seu código.
Esses plug-ins (nós os chamamos de "provedores de polyfill") suportam diferentes métodos de injeção, para melhor atender às suas necessidades.
Por exemplo, se você deseja injetar importações em polyfills es-shims adicionando as funções ausentes aos objetos globais, você pode configurar o Babel assim:
| Configuração | Código de entrada | Código de saída |
|---|---|---|
{
"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!" ) ; } ) ; |
Se quiser ver mais exemplos de configuração, você pode verificar os documentos de migração: docs/migration.md .
Se você estiver interessado em ler sobre todas as opções suportadas por esses plugins, você pode verificar os documentos de uso: docs/usage.md .
| Polifill | Plug-in | Métodos |
|---|---|---|
core-js@2 | babel-plugin-polyfill-corejs2 | entry-global , usage-global e usage-pure |
core-js@3 | babel-plugin-polyfill-corejs3 | entry-global , usage-global e usage-pure |
es-shims | babel-plugin-polyfill-es-shims | usage-global e usage-pure |
regenerator-runtime | babel-plugin-polyfill-regenerator | entry-global , usage-global e usage-pure |
Mantemos suporte para
core-jsees-shims, mas encorajamos você a implementar um provedor para seu próprio polyfill ou para o seu favorito! Um dos nossos objetivos é incentivar a competição entre diferentes polyfills, para equilibrar melhor as diferentes compensações, como conformidade com especificações e tamanho do código.Se quiser implementar suporte para um polyfill personalizado, você pode usar
@babel/helper-define-polyfill-provider. (docs/polyfill-provider.md.)
Os plug-ins Polyfill podem expor três métodos de injeção diferentes: entry-global , usage-global e usage-pure . Observe que os plug-ins polyfill não adicionam automaticamente os pacotes necessários às suas dependências, portanto, você deve listá-los explicitamente em seu package.json .
Todos os exemplos presumem que você está almejando o Chrome 62.
O método entry-global substitui uma única importação simples para todo o polyfill por importações para recursos específicos não suportados pelos ambientes de destino. É mais útil quando você deseja ter certeza de que todas as funções não suportadas estão disponíveis, independentemente do que você está usando no código que está compilando com o Babel. Você pode querer usar este método se:
| Código de entrada | Código de saída |
|---|---|
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" ; |
O método usage-global injeta importações em polyfills anexados ao escopo global, mas apenas para recursos não suportados que são usados em seu código. Você pode querer usar este método se:
| Código de entrada | Código de saída |
|---|---|
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 ) ; |
O método usage-pure injeta importações em polyfills para recursos não suportados que são usados em seu código, sem anexar os polyfills ao escopo global, mas importando-os como funções normais. Você pode querer usar este método se:
| Código de entrada | Código de saída |
|---|---|
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 ) ; |
Nos últimos três anos e meio, @babel/preset-env mostrou todo o seu potencial na redução do tamanho dos pacotes, não apenas por não transpilar recursos de sintaxe suportados, mas também por não incluir polyfills core-js desnecessários.
Até agora, Babel forneceu três maneiras diferentes de injetar polyfills core-js no código-fonte:
useBuiltIns: "entry" de @babel/preset-env , é possível injetar polyfills de auto-instalação para cada funcionalidade ECMAScript não suportada nativamente pelos navegadores de destino;useBuiltIns: "usage" de @babel/preset-env , Babel injetará polyfills de auto-instalação apenas para recursos ECMAScript não suportados, mas somente se eles forem realmente usados no código fonte de entrada;@babel/plugin-transform-runtime , Babel injetará polyfills "puros" (que, diferentemente dos auto-instaladores, não poluem o escopo global) para cada recurso ECMAScript usado com suporte por core-js . Isso geralmente é usado por autores de bibliotecas.Nossa abordagem antiga tem dois problemas principais:
targets de @babel/preset-env com polyfills "puros", porque @babel/plugin-transform-runtime é um pacote completamente separado.core-js se quisessem uma integração com Babel. core-js é um polyfill bom e abrangente, mas não atende às necessidades de todos os nossos usuários.Com estes novos pacotes estamos propondo uma solução para ambos os problemas, mantendo ao mesmo tempo total compatibilidade com versões anteriores.
Consulte nosso CONTRIBUTING.md para começar a configurar o repositório.
