Que es Babel JS y como Instalarlo ?

Javascript

En la actualidad el uso de múltiples herramientas y complementos para desarrollar proyectos es muy constante, Babel JS es una de ellas, Vamos a dar los primeros pasos con Babel JS, para que nos sirve y como instalarlo, esta herramienta es muy potente y nos va facilitar mucho el trabajo con Javascript.

Que es Babel JS

Babel es una herramienta que sencillamente nos transpila nuestro código Javascript ES6 a la versión anterior Javascript ES5, que queremos decir con esto, bien los navegadores suelen demorar en dar soporte a las nuevas mejoras y características de Javascript y como la versión de Javascript ES5 es soportada en todos los navegadores, entonces debemos usar las nuevas características de Javascript ES6 y convertirlas a Javascript ES5 que es la versión que los navegadores soportan.

Hay mucha lentitud de las empresas que dan soporte a los Navegadores en implementar las nuevas versiones de ES (Ecma Script) suelen hacerlo cada ciertos meses hasta años, pero con Babel JS usaremos siempre lo ultimo de Javascript y con la tranquilidad que lo podremos correr en los Navegadores sin problemas.

Babel JS también trabaja con plugins que nos ayudan a transpilar nuestro codigo Javascript a otros entornos como React JS entre otros.

imagen: babeljs.io

Como instalar Babel JS

Nota: Para trabajar con Babel JS es vital que instales Node JS para gestionar comandos y demás acciones. Te recomendamos revisar este tutorial y seguir los pasos correspondientes para que instales Node JS.

Crea o ve a la carpeta de tu proyecto al cual le instalarás Babel JS, paso seguido debemos crear un archivo package.json para gestionar nuestro proyecto, para crearlo y configurarlo ejecutamos el siguiente comando

Te va pedir Configurar los datos y opciones que necesitemos

Vamos a instalar el Command Line (CLI) de Babel JS localmente para gestionar independientemente versiones y tareas en este único proyecto, tambien puedes instalarlo de manera global si así lo deseas, tomaremos la opción CLI es decir usaremos nuestra consola de comandos Node Js Command Prompt que se nos instala cuando instalamos Node Js, bien ahora ejecutamos el siguiente comando en la consola

Una ves que terminas de instalar Babel JS abre el archivo package.json y se crea una nueva linea de datos de nuestras dependencias

Con eso ya tenemos instalado Babel JS para trabajar en nuestros proyectos.

Ahora vamos a crear en la raíz de nuestro proyecto el archivo .babelrc para almacenar la configuración que haremos para trabajar con presets o plugins que nos ayudan a transpilar nuestro código JS a otros entornos y a ES5 como mencionamos al inicio del articulo.

Ejecutamos el siguiente comando para instalar los presets para Babel Js

Ahora abre el archivo que cramos llamado .babelrc y activamos los presets agregando lo siguiente

Por ejemplo si queremos transpilar nuestro código Javascript a React JS ejecutamos

Ahora abre el archivo .babelrc y agrega lo siguiente

Con esto Babel JS transpilara nuestro código a React JS y con el soporte para todos los navegadores.

Si deseas usar más presets revisa la documentacion oficial en la web de Babel JS

En su página oficial de Babel JS nos da la posibilidad de usarlo en otros entornos

imagen: babeljs.io

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required