Babel para JavaScript (Node.js): guia completo com exemplos

O que é Babel e para que serve?

\n\n

Babel é um poderoso transpilador (compilador) para JavaScript que permite aos desenvolvedores escrever código nas versões mais modernas do ECMAScript (ES6, ES7, ES8, ES9, ES10, ES11, ES12 e superiores) e convertê-lo em JavaScript compatível com versões anteriores, que pode ser executado em navegadores e ambientes de execução antigos (por exemplo, Node.js versões abaixo da 12).

\n\n

O principal problema que o Babel resolve é a lacuna entre os novos recursos da linguagem (arrow functions, async/await, desestruturação, classes, módulos, encadeamento opcional, etc.) e o suporte a esses recursos em ambientes de execução reais. O Babel atua como uma ponte, permitindo que os desenvolvedores usem todos os benefícios do JavaScript moderno sem precisar esperar que todos os navegadores sejam atualizados.

\n\n

O Babel consiste em três componentes principais:

\n

\n
• Núcleo (@babel/core) — o motor principal que analisa o código, o transforma e gera novo código.
\n
• Plugins — módulos individuais, cada um responsável por transformar uma construção sintática específica (por exemplo, plugin para arrow functions, para async/await).
\n
• Presets — conjuntos pré-configurados de plugins (por exemplo, @babel/preset-env, @babel/preset-react).
\n

\n\n

O Babel também é usado para transpilar TypeScript, JSX (React), Flow e outras extensões do JavaScript.

\n\n

Instalação do Babel

\n\n

O Babel é instalado via npm (Node Package Manager). Para começar, você precisará do Node.js versão 12 ou superior.

\n\n

Crie um novo projeto e inicialize-o:

\n

mkdir my-babel-project\ncd my-babel-project\nnpm init -y

\n\n

Instale os pacotes principais do Babel:

\n

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

\n\n

Vamos detalhar o que instalamos:

\n

\n
• @babel/core — o núcleo do Babel. Sem ele, nada funcionará.
\n
• @babel/cli — interface de linha de comando, permitindo executar o Babel a partir do terminal.
\n
• @babel/preset-env — o preset mais importante, que determina automaticamente quais plugins são necessários com base nos ambientes de execução alvo (navegadores ou versões do Node.js).
\n

\n\n

Para trabalhar com React, instale adicionalmente:

\n

npm install --save-dev @babel/preset-react

\n\n

Para TypeScript:

\n

npm install --save-dev @babel/preset-typescript

\n\n

Início rápido com exemplo de código

\n\n

Crie um arquivo de configuração do Babel (babel.config.json ou .babelrc) na raiz do projeto:

\n

{\n  "presets": [\n    ["@babel/preset-env", {\n      "targets": {\n        "node": "current"\n      }\n    }]\n  ]\n}

\n\n

Crie o arquivo src/index.js com código moderno:

\n

// src/index.js\nconst greet = (name) => {\n  return `Hello, ${name}!`;\n};\n\nconst users = ['Alice', 'Bob', 'Charlie'];\nconst greetings = users.map(user => greet(user));\n\nconsole.log(greetings);\n\n// Usando async/await\nconst fetchData = async () => {\n  const data = await Promise.resolve({ message: 'Success' });\n  console.log(data.message);\n};\n\nfetchData();

\n\n

Agora compile o código com o Babel:

\n

npx babel src --out-dir dist

\n\n

Após executar o comando, na pasta dist aparecerá o arquivo index.js com o código transformado:

\n

// dist/index.js\n"use strict";\n\nvar greet = function greet(name) {\n  return "Hello, ".concat(name, "!");\n};\n\nvar users = ['Alice', 'Bob', 'Charlie'];\nvar greetings = users.map(function (user) {\n  return greet(user);\n});\n\nconsole.log(greetings);\n\nvar fetchData = async function fetchData() {\n  var data = await Promise.resolve({ message: 'Success' });\n  console.log(data.message);\n};\n\nfetchData();

\n\n

Observe