## glossário

O que é Babel?

Babel é um compilador de JavaScript que converte código escrito com sintaxe moderna em código equivalente que ambientes mais antigos conseguem executar. É o que permite usar os recursos mais recentes da linguagem sem esperar que todos os navegadores em uso os suportem.

O nome técnico do que ele faz é transpilação: uma compilação de uma linguagem para outra no mesmo nível de abstração — JavaScript para JavaScript, e não JavaScript para código de máquina.

O que a transpilação faz na prática

Entrada moderna, saída compatível
// entrada — sintaxe moderna
const somar = (a, b = 0) => a + b;

// saída — equivalente em ES5
var somar = function (a, b) {
  if (b === void 0) {
    b = 0;
  }
  return a + b;
};

Presets e plugins

Babel sozinho não transforma nada — ele é uma infraestrutura de plugins. Cada plugin cuida de uma transformação específica, e os presets agrupam conjuntos coerentes deles.

  • @babel/preset-env — o mais usado. Descobre quais transformações são necessárias a partir dos navegadores que você declara suportar.
  • @babel/preset-react — converte JSX em chamadas de função que o React entende.
  • @babel/preset-typescript — remove as anotações de TypeScript (sem verificar tipos, apenas apagando).
Configuração declarando o alvo, não as transformações
// babel.config.json
{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.5%, last 2 versions, not dead"
    }],
    "@babel/preset-react"
  ]
}

Transpilação não é polyfill

Essa distinção causa confusão frequente. Babel transforma sintaxe — arrow functions, destructuring, classes. Ele não cria funcionalidades ausentes, como Promise ou Array.prototype.includes. Para isso existem os polyfills, implementações em JavaScript comum do recurso faltante, normalmente via core-js.

Babel ainda é necessário?

Menos do que já foi. Com o fim do Internet Explorer e navegadores atualizando sozinhos, boa parte dos projetos consegue entregar JavaScript moderno direto. Além disso, ferramentas mais novas — esbuild, SWC e o compilador do bundler que você usa — fazem transpilação muito mais rápido, em Go ou Rust. Babel segue relevante em projetos legados, em transformações customizadas e como referência da especificação.

## faq

Perguntas frequentes

Qual a diferença entre Babel e Webpack?

Fazem coisas distintas e costumam trabalhar juntos. Babel traduz a sintaxe de cada arquivo individualmente. Webpack junta todos os arquivos e dependências em pacotes otimizados para o navegador, chamando o Babel durante o processo.

Babel verifica erros de tipo em TypeScript?

Não. O preset de TypeScript apenas remove as anotações de tipo, sem validá-las. A verificação continua sendo feita pelo compilador tsc ou pelo editor. Por isso projetos que usam Babel com TypeScript normalmente rodam tsc --noEmit em paralelo.

Preciso configurar Babel manualmente?

Raramente. Next.js, Vite e a maioria das ferramentas modernas já trazem a configuração pronta. Mexer diretamente costuma ser necessário só em transformações customizadas ou em projetos com build próprio.