DEV Community

Cover image for Guía rápida de Babel
Martin Wilches
Martin Wilches

Posted on

 

Guía rápida de Babel

Babel es un software que permite transpilar código, con el principal objetivo de aumentar la compatibilidad del programa para el despliegue del mismo en distintos navegadores.
ES6 a incluido nuevas características que en un principio no eran soportadas por todos los navegadores, generando de esta manera problemas de compatibilidad y por consiguiente un funcionamiento incorrecto del programa escrito con esta versión del lenguaje. Babel permite realizar la conversión de código escrito con la sintaxis permitida por el estándar ES6 a versiones anteriores.

Instalación de Babel

Babel es un modulo de Node.js, el cual puede ser instalado a través de su gestor de paquetes conocido como npm (node package manager), haciendo uso de la terminal del sistema.

Generar un archivo llamado package.json con el cual se puedan manejar los módulos del proyecto, en este caso Babel.

$ npm init
Enter fullscreen mode Exit fullscreen mode

Instalar Babel como un modulo de desarrollo.

$ npm i babel-cli -D
$ npm i babel-preset-env -D
Enter fullscreen mode Exit fullscreen mode

Crear un archivo llamado .babelrc.

$ touch .babelrc
Enter fullscreen mode Exit fullscreen mode

Incluir el siguiente objeto como código del archivo anterior, por medio del cual se indica que el código se transpilara a versiones de ES5 y anteriores.

{
  "presets":["env"]
}
Enter fullscreen mode Exit fullscreen mode

Dentro del archivo package.json incluir el script de ejecución de Babel.

"scripts": {
   "build": "babel src -d lib"
}
Enter fullscreen mode Exit fullscreen mode

El código del script anterior instruye lo siguiente:

  • Transpilar el código mediante Babel.
  • El código a transpilar será aquel localizado en el directorio src.
  • Crear un nuevo directorio llamado lib.
  • El código transpilado se localizará en este último directorio mencionado.

Por último el proceso de transpilación se podrá iniciar con el siguiente comando.

$ npm run build
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.