Los desarrolladores Frontend requieren escribir Javascript utilizando las nuevas características, pero a la vez se requiere mantener la compatibilidad con navegadores antiguos, para ello se puede usar Babel, el cual simplifica el proceso de mantener la compatibilidad entre navegadores.

¿Qué es Babel?

Babel es un compilador de JavaScript que transforma código JavaScript moderno (ES6/ES2015, ES7/ES2016) a versiones anteriores de JavaScript que son compatibles con la mayoría de los navegadores actuales.

Con Babel se pueden conseguir los siguientes beneficios:

• Compatibilidad de navegadores: Babel convierte código Javascript para que sea compatible con la mayoría de navegadores, incluyendo navegadores antiguos.
• Uso de características modernas: Babel permite escribir código con características modernas y que sean compatibles con navegadores antiguos.
• Optimización de código: Babel puede realizar optimizaciones y reducir el tamaño del código resultante con lo que se obtiene una mejora en el rendimiento.
• Integración con herramientas de desarrollo: Babel se integra fácilmente con herramientas para automatizar tareas como Webpack, Gulp o Grunt.

Instalar Babel

Babel requiere para su funcionamiento Node.js, además de ello se requieren tres paquetes:

• @babel/core Nucleo del compilador de Babel.
• @babel/cli Cliente de Babel para poder usarlo en línea de comandos.
• @babel/preset-env Permite configurar la compatibilidad de navegadores necesarios.

Entonces utilizamos npm para instalar los paquetes necesarios.

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

Configuración

Después de instalar Babel, necesitas configurarlo en tu proyecto, para ello crea un archivo llamado .babelrc en la raíz de tu proyecto y agrega lo siguiente:

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

Esta configuración indica a Babel que utilice el preset @babel/preset-env, que se encarga de transformar el código según la compatibilidad con los navegadores especificada.

Utilizar Babel

Una vez configurado, puedes utilizar el cliente Babel para compilar tu código, puedes compilar archivos individuales o también directorios

npx babel source-file.js --out-file compiled-file.js   # Compilar un archivo 
npx babel source-folder --out-dir compiled-folder      # Compilar una carpeta

Entonces, si tenemos el archivo app.js en la carpeta src/ que deseamos compilar y el resultado se escriba en la carpeta dist/, usaremos el siguiente comando:

npx babel src/app.js --out-file dist/app.js

Ejemplo de uso

Como ejemplo, creamos un archivo y usamos ES6 (constantes, arrow functions):

const MAX_CHARS = 8;

let circleArea = (radio) => {
    return 2 * Math.PI * radio;
};

let squareArea = width => width * width;

Luego de compilar el archivo utilizando Babel obtendremos el siguiente resultado:

"use strict";

var MAX_CHARS = 8;
var circleArea = function circleArea(radio) {
  return 2 * Math.PI * radio;
};
var squareArea = function squareArea(width) {
  return width * width;
};

Se puede observar que se ha convertido el código utilizando Javascript tradicional.

Siguientes Pasos

Para proyectos más grandes, es recomendable integrar Babel con herramientas de construcción como Webpack. Webpack puede utilizar Babel como parte de su proceso de compilación para gestionar dependencias, optimizar código y más.

Referencias

• What is Babel? – Babel
• @babel/cli – Babel
• ¿Qué es Babel?