Transpilação converte código moderno em versões antigas do JavaScript.
Ela permite usar recursos novos sem esperar todos os navegadores atualizarem.
Primeiramente, isso é essencial para compatibilidade com navegadores legados.
Por exemplo, escrevemos com async/await e transpilamos para Promise.
Além disso, o TypeScript adiciona tipos estáticos que são removidos na transpilação.
A voz passiva é usada aqui: “o código é transformado antes de ser enviado ao navegador”.
Quando utilizar transpilação? Em qualquer projeto frontend profissional.
Também é necessário quando usamos frameworks como React ou Vue.
Ferramentas como Babel, TypeScript e esbuild são as mais comuns.
Vamos explorar cada uma com exemplos práticos.
Três subtítulos guiarão sua compreensão sobre o tema.
No final, você saberá como configurar seu próprio pipeline de build.
Prepare-se para entender os bastidores do JavaScript moderno.
Typescript: tipagem estática que vira javascript
TypeScript é um superset do JavaScript com tipos opcionais.
Ele detecta erros em tempo de desenvolvimento, não em execução.
Quando usar TypeScript? Em projetos com mais de 500 linhas.
Também em times grandes ou bibliotecas públicas.
A transpilação remove todos os tipos e gera JS puro.
O comando tsc (TypeScript compiler) faz esse trabalho.
A voz passiva é aplicada: “os arquivos .ts são convertidos em .js”.
Um exemplo simples de código TypeScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// arquivo: saudacao.ts interface Pessoa { nome: string; idade: number; } function cumprimentar(pessoa: Pessoa): string { return `Olá, ${pessoa.nome}! Você tem ${pessoa.idade} anos.`; } const usuario = { nome: "Ana", idade: 30 }; console.log(cumprimentar(usuario)); // Após transpilar com "tsc saudacao.ts", obtemos JavaScript puro |
O JavaScript gerado não contém a interface ou os tipos. Eles são usados apenas para validação durante a compilação. Isso é chamado de “erase de tipos” e é uma característica fundamental. TypeScript é a escolha mais popular para frontends sérios.
Babel: o tradutor universal do javascript
Babel transpila código JavaScript moderno para versões antigas.
Ele suporta recursos experimentais antes de virarem padrão.
Quando usar Babel? Em projetos React ou quando você precisa de máxima compatibilidade.
Também é útil para transformar JSX (React) em funções JavaScript normais.
O Babel é altamente configurável com plugins e presets.
Por exemplo, o preset @babel/preset-env detecta automaticamente os navegadores alvo.
A fórmula da compatibilidade é:
\(C = \frac{N_{\text{navegadores suportados}}}{N_{\text{total}}} \times 100\%\)
Quanto maior o valor, mais navegadores antigos são cobertos.
Exemplo de configuração e uso do Babel:
|
1 2 3 4 5 6 7 8 9 10 |
// Código moderno (ES2020) const dobrar = (n) => n * 2; const numeros = [1, 2, 3]; const dobrados = numeros?.map(dobrar) ?? []; // Com Babel (preset-env) transpila para ES5 // Resultado aproximado: // var dobrar = function(n) { return n * 2; }; // var numeros = [1, 2, 3]; // var dobrados = numeros != null ? numeros.map(dobrar) : []; |
Para executar, instale @babel/cli e @babel/preset-env.
Depois rode: babel entrada.js --out-file saida.js.
O Babel também lida com JSX, Flux e outras sintaxes.
Ebuild e swc: a nova geração de transpiladores rápidos
esbuild e SWC são transpiladores escritos em Go e Rust. Eles são dezenas de vezes mais rápidos que o Babel tradicional. Quando usar essas ferramentas? Em projetos grandes onde tempo de build importa. Por exemplo, monorepos com centenas de componentes. Ambos suportam TypeScript, JSX e recursos modernos. A desvantagem é o ecossistema de plugins menor que o do Babel. Porém, a velocidade compensa para muitos times. Vite e Next.js já usam esbuild ou SWC internamente. Exemplo de uso do esbuild via linha de comando:
|
1 2 3 4 5 6 7 8 |
# Instalar esbuild globalmente npm install -g esbuild # Transpilar um arquivo TypeScript esbuild app.ts --bundle --outfile=out.js # Com minificação e sourcemaps esbuild app.ts --minify --sourcemap --target=es2015 --outfile=app.min.js |
O comando --bundle une todos os imports em um só arquivo.
Isso é ideal para produção.
A voz passiva é aplicada: “o código é minificado e ofuscado automaticamente”.
esbuild também pode servir como servidor de desenvolvimento rápido.
Para projetos novos, considere começar com Vite (que usa esbuild por trás).
Ele oferece recarga instantânea e builds otimizados.
Transpilação não é mais um gargalo com essas ferramentas modernas.
Portanto, escolha Babel para flexibilidade máxima.
Escolha esbuild ou SWC para velocidade extrema.
TypeScript é obrigatório para qualquer projeto acima do tamanho médio.
Combine as ferramentas conforme sua necessidade.
Seu frontend ficará compatível, rápido e fácil de manter.