Babel, es un compilador de JavaScript, que nos permite usar el JavaScript del futuro, HOY, es decir todas las especificaciones que se han dado desde 2015 (ES6, ES7, ES8, etc.) y que poco a poco los navegadores van implementando en su ruta de desarrollo. Lo que hace es convertir nuestro código moderno en una versión estándar (ES5.1) que todos los navegadores puedan interpretar, y listo, eso es lo que hace Babel, no hay más que decir.
Babel nos permite soportar todas estas características que en artículos posteriores iré explicando:
- Arrow functions
- Async functions
- Async generator functions
- Block scoping
- Block scoped functions
- Classes
- Class properties
- Computed property names
- Constants
- Decorators
- Default parameters
- Destructuring
- Do expressions
- Exponentiation operator
- For-of
- Function bind
- Generators
- Modules
- Module export extensions
- New literals
- Object rest/spread
- Property method assignment
- Property name shorthand
- Rest parameters
- Spread
- Sticky regex
- Template literals
- Trailing function commas
- Type annotations
- Unicode regex
Instalación
Debes tener instalado previamente Node.js en tu equipo y en la carpeta de tu proyecto, debes instalar vía npm los siguientes paquetes:
$ npm install --save-dev babel-cli babel-core babel-preset-env
Si no sabes nada sobre la instalación de paquetes con Node.js y NPM te invito a que leas este artículo donde te lo explico ;).
Después a la instalación de estos paquetes, deberás crear un archivo de configuración en la carpeta de tu proyecto que se llame .babelrc con el siguiente código:
{
"presets": ["env"]
}
Posteriormente, si usas algún gestor de tareas o empaquetador como gulp o webpack ya nada más requieres programar una tarea que compile babel en dichas herramientas.
Si no usas ninguna de estás herramientas, entonces define el siguiente comando en tu archivo package.json de tu proyecto:
"babel": "babel src --watch --out-dir public"
Donde:
- 'src' será la carpeta de origen con los archivos js con sintaxis moderna y
- 'public' será la carpeta donde se compilarán los archivos js con sintaxis estándar para todos los navegadores.
De tal manera que tu archivo package.json debería quedarte más o menos así:
{
"name": "configurando-babel",
"version": "1.0.0",
"description": "Aprendiendo a configurar Babel",
"scripts": {
"babel": "babel src --watch --out-dir public"
},
"author": "Jonathan MirCha <jonmircha@gmail.com>",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-preset-env": "^1.6.0"
}
}
Finalmente lo único que tienes que hacer es ejecutar en la terminal el comando babel y listo:
$ npm run babel
De cualquier manera no esta de más que siempre revises la documentación en el sitio oficial ;).
Recuerda que en EDteam tenemos varios cursos que te introducen y especializan en este maravilloso lenguaje:
- JavaScript desde cero
- Node.js desde cero
- JavaScript Avanzado: Paradigmas de Programación
- HTML5 Avanzado: Progressive Web Apps
- React desde cero
- Angular desde cero
- Vue.js desde cero
En el siguiente capítulo te hablare de las variables de bloque y las constantes.
Artículos anteriores de la serie 'El estándar actual de JavaScript':
Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana...
...bye ;)