## 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 — 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).
// 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.