Saltar al contenido principal

¿Qué es Babel?

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Babel es un compilador de JavaScript​

Babel es un conjunto de herramientas principalmente utilizado para convertir código ECMAScript 2015+ en una versión de JavaScript compatible con navegadores y entornos actuales y antiguos. Estas son las principales funcionalidades que Babel ofrece:

  • Transformar sintaxis

  • Implementar polyfills para características faltantes en tu entorno objetivo (mediate polyfills de terceros como core-js)

  • Transformaciones de código fuente (codemods)

  • ¡Y mucho más! (consulta estos vídeos para inspirarte)

JavaScript
// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});
consejo

Para un excelente tutorial sobre compiladores, visita the-super-tiny-compiler, que también explica cómo funciona Babel a alto nivel.

ES2015 y versiones posteriores​

Babel soporta la última versión de JavaScript mediante transformadores de sintaxis.

Estos plugins te permiten usar nueva sintaxis ahora mismo sin esperar soporte de los navegadores. Consulta nuestra guía de uso para comenzar.

JSX y React​

¡Babel puede convertir sintaxis JSX! Consulta nuestro preset para React para empezar. Úsalo junto con el paquete babel-sublime para llevar el resaltado de sintaxis a otro nivel.

Puedes instalar este preset con

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

y añadir @babel/preset-react a tu configuración de Babel.

JSX
export default function DiceRoll(){
  const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6);
  };

  const [num, setNum] = useState(getRandomNumber());

  const handleClick = () => {
    const newNum = getRandomNumber();
    setNum(newNum);
  };

  return (
    <div>
      Your dice roll: {num}.
      <button onClick={handleClick}>Click to get a new number</button>
    </div>
  );
};
consejo

Más información sobre JSX

Anotaciones de tipos (Flow y TypeScript)​

¡Babel puede eliminar anotaciones de tipos! Consulta nuestro preset para Flow o preset para TypeScript para comenzar. Ten en cuenta que Babel no realiza comprobación de tipos; deberás instalar y usar Flow o TypeScript para verificar los tipos.

Puedes instalar el preset para Flow con

npm install --save-dev @babel/preset-flow
JavaScript
// @flow
function square(n: number): number {
  return n * n;
}

o el preset para TypeScript con

npm install --save-dev @babel/preset-typescript
JavaScript
function Greeter(greeting: string) {
  this.greeting = greeting;
}
consejo

Más información sobre Flow y TypeScript!

Extensible mediante plugins​

Babel está construido con plugins. Crea tu propia pipeline de transformación usando plugins existentes o escribe los tuyos. Usa fácilmente conjuntos de plugins mediante presets. Más información →

Crea un plugin al instante con astexplorer.net o usa generator-babel-plugin para generar una plantilla de plugin.

example-babel-plugin.js
// A plugin is just a function
export default function({ types: t }) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = [...name]
          .reverse()
          .join("");
      },
    },
  };
}

Depurable​

Soporte para source maps que permite depurar tu código compilado fácilmente.

Compatible con especificaciones​

Babel intenta mantenerse fiel al estándar ECMAScript tanto como sea razonablemente posible. También ofrece opciones específicas para priorizar el cumplimiento de especificaciones, aunque con posibles compromisos en rendimiento.

Compacto​

Babel intenta generar la mínima cantidad de código posible sin depender de runtimes voluminosos.

Esto puede ser difícil en algunos casos, por lo que existen opciones de "suposiciones" que intercambian cumplimiento de especificaciones por legibilidad, tamaño de archivo y velocidad.