Criar sites que funcionem bem em todos os principais navegadores é o princípio fundamental de uma ecossistema da Web aberto. No entanto, isso significa um trabalho adicional para garantir que todas o código escrito é suportado em cada navegador que você planeja segmentar. Se você quiser usar novos recursos de linguagem JavaScript, precisará transcompilar esses recursos para formatos compatíveis com versões anteriores para navegadores que ainda não têm suporte para resolvê-los com rapidez.
O Babel é a ferramenta mais usada para compilar código
com sintaxe mais nova no código que diferentes navegadores e ambientes
(como o Node) consegue entender. Neste guia, presume-se que você esteja usando o Babel.
precisa seguir as instruções de configuração para
incluí-lo em seu aplicativo, caso ainda não tenha feito isso. Selecionar webpack
em Build Systems se você estiver usando o webpack como o bundler de módulo no app.
Para usar o Babel para transcompilar apenas o que é necessário para seus usuários, você precisa:
- Identifique quais navegadores você quer segmentar.
- Use
@babel/preset-envcom destinos de navegador adequados. - Use
<script type="module">para interromper o envio de código transpilado para navegadores que não precisam dele.
Identifique quais navegadores você quer segmentar
Antes de começar a modificar a forma como o código em seu aplicativo é transcompilado, você precisam identificar quais navegadores acessam o aplicativo. Analisar quais navegadores seus usuários atualmente, bem como aqueles que você planeja segmentar para fazer uma para tomar a decisão mais fundamentada.
Usar @babel/preset-env
A transcompilação do código normalmente resulta em um arquivo com tamanho maior do que em suas formas originais. Ao minimizar a quantidade de compilação que você faz, pode reduzir o tamanho dos pacotes para melhorar o desempenho de uma página da Web.
Em vez de incluir plug-ins específicos para compilar seletivamente determinadas linguagens que você estiver usando, o Babel fornece várias predefinições que agrupam plug-ins juntas. Use @babel/preset-env. para incluir apenas as transformações e polyfills necessários para os navegadores que você planeja segmentação.
Inclua @babel/preset-env na matriz presets no Babel
de configuração do Terraform, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Use o campo targets para especificar quais versões do navegador você quer incluir
adicionando uma consulta apropriada ao campo browsers. @babel/preset-env
integra-se com a lista de navegadores, uma configuração de código aberto compartilhada entre diferentes
para segmentar navegadores. Uma lista completa de consultas compatíveis está na
documentação do browserslist.
Outra opção é usar um arquivo .browserslistrc para listar os ambientes
que você quer segmentar.
O valor ">0.25%" instrui o Babel a incluir apenas as transformações.
necessárias para oferecer suporte a navegadores que compõem mais de 0,25% do tráfego global
uso. Isso garante que seu pacote não contenha transcompilações desnecessárias
para navegadores que são usados por uma porcentagem muito pequena de usuários.
Na maioria dos casos, esta é uma abordagem melhor do que usar as seguintes configuração:
"targets": "last 2 versions"
O valor "last 2 versions" transcompila seu código para o
as duas últimas versões de cada navegador,
o que significa que há suporte para navegadores descontinuados, como o Internet Explorer.
Isso pode aumentar desnecessariamente o tamanho do seu pacote caso você não espere
navegadores sejam usados para acessar seu aplicativo.
Por fim, você deve selecionar a combinação apropriada de consultas para segmentar navegadores que atendam às suas necessidades.
Ativar correções de bugs modernas
O @babel/preset-env agrupa vários recursos de sintaxe JavaScript em coleções e ativa/desativa
com base nos navegadores especificados. Embora isso funcione bem, toda uma coleção de
os recursos de sintaxe são transformados quando um navegador de destino contém um bug com apenas um recurso.
Isso muitas vezes resulta em mais código transformado do que o necessário.
Originalmente desenvolvido como uma predefinição separada, o
opção de correções de bugs em @babel/preset-env
resolve esse problema convertendo a sintaxe moderna, quebrada em alguns navegadores, para o
sintaxe equivalente que não esteja corrompida nesses navegadores. O resultado é um código moderno quase idêntico
com alguns pequenos ajustes de sintaxe que garantem a compatibilidade em todos os navegadores de destino. Para usar isso,
verifique se o @babel/preset-env 7.10 ou versão mais recente está instalado e defina os
bugfixes para true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
No Babel 8, a opção bugfixes será ativada por padrão.
Usar <script type="module">
Os módulos JavaScript, ou módulos ES, são um recurso relativamente novo suportado em
todos os principais navegadores. É possível usar módulos
para criar scripts que podem importar e exportar de outros módulos, mas você pode
Use-as com @babel/preset-env para segmentar apenas navegadores compatíveis
para resolvê-los com rapidez.
Em vez de consultar versões específicas do navegador ou a participação de mercado, considere
especificando "esmodules" : true dentro do campo targets do arquivo .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Muitos recursos mais recentes do ECMAScript compilados com o Babel já são compatíveis. em ambientes compatíveis com módulos JavaScript. Ao fazer isso, você simplificam o processo para garantir que somente o código transcompilado seja usado. para navegadores que realmente precisam dele.
Os navegadores compatíveis com módulos ignoram scripts com um atributo nomodule.
Inversamente, os navegadores que não oferecem suporte a módulos ignoram elementos de script com
type="module": Isso significa que você pode incluir um módulo, bem como um substituto compilado.
O ideal é que os dois scripts de versão de um aplicativo sejam incluídos assim:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Navegadores compatíveis com módulos buscam e executam main.mjs e ignoram compiled.js.
Os navegadores que não são compatíveis com módulos fazem o contrário.
Se você usar o webpack, poderá definir destinos diferentes em suas configurações para dois versões separadas do seu aplicativo:
- Uma versão apenas para navegadores compatíveis com módulos.
- Uma versão que inclui um script compilado que funciona em qualquer navegador legado. Este arquivo tem um tamanho de arquivo maior, já que a transpilação precisa ser compatível com uma gama maior de navegadores.
Um agradecimento a Connor Clark e Jason Miller pelas avaliações.