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)