¿Qué es Babel?
Tags: babel, javascript, compilador
Published: 2021-03-11 10:20:27

---
canonical_url: https://www.freecodecamp.org/espanol/news/que-es-babel/
---
En el tercer artículo de esta serie sobre herramientas orientadas a la experiencia de desarrollador revisamos **Babel.**

Puedes encontrar los artículos previos en:

- [¿Qué es Linting y ESLint?](https://www.freecodecamp.org/espanol/news/que-es-linting-y-eslint/)
- [¿Qué es npm?](https://www.freecodecamp.org/espanol/news/que-es-npm/)

# ¿Qué es Babel?

Babel es un "**compilador"** (o transpilador) para javascript. Básicamente permite transformar código escrito con las últimas y novedosas características de javascript y transformarlo en un código que sea entendido por navegadores más antiguos.

## ¿Por qué es necesario transformar el código Javascript?

Javascript es un lenguaje que no para de evolucionar y que cada año agrega nuevas características a su estándar. El estándar de Javascript, conocido como ECMAScript.

ECMAScript (o abreviado ES) es la especificación en la que se basa Javascript. ES nace de la organización ECMA International, cuyo objetivo es desarrollar estándares y reportes técnicos para facilitar el uso de tecnologías de la información.

Esta organización se constituye de varios equipos siendo el TC39 el equipo encargado de revisar, proponer y definir las características que el estándar tendrá cada año.

Lamentablemente la velocidad de actualización del estándar no es la misma que la velocidad de adopción de los navegadores, es decir, los navegadores no siempre pueden implementar las nuevas características en sus engine, ni tampoco hacerlo retrocompatible con versiones más antiguas. Además, tampoco es posible asegurar que todos los usuarios estén utilizando navegadores modernos o de última generación lo que imposibilita tener la seguridad de que podamos hacer uso de las nuevas características del lenguaje en todas partes.

### ¿Qué ventajas tiene el utilizar las nuevas características propuestas por ECMA?

Las nuevas características y "habilidades" que javascript provee cada año son sobre todo ventajas para ti como desarrollador, ya que te proporciona de herramientas más poderosas y expresivas para implementar soluciones a problemas complejos. Algunas de las características se han ido agregando con los años son:

- Funciones flechas (arrow functions)
- Plantillas Literales (Template Literals)
- Map y Set
- Let y Const
- Clases
- Encadenamiento Opcional (Optional Chaining)
- Operador Fusión Nula (Nullish Coalescing)
- Métodos Privados (ES2021)
- Operador de Asignación Local (ES2021)
- Puedes ver más en la especificación actual de ECMA en: [https://www.ecma-international.org/publications-and-standards/standards/ecma-262/](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/)

## ¿Entonces como puedo usar las nuevas versiones de Javascript?

Ya que no todos los navegadores pueden interpretar o entender las nuevas características del lenguaje que estás o quieres usar es necesario buscar algunas soluciones, una de ellas es el uso de polyfills o librerías que implementan con código "antiguo" el mismo comportamiento que lo que intentas expresar con características nuevas, un ejemplo de esto es el polyfill para usar [Object.keys](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Object/keys#polyfill)

Pero si necesitas usar algo más que un par de operadores entonces entra en juego más requerimientos y aquí es donde **Babel** hace su aparición

**Babel**  permite transformar código de versiones nuevas de ES (ECMA2015+) a versiones retrocompatibles de Javascript, esto lo realiza mediante:

- Transformaciones de sintaxis
- Polyfills
- Transformaciones de código fuente (codemods)
- etc

> Si lo que gustas es saber más sobre compiladores y como funciona babel en el alto nivel puedes revisar [The super tiny compiler](https://github.com/jamiebuilds/the-super-tiny-compiler)

Babel es entonces una herramienta que lee tu código (archivo por archivo) y genera nuevo código que puedes usar en navegadores antiguos (o como entrada para algún bundler como webpack, rollup, etc)

Babel es casi omnipresente, utilizado por el 99.9% de los equipos que desarrolla software utilizando javascript, además Babel se alinea directamente a las discusiones del [TC39](https://github.com/tc39/ecma262#ecmascript) proveyendo así implementaciones de propuestas que aún ni siquiera son aceptadas por el comité, lo que te permite tener dichas funcionalidades mucho antes incluso que los navegadores.

## ¿Cómo funciona Babel?

Revisaremos de forma breve como babel funciona convirtiendo tu código de una versión a otra.

Considera este pequeño trozo de código javascript

```jsx
const sum = (a, b) => a + b
```

Ahora considera que por alguna razón necesitas que este se ejecute en un navegador antiguo, entonces deberás transformarlo a

```jsx
'use strict';
function sum(a,b) {
	return a + b;
}
```

¿Cómo se logra esto?

Es un proceso que se ejecuta en al menos 3 procesos

1. Parsing: Babel toma el código fuente, lo lee y lo convierte en una representación abstracta conocida como AST (Abstract Syntax Tree). Esta es una representación donde cada nodo del árbol representa una estructura del código fuente. Babel utiliza [Babylon](https://github.com/babel/babel/tree/master/packages/babel-parser) para este trabajo.

    Puedes ver el AST de nuestro ejemplo visitando [astexplorer.net](https://astexplorer.net/#/gist/88e097f017a6b82f62dda743f91833da/latest)

2. Transformación: En esta etapa Babel trabaja sobre el AST generado en el proceso anterior y lo manipula  para generar un nuevo AST que represente el código necesario para el soporte seleccionado.

Este paso es realizado por una serie de "plugins" que permiten ejecutar varias transformaciones de forma sencilla y atómica. Aquí cada plugin toma el AST generado por el previo para aplicar una pequeña transformación.

> Puedes revisar como funciona el plugin `[babel-plugin-transform-arrow-function](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-arrow-functions)`  o leer el "[libro de mano de los plugin de babel](https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/plugin-handbook.md#introduction)" (en inglés) para saber como funcionan o como implementar tu propio plugin

3. Generación de código: En esta etapa, babel toma el AST generado y crea/escribe el código compatible, es decir, crea ese trozo de código soportado por navegadores más antiguos.

```jsx
'use strict';
function sum(a,b) {
	return a + b;
}
```

# Instalar y configurar Babel

Ya sabemos que hace y hasta cierto punto como funciona babel, es hora de hacer uso de su poder, para eso lo primero es instalarlo en nuestro equipo. Para eso necesitamos utilizar el manejador de dependencias de node **[npm](https://www.freecodecamp.org/espanol/news/que-es-npm/)**

```jsx
npm install --save-dev @babel/core @babel/cli
```

> Si no tienes el archivo package.json creado, crea uno antes de instalar dependencias. `npm init` te ayudará.

Una vez instalado esto, verás las nuevas dependencias de desarrollo en tu archivo `package.json`

Ahora para ejecutar babel puedes intentarlo directamente en la consola accediendo al binario dentro de la carpeta de instalación o utilizar las bondades de npm y su archivo de configuración al crear algunos scripts que te permitan ejecutarlo fácilmente.

Simplemente agrega la sección `scripts` y define el comando `build.`

```jsx
"scripts": {
	"build": "babel src -d lib"
}
```

Este comando le indica a babel que lea todo el contenido del directorio `src` y que genere la salida en el directorio `lib`.

Ahora para ejecutar solo basta utilizar npm.

```jsx
npm run build
```

Si ejecutas esto utilizando el breve código de ejemplo de este artículo verás que babel hizo absolutamente nada, esto es por que la configuración por defecto de babel no define qué se debe hacer. Como comenté más arriba, Babel utiliza un sistema de plugins para definir las transformaciones que necesitas realizar.

## Configurando Babel

La configuración de babel se realiza utilizando un archivo de configuración, nada nuevo bajo el sol, llamado `babel.config.js` Un archivo javascript que retornará un objeto con la configuración deseada. El hecho de ser un archivo javascript te permite "calcular" ciertos parámetros como por ejemplo, utilizando variables de entorno.

Babel distribuye un "set" de configuraciones pre-definidas llamadas `presets`. Estos son básicamente un conjunto de plugins comúnmente utilizados que te permiten iniciar rápidamente.

Primer instalamos el paquete

```jsx
 npm install @babel/preset-env --save-dev
```

Y luego definimos su uso en el archivo de configuración

```jsx
{
  "presets": ["@babel/preset-env"]
}
```

Este preset es "inteligente" y decide qué plugins se usarán (y por ende que transformaciones se aplicaran) en base a la configuración de ambientes que quieres soportar. Dado que no especificamos ningún ambiente objetivo, babel asumirá que queremos transformar todo el código de versiones ES2015 en adelante en código compatible con ES5. No se recomienda utilizar babel de esta manera ya que estarás transformando código que probablemente los navegadores de tus usuarios ya soportan.

En nuestro particular y sencillo ejemplo, la transformación para soportar ES5 es convertir la función flecha en una función normal, puedes ver el resultado [aquí](https://babeljs.io/repl#?browsers=defaults&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBBCuBbGBeGAKAhgGhgIwEpUA-GTGAanwCgg&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env&prettier=false&targets=&version=7.13.9&externalPlugins=) pero, las funciones flechas ya son [soportadas por la gran mayoría de navegadores actuales](https://caniuse.com/arrow-functions) por lo que no tiene sentido hacer la transformación

Para decirle a babel que queremos soportar navegadores un poco más modernos podemos pasar un nuevo parámetro de configuración.

Babel se integra con [browserlist](https://github.com/browserslist/browserslist) que no es más que una nomenclatura de configuración para definir qué navegadores o ambientes de node deben ser soportados por distintas herramientas. Para su uso se recomienda crear un nuevo archivo llamado `.browserlistrc` en donde pues escribir la lista de navegadores soportados.

Creemos el archivo de configuración y digamos que queremos soportar una lista de navegadores bastante nuevos, por ejemplo, que considere las estadísticas de uso y soporte todos los navegadores que tengan una porción de uso superior al 2%.

```jsx
> 2%
```

Ahora al ejecutar `npm run build` nuevamente veremos que el resultado es que nuestra función flecha no fue modificada (Puedes ver el [ejemplo aquí](https://babeljs.io/repl#?browsers=%3E%202%25&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBBCuBbGBeGAKAhgGhgIwEpUA-GTGAanwCgg&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env&prettier=false&targets=&version=7.13.9&externalPlugins=))

## Conclusión

En resumen babel es una herramienta necesaria hoy en día para así poder aprovechar todo el poder de las nuevas versiones de Javascript mientras desarrollas sin preocuparte si los navegadores soportan o no dicha característica.

Su configuración más común es sencilla, simplemente utilizas el plugin `preset-env` y configuras los navegadores que quieres soportar. Siempre puedes ir más allá e ir agregando plugins para, incluso, soportar características que aún son solo una propuesta.

Por lo general no ejecutas babel directamente si no, como parte de un sistema de transformación a producción más grande que incluye algún bundler como webpack, rollup, vite, etc.

### Saber más
- Puedes encontrar más información sobre que es ES6 y TC39 en este episodio de [Café con Tech Podcast](https://www.cafecon.tech/1081172/3872285-que-es-es6)
- Encuentra más información sobre TC39 [en este artículo de Freecodecamp en inglés.](https://www.freecodecamp.org/news/tc39-and-its-contributions-to-ecmascript-c178b77f32e1/)

![Footer Social Card.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1615457338201/5yOtr5SdF.jpeg)
✉️ [Únete a Micro-bytes](https://microbytes.matiashernandez.dev)         🐦 Sígueme en [Twitter](https://twitter.com/matiasfha)           ❤️ [Apoya mi trabajo](https://buymeacoffee.com/matiasfha) 

<a href="https://www.buymeacoffee.com/matiasfha"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=matiasfha&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>