Nesta aula, vamos mergulhar no mundo dos transpiladores, com foco especial no Babel, a ferramenta mais popular para transpilar JavaScript. Você já se perguntou como os navegadores conseguem entender códigos com sintaxes modernas, como arrow functions, classes ou o operador de espalhamento, mesmo em versões antigas? A resposta está na transpilação: um processo que converte o código moderno em uma versão compatível com ambientes mais antigos. Vamos entender por que isso é necessário, como funciona a compatibilidade e como o Browserslist ajuda a simplificar a configuração.

Ao longo desta aula, você verá exemplos práticos de configuração e uso do Babel, além de compreender os conceitos por trás da compatibilidade entre navegadores. Ao final, você terá uma base sólida para integrar o Babel em seus próprios projetos e garantir que seu código funcione em uma ampla gama de ambientes.

Por que transpilar

O JavaScript evolui constantemente, com novas funcionalidades sendo adicionadas a cada ano (ECMAScript 2023, 2024, etc.). No entanto, nem todos os navegadores conseguem acompanhar esse ritmo. Alguns navegadores mais antigos, como versões anteriores do Internet Explorer ou navegadores de dispositivos embarcados, não suportam as sintaxes mais recentes. Isso cria um problema: se você escrever código usando a sintaxe moderna, ele pode quebrar nesses ambientes.

A transpilação resolve esse problema convertendo o código moderno em uma versão equivalente que usa apenas recursos amplamente suportados. Por exemplo, uma arrow function pode ser convertida em uma função tradicional, e uma classe pode ser convertida em uma função construtora. Dessa forma, o mesmo código funciona tanto em navegadores modernos quanto em navegadores antigos, sem que você precise escrever duas versões do código.

Além da compatibilidade, a transpilação também permite que você use funcionalidades experimentais ou propostas que ainda não foram padronizadas, como decorators ou o operador de encadeamento opcional (embora este já esteja bem suportado). Isso dá aos desenvolvedores a liberdade de experimentar com o futuro da linguagem, sem se preocupar com a falta de suporte nos navegadores.

Vamos ver um exemplo simples. Suponha que você escreva o seguinte código moderno:

// Código moderno
const saudacao = (nome) => `Olá, ${nome}!`;
console.log(saudacao('Maria'));

O Babel pode transformar isso em:

// Código transpilado (aproximação)
var saudacao = function saudacao(nome) {
  return "Olá, ".concat(nome, "!");
};
console.log(saudacao('Maria'));

Perceba como a arrow function foi convertida em uma função tradicional e o template string foi convertido em concatenação. Isso garante que o código funcione em navegadores que não suportam essas sintaxes.

Compatibilidade

A compatibilidade é o coração da transpilação. Quando falamos em compatibilidade, nos referimos à capacidade de um código rodar em diferentes ambientes sem erros. No contexto de JavaScript, isso significa que o código deve ser compreendido pelo motor de execução do navegador (ou do Node.js) em uso.

O Babel utiliza uma abordagem baseada em plugins e presets para transformar o código. Cada transformação é um plugin que converte um determinado recurso moderno em uma versão compatível. Por exemplo, o plugin @babel/plugin-transform-arrow-functions converte arrow functions em funções tradicionais. Em vez de você instalar centenas de plugins individualmente, o Babel oferece presets que agrupam um conjunto de transformações comuns. O preset mais usado é o @babel/preset-env, que automaticamente aplica as transformações necessárias com base nos ambientes que você deseja suportar.

O @babel/preset-env funciona em conjunto com o Browserslist (que veremos a seguir) para determinar exatamente quais transformações são necessárias. Por exemplo, se você definir que deseja suportar o Chrome 60, o preset-env vai incluir apenas as transformações que o Chrome 60 não suporta, resultando em um código mais enxuto e com menos alterações desnecessárias.

Além de transformar a sintaxe, o Babel também pode incluir polyfills para funcionalidades que não podem ser transformadas apenas com sintaxe, como Promise, Array.include ou Object.entries. Polyfills são pedaços de código que implementam a funcionalidade em ambientes que não a têm nativamente. O Babel pode ser configurado para incluir polyfills automaticamente usando core-js ou @babel/polyfill (embora este último esteja descontinuado).

Vamos ver um exemplo de configuração do Babel em um projeto. Primeiro, instale as dependências:

npm install --save-dev @babel/core @babel/cli @babel/preset-env

Depois, crie um arquivo babel.config.json na raiz do projeto:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"
      }
    ]
  ]
}

Nesse exemplo, o preset-env vai transformar o código para ser compatível com todos os navegadores que têm mais de 0.25% de participação de mercado e que não estão desatualizados há mais de 24 meses. Essa é uma configuração comum para projetos voltados ao público geral.

Agora, você pode usar o Babel CLI para transpilar um arquivo:

npx babel src --out-dir dist

Isso transforma todos os arquivos da pasta src e os salva em dist com o código transpilado.

Browserslist (visão geral)

Browserslist é uma ferramenta que permite especificar quais navegadores você deseja suportar em seus projetos. Ela é usada por várias ferramentas, incluindo Babel, Autoprefixer (para CSS) e outras. Em vez de você ter que listar manualmente cada navegador e versão, o Browserslist usa uma sintaxe de consulta para definir os alvos de forma declarativa.

As consultas podem ser baseadas em participação de mercado, versões específicas, ou até mesmo em datas de lançamento. Por exemplo, a consulta "last 2 versions" significa que você deseja suportar as duas últimas versões de todos os navegadores populares. A consulta "> 1%" inclui todos os navegadores com mais de 1% de participação global. Você pode combinar várias condições usando operadores lógicos como and, or e not.

É importante notar que o Browserslist é independente do Babel, mas o Babel o utiliza para tomar decisões sobre quais transformações aplicar. Quando você define a configuração de targets no preset-env, você pode passar uma consulta do Browserslist diretamente ou apontar para um arquivo .browserslistrc ou uma entrada no package.json.

Vamos ver um exemplo de arquivo .browserslistrc:

# Comentário: suportar as últimas 2 versões de cada navegador principal
last 2 versions
# Incluir também o IE 11
IE 11

Esse arquivo pode ser usado tanto pelo Babel quanto por outras ferramentas. No Babel, se você não especificar targets no preset-env, ele automaticamente procura por um arquivo .browserslistrc ou pela configuração no package.json. Isso centraliza a definição de compatibilidade em um único lugar, facilitando a manutenção.

Além de ser usado no Babel, o Browserslist também é útil para ferramentas de linting, como o ESLint, e para ferramentas de build, como o webpack. Portanto, aprender a usar o Browserslist é uma habilidade valiosa para qualquer desenvolvedor front-end.

Uma dica: você pode testar suas consultas no site oficial do Browserslist (https://browsersl.ist) para ver quais navegadores serão selecionados. Isso ajuda a entender o impacto de cada consulta.

Boas práticas e observações finais

Ao trabalhar com transpiladores, é importante considerar algumas boas práticas. Primeiro, sempre defina claramente quais navegadores você precisa suportar. Isso evita que o Babel faça transformações desnecessárias, deixando o código final mais limpo e com melhor desempenho. Use o Browserslist para centralizar essa definição.

Segundo, lembre-se de que a transpilação adiciona uma etapa de build ao seu fluxo de trabalho. Você deve integrar o Babel ao seu processo de build (por exemplo, usando webpack, Rollup ou Parcel) para que o código seja transformado automaticamente. Isso garante que você sempre escreva código moderno, mas que o código final seja compatível.

Terceiro, cuidado com o uso excessivo de polyfills. Incluir polyfills para funcionalidades que você não usa pode aumentar o tamanho do bundle. Use o core-js com a opção useBuiltIns do preset-env para incluir apenas os polyfills necessários, com base no seu código.

Por fim, esteja atento às atualizações do Babel e do Browserslist. O ecossistema JavaScript evolui rapidamente, e novas versões podem trazer melhorias de desempenho e novos recursos. Manter suas dependências atualizadas é uma boa prática.

Referências

Exercícios

  1. Explique com suas palavras o que é transpilação e por que ela é necessária no desenvolvimento JavaScript moderno. Dê um exemplo de recurso que precisa ser transpilado.
  2. Qual é a função do @babel/preset-env? Como ele decide quais transformações aplicar?
  3. Crie um arquivo .browserslistrc com a consulta que suporte os últimos 2 anos de navegadores e o IE 11. Explique o que essa consulta significa.
  4. Escreva um código JavaScript moderno que use arrow functions e template strings. Em seguida, simule mentalmente a transformação do Babel, mostrando como o código ficaria após a transpilação.
  5. Você está configurando um novo projeto e deseja que o Babel inclua polyfills apenas para os recursos que você usa. Qual opção do preset-env você usaria e como configuraria?

✓ Resposta: Transpilação é o processo de converter código escrito em uma versão moderna (ou experimental) do JavaScript para uma versão compatível com ambientes mais antigos. Ela é necessária porque nem todos os navegadores suportam as últimas funcionalidades da linguagem. Um exemplo é a arrow function (const soma = (a, b) => a + b;), que pode ser transformada em uma função tradicional (function soma(a, b) { return a + b; }).

✓ Resposta: O @babel/preset-env é um preset que aplica transformações de sintaxe automaticamente com base nos navegadores alvo definidos. Ele analisa o código e aplica apenas os plugins necessários para que o código seja compatível com os ambientes especificados. Ele usa o Browserslist para determinar quais transformações são necessárias, evitando transformações desnecessárias e mantendo o código o mais próximo do original.

✓ Resposta: Conteúdo do arquivo .browserslistrc: 
last 2 years
IE 11
Essa consulta significa que você deseja suportar as versões de navegadores lançadas nos últimos 2 anos e também o Internet Explorer 11. Isso inclui a maioria dos navegadores modernos e uma versão antiga do IE.

✓ Resposta: Código moderno: 
const saudacao = (nome) => `Olá, ${nome}!`;
console.log(saudacao('Maria'));
Após a transpilação (aproximação): 
var saudacao = function saudacao(nome) {
  return "Olá, ".concat(nome, "!");
};
console.log(saudacao('Maria'));
A arrow function foi convertida em uma função tradicional e o template string em concatenação.

✓ Resposta: Para incluir polyfills apenas para os recursos usados, você deve configurar o preset-env com a opção useBuiltIns: 'usage' e definir o corejs para a versão desejada. Exemplo: 
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}
Isso fará com que o Babel importe automaticamente apenas os polyfills necessários para as funcionalidades que seu código utiliza.