El problema de las versiones modernas de JavaScript
JavaScript (en adelante, JS) es un lenguaje que ha evolucionado con el tiempo e ido añadiendo nuevas características. De hecho, desde la versión ES6 ha sido un no parar. Eso ha hecho que el lenguaje se modernice, pero también ha traído el problema de las incompatibilidades con las numerosas versiones de navegadores que existen.
Por ejemplo, si vamos a MDN y buscamos una característica nueva como son las arrow functions, al final del artículo verás que no son compatibles con el navegador Explorer. ?
Estos problemas de incompatibilidades son lo que en inglés se conoce como browser support. Para evitarnos dolores de cabeza, existen herramientas tan útiles como Babel, que "traduce" nuestro código de JS moderno a un código más antiguo, compatible con todos los navegadores.
Así nosotros nos despreocupamos del browser support en su mayor medida, y nos centramos en escribir código mientras Babel se ocupa del resto. ?
Introducción a Babel
Babel es la herramienta que convierte cualquier característica moderna de JS en código compatible con versiones de navegadores antiguas. Por ejemplos, si utilizamos JS classes, Babel las convertirá a prototipos, que es la manera antigua de crear clases en JS.
Para ver cómo funciona Babel, no tenemos más que irnos a la opción del menú Try it out y escribir código moderno en la ventana de la izquierda. Simultáneamente verás como Babel hace su magia en la ventana de la derecha, convirtiendo tu código moderno en código más antiguo, compatible con todos los navegadores.
Prueba a escribir código antiguo, como:
function greet() {
console.log('helloooo');
}
y verás que a la derecha se mantiene igual, porque Babel no ha necesitado hacer ninguna conversión a código más antiguo. Si ahora escribimos la versión moderna de ese mismo código:
const greet = () => console.log('helloooo');
la cosa ya cambia a la derecha, mostrando:
var greet = function greet() {
return console.log('helloooo');
};
¿Has visto qué fácil nos lo pone Babel? ? Prueba a escribir todo el código moderno que se te ocurra y alucina con el resultado.
Para usar Babel en cualquier proyecto, necesitamos instalarlo en nuestro ordenador. Babel viene "empaquetado" en un paquete para descargar, parecido al concepto de cuando te descargas un archivo comprimido ZIP. Para poder instalarlo antes necesitamos tener instalado NPM y NodeJS.
? NodeJS es un entorno de JavaScript (en inglés, JavaScript environment) que nos permite ejecutar código JS directamente en nuestro PC o en algún servidor, en lugar de únicamente dentro del navegador.
? NPM es un gestor de paquetes (en inglés, package manager). No tenemos que preocuparnos de su instalación, porque ya viene junto con NodeJS cuando lo instalemos.
Instalación paso a paso de NodeJS y Babel
1. Instalamos NodeJS en nuestro ordenador, es decir, hacemos una instalación típica que instalará NodeJS de manera global. Es posible que ya tengas instalado NodeJS. Para comprobarlo, abre tu consola (yo uso cmder) y escribe el comando node -v. Si te devuelve una versión, tipo v10.16.3, es que ya lo tienes instalado.
Si no, ve a la web de NodeJS y descárgatelo pinchando en el botón de la izquierda, el que pone "Recomendado para la mayoría". Recuerda que esto instalará tanto NodeJS como NPM. Te recomiendo que sigas el asistente de instalación sin modificar nada, dándole a "siguiente", "siguiente", "siguiente" y leyéndote los términos y condiciones, por supuesto. ?
2. Una vez la instalación haya terminado, cierra y vuelve a abrir tu consola (porque es conveniente resetearla) y vuelve a introducir el comando node -v. Ahora ya te debería devolver la versión de NodeJS que te haya instalado.
Con NodeJS instalado, ya podemos ejecutar JS directamente en nuestro ordenador, requisito necesario para poder instalar y usar Babel. Porque lo que hace Babel es convertir nuestro código moderno en nuestro ordenador primero, para que el código convertido (a JS compatible) pueda ejecutarse en el navegador posteriormente.
3. Crea una carpeta en tu ordenador, donde quieras. Esa será la carpeta para hacer un proyecto-test con Babel.
4. En tu terminal, navega hasta esa carpeta. Desde vsCode puedes abrir tu proyecto, hacer click derecho sobre la carpeta y darle a Reveal in Explorer. Eso te la abrirá. Desde ahí puedes copiar el path y en tu terminal escribir cd [tu-path-aquí].
Así ya estarás dentro de la carpeta en tu terminal.
Lo habitual cuando creamos un proyecto que va a contener paquetes (también llamadas librerías o packages) de proveedores externos (como Babel) es crear un archivo package.json. Este archivo mantiene un registro de todos los paquetes de nuestro proyecto y recopila un poco de información sobre el mismo.
Para crear un package.json escribimos el comando npm init. Esto no sólo creará un package.json sino que creará un proyecto preparado para recibir librerías externas. Por eso, te hará algunas preguntas que puedes saltarte dándole a enter.
Con esto hecho, ya podrás ver un archivo package.json con un contenido similar a este:
{
"name": "babel-webpack-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ro",
"license": "ISC"
}
5. Instalamos nuestro primer paquete usando NPM: Babel. En realidad instalaremos dos a la vez, uno es la librería de Babel en sí misma y el otro la command line interface (CLI) de Babel. Para eso, en la consola apuntando a la carpeta de nuestro proyecto, escribimos el comando npm install [+ nombre del paquete].
Si queremos guardar el paquete de manera local (sólo accesible en nuestro proyecto), debemos usar el banderín --save-dev al final. Eso quedará registrado en nuestro package.json, que registrará ese paquete como una development dependency.
Así que haríamos: npm install @babel/core @babel/cli --save-dev
Verás que tu package.json se ha actualizado y ya incluye estas dos librerías. También se ha generado otro archivo llamado package-lock.json y una carpeta llamada node_modules con miiiiles de archivos en su interior. ? Esos archivos son básicamente código necesario para que podamos utilizar las librerías instaladas. Es decir, para usar Babel.
Prácticamente nunca tendrás necesidad de entrar en los node_modules y editar algo, así que no te asustes por las cientos de carpetas en su interior. Si quieres, despliégalas, échales un vistazo, y después ciérralas y sigue con tu vida. ?
Tampoco necesitaremos tocar el archivo package-lock.json, porque es un archivo que registra automáticamente las versiones de las librerías que usamos y otra información útil que podemos consultar.
6. Vamos a instalar otro paquete relacionado con Babel, babel preset. Esta librería nos proporciona una serie de plugins que facilitarán el trabajo a Babel a la hora de convertir código moderno a código compatible.
npm install @babel/preset-env --save-dev
7. Definimos el preset en un archivo nuevo de nuestro proyecto, así que primero creamos dicho archivo. Lo llamaremos .babelrc. Llámalo como quieras, pero ese nombre es una convención. Así está nuestro árbol de carpetas, por si tienes dudas:
- ?babel-webpack-project
- ? node_modules
- ? .babelrc
- ? package-lock.json
- ? package.json
El preset que queremos usar lo definimos dentro de un objeto.
{
"presets": ["@babel/preset-env"]
}
Con esto, cada vez que Babel se ejecute sabrá cómo tiene que convertir nuestro código.
Cómo usar la CLI de Babel
Utilizar Babel es muy sencillo. Simplemente creamos un archivo JS donde escribimos código moderno y luego, usando la CLI de Babel, le especificamos dónde está nuestro archivo JS y le damos nombre a un nuevo archivo JS que Babel creará con todo nuestro código ya convertido a código JS compatible. Veámoslo paso por paso.
1. Creamos un archivo JS dentro de la carpeta de nuestro proyecto, al que llamamos before.js, por ejemplo.
2. Escribimos un bloque de código con características modernas (en inglés, modern features) de JS.
const greet = name => {
console.log(`hey ${name}`);
};
greet();
Verás que hemos usado const, arrow functions y template literals.
? Para acceder a la consola de Babel (la CLI), debemos localizarla. Está en una carpeta llamada .bin que contiene todos los archivos binarios. La encontrarás al principio de los node_modules.
3. Desde nuestra terminal, navegamos hasta ese directorio y escribimos un comando con:
- el archivo de JS moderno que queremos convertir a una versión de JS compatible.
- el banderín -o para decirle que el nombre del archivo que escribiremos a continuación es donde queremos almacenar el código que Babel convierta (o viene de output).
- el nombre del archivo donde queremos almacenar el código que Babel convierta.
El comando sería:
.\node_modules\.bin\babel.cmd before.js -o after.js
Y así debería aparecerte un archivo recién creado, a la altura de before.js, llamado after.js. Dentro verás el mismo código que has escrito, pero traducido a una versión más antigua, compatible con todos los navegadores. ?
Cada vez que queramos convertir nuestro código, podemos utilizar ese comando. Pero más sobre esto luego.
Nota sobre los node_modules
Ya sabemos que cuando instalamos un paquete, éste se almacena en la carpeta node_modules. También queda registrado en el archivo package.json. Ese registro es fundamental, porque es lo que actúa como guía cuando queremos compartir un proyecto que contiene paquetes de terceros, como éste.
Porque cuando compartimos un proyecto, ya sea subiéndolo a GitHub o mandándolo de cualquier forma, no debemos incluir los node_modules, porque eso haría que nuestro proyecto pesase y ocupase demasiado, ya que la carpeta node_modules es gigante. ?
Afortunadamente, tenemos el package.json para listar todos los paquetes que hemos ido instalando, de modo que, cuando alguien viese nuestro proyecto sin los node_modules, no tendría más que acudir al package.json y descargar todos los paquetes necesarios para lanzar nuestro proyecto.
Todo esto se hace además de manera muy sencilla con un solo comando: npm install.
Si por ejemplo fuésemos nosotros los que hubiésemos recibido este proyecto, nos habríamos encontrado esta estructura:
?babel-webpack-project- ? .babelrc
- ? after.js
- ? before.js
- ? package-lock.json
- ? package.json
Es decir, el proyecto sin los node_modules. Prueba a borrar toda la carpeta para simular el efecto.
Desde nuestra terminal, navegaríamos hasta la carpeta del proyecto y haríamos npm install. ¡Y voilà! Los node_modules volverían a aparecer. ?♂️
Cómo añadir NPM scripts y configurar un entorno de trabajo inicial
Es momento de crear el flujo o entorno de trabajo (en inglés, workflow) habitual en este tipo de proyectos. Así, lo normal cuando trabajamos en un proyecto con librerías externas es utilizar scripts de NPM para convertir el código moderno de JS a código antiguo de forma continua, sin que nosotros estemos pendientes. Lo normal también es tener un árbol de carpetas semejante a este:
- ?dist
- ?assets
- ? bundle.js
- index.html
- ?node_modules
- ?src
- ? index.js
- ? .babelrc
- ? package-lock.json
- ? package.json
- la carpeta src contiene todo el código fuente que nosotros creamos (código JS moderno)
- la carpeta dist contiene el código JS convertido a código compatible con todos los navegadores. Será la que en última instancia se despliegue (en inglés, deploy) en un servidor para hacer nuestro proyecto visible públicamente. Dentro de esta carpeta estará un index.html conectado al código JS convertido.
1. Así que creamos dicho árbol de carpetas y escribimos un boilerplate en el index.html, vinculado al bundle.js. Recuerda que ese archivo JS no lo vamos a tocar, pues se llenará automáticamente con código compatible basándose en el código que escribiremos en el index.js.
2. Estrenamos el archivo index.js escribiendo algo de código moderno, por ejemplo:
const greet = name => {
console.log(`hey ${name}`);
};
greet('mike');
greet('dustin');
greet('max');
Si abres tu app en el navegador (yo uso el plugin live-server de vsCode), no verás nada en la consola, lógicamente, porque el index.html está vinculado al bundle.js. Para poder verlo en la consola, le decimos que traduzca el código del archivo X al archivo Z, como explicamos arriba.
.\node_modules\.bin\babel.cmd .\src\index.js -o .\dist\assets\bundle.js
Si ejecutas este comando, verás que ahora tu código del index.js está en el bundle.js, convertido.? Además, también podrás ver en la consola de tu navegador el resultado de la función greet(). ¡Genial! Pero la verdad es que es bastante tedioso tener que escribir ese comando cada vez que queramos convertir nuestro código. Aquí es donde entran en juego los scripts de NPM. ?
Verás que en el package.json hay una sección de scripts.
Puedes borrar el test, está ahí sólo por motivos ilustrativos.
Lo que nos permite esta sección es añadir cualquier comando de la terminal aquí, bajo un nombre más corto y práctico. Por ejemplo:
? Si te da error porque la barra está en la dirección que no debe, simplemente sustitúyela, como he hecho yo.
Para ejecutar un script, debemos usar el comando npm run [nombre del script]. En nuestro caso:
npm run babel
Haz la prueba, cambia algo del código del index.js y ejecuta ese comando, verás que funciona igual que cuando escribíamos el comando en su versión larga.
Esto está muy bien, así nos ahorraremos algo de tiempo, pero sigue siendo un peñazo el tener que ejecutar ese comando cada vez que añadamos algo al index.js y queramos convertirlo. Para solucionar eso podemos usar el bandarín -w. Este banderín estará pendiente de cada cambio que suceda en el index.js y automáticamente lo convertirá al bundle.js, sin que nosotros tengamos que hacer nada. ?
Lo único que tendremos que hacer será ejecutar npm run babel una sola vez al principio del proyecto, y ya tendremos activado a nuestro espía que todo lo ve. En inglés a esto se le llama "watch for changes". ?
3. Añadimos el banderín -w a nuestro script.
¡Muuucho más cómodo así! ?
THE END!
¡Y con esto terminamos la primera parte de esta guía sobre Babel y Webpack! Espero que hayas aprendido algo nuevo ?. Si te queda alguna duda, ¡nos vemos en los comentarios!
Si quieres seguir aprendiendo, te espero en la parte #2.
Y si crees que este post puede serle útil a alguien, ¡compártelo!
Otros artículos que pueden interesarte