Babel para JavaScript (Node.js): guía completa con ejemplos

¿Qué es Babel y para qué sirve?

\n\n

Babel es un potente transpilador (compilador) para JavaScript que permite a los desarrolladores escribir código en las versiones más modernas de ECMAScript (ES6, ES7, ES8, ES9, ES10, ES11, ES12 y superiores) y transformarlo en JavaScript compatible con versiones anteriores, que pueda ejecutarse en navegadores antiguos y entornos de ejecución (por ejemplo, Node.js versiones inferiores a la 12).

\n\n

El problema principal que resuelve Babel es la brecha entre las nuevas funcionalidades del lenguaje (funciones flecha, async/await, desestructuración, clases, módulos, encadenamiento opcional, etc.) y el soporte de estas funcionalidades en entornos de ejecución reales. Babel actúa como un puente, permitiendo a los desarrolladores utilizar todas las ventajas del JavaScript moderno sin tener que esperar a que todos los navegadores se actualicen.

\n\n

Babel consta de tres componentes principales:

\n

\n
• Núcleo (@babel/core) — el motor principal que analiza el código, lo transforma y genera nuevo código.
\n
• Plugins — módulos individuales, cada uno responsable de transformar una construcción sintáctica específica (por ejemplo, un plugin para funciones flecha, para async/await).
\n
• Presets — conjuntos de plugins preconfigurados (por ejemplo, @babel/preset-env, @babel/preset-react).
\n

\n\n

Babel también se utiliza para la transpilación de TypeScript, JSX (React), Flow y otras extensiones de JavaScript.

\n\n

Instalación de Babel

\n\n

Babel se instala a través de npm (Node Package Manager). Para empezar, necesitará Node.js versión 12 o superior.

\n\n

Cree un nuevo proyecto e inicialícelo:

\n

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

\n\n

Instale los paquetes principales de Babel:

\n

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

\n\n

Analicemos lo que instalamos:

\n

\n
• @babel/core — el núcleo de Babel. Sin él, nada funcionará.
\n
• @babel/cli — la interfaz de línea de comandos, que permite ejecutar Babel desde la terminal.
\n
• @babel/preset-env — el preset más importante, que determina automáticamente qué plugins se necesitan según los entornos de ejecución objetivo (navegadores o versiones de Node.js).
\n

\n\n

Para trabajar con 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

Inicio rápido con un ejemplo de código

\n\n

Cree un archivo de configuración de Babel (babel.config.json o .babelrc) en la raíz del proyecto:

\n

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

\n\n

Cree un archivo src/index.js con 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// Usamos async/await\nconst fetchData = async () => {\n  const data = await Promise.resolve({ message: 'Success' });\n  console.log(data.message);\n};\n\nfetchData();

\n\n

Ahora compile el código con Babel:

\n

npx babel src --out-dir dist

\n\n

Después de ejecutar el comando, en la carpeta dist aparecerá un archivo index.js con el 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