Usando Babel con Webpack

Esta es la continuación del tutorial anterior Manejo de Loader y Plugins en Webpack. Como vimos en ese tutorial Webpack nos ayuda a juntar muchas herramientas en nuestro proyecto pero hay una que por la función tan importante que cumple debes conocerla si o si. Me refiero al transpilador de código Babel. Esta herramienta nos permite transpilar nuestro código de JavaScript moderno hacia una versión más estándar soportado por la mayoría de navegadores.

En este tutorial aprenderemos a utilizar la herramienta Babel con Webpack, que nos permitirá crear proyectos utilizando la última versión de JavaScript pero sin perder compatibilidad de la mayoría de navegadores.

Índice

1. Configurando Babel
2. Mejorando Babel con plugins
3. Tu turno
4. El código

1. Configurando Babel

Para poder utilizar Babel en nuestro proyecto primero debemos instalar el núcleo de babel utilizando el siguiente comando. Este es el responsable de transpilar nuestro código JavaScript moderno hacia una versión anterior estándar del mismo.

npm install --save-dev @babel/core

Babel es la tecnología independiente a Webpack que interpretará nuestro código y luego lo transpirará hacia una versión anterior de JavaScript. Sin embargo, para que Babel obtenga todo el código del proyecto debemos utilizar un Loader de webpack que se encargará de ello. De enviar el código JavaScript hacia Babel para su transpilación.

npm install --save-dev babel-loader

Por otro lado, Babel para su configuración utiliza presets o configuraciones ya preestablecida que los podemos descargarlas de internet. Como lo que nosotros queremos es pasar de un .js moderno a uno estándar soportado por la mayoría de navegadores usaremos el preset @babel/preset-env, que se instala utilizando el siguiente comando.

npm install --save-dev @babel/preset-env

Ahora procederemos a configurar este preset. Primero configuraremos el loader en webpack. Para esto nos dirigimos al archivo de configuración de Webpack y agregamos el siguiente loader dentro de rules. Notarás que tenemos una nueva propiedad llamado exclude. Esto es para indicar alguna carpeta a excluir de nuestro loader. En este caso excluimos a la carpeta node_modules. Este loader se encargará de entender los archivos .js y enviarlos a babel para su transpilación.

{
  test: /\.js$/,
  use: 'babel-loader',
  exclude: /node_modules/
},

Para seguir configurando babel necesitamos agregar el archivo de configuración llamado .babelrc y ahí agregaremos la instrucción de que cuando Babel reciba los archivos .js de babel-loader este los transpilé utilizando el preset "@babel/preset-env".

{
    "presets": [
        "@babel/preset-env"
    ]
}

Y listo!! Ahora si ejecutamos webpack ya utilizaremos Babel y el código JavaScript que generemos ya será compatible con todos los navegadores.

2. Mejorando Babel con plugins

Usar el preset anterior junto con Babel nos permitirá transpilar la mayoría de código que tiene JavaScript moderno a JavaScript estándar pero hay algunas funcionalidades como las llamadas asíncronas async await que necesitan de un plugin extra.

Para ver esto de primera mano crearemos un buscador de personajes de Rick y Morty con JavaScript. Para este fin crearemos dos archivos adicionales llamados seach.js y render.js.

El archivo search.js nos servirá para hacer peticiones al API de Rick y Morty, y traer los datos de los personajes de la serie.

async function search(id) {
  const response = await fetch(
    `https://rickandmortyapi.com/api/character/${id}/`
  );
  const character = await response.json();
  return character;
}

export default search;

El archivo render.js nos servirá para mostrar la imagen del personaje en la pantalla del navegador.

function render(data) {
  const character = document.createElement("img");
  character.setAttribute("src", data.image);
  document.body.append(character);
}

export default render;

Por último el archivo index.js llamará a los dos archivos anteriores y ejecutará el hilo principal de nuestra aplicación, preguntándonos que id de personaje queremos buscar para mostrar en pantalla.

import search from "./search";
import render from "./render";

const id = prompt("Indique el Id del personaje");

search(id)
  .then((data) => {
    render(data);
  })
  .catch(() => {
    console.log("No hay resultado");
  });

Sin embargo, cuando ejecutemos el código y coloquemos el id del personaje obtendremos un error. Esto es porque el preset que colocamos no acepta llamadas asíncronas. Y es justo para solucionar este error que debemos usar dos plugins que nos permitirán hacer llamadas asíncronas.

Necesitamos instalar @babel/plugin-transform-runtime, pero si nos fijamos en la documentación. Este plugin necesita de otro plugin llamado @babel/runtime. Los dos plugins los instalamos usando los siguientes comandos.

# Primer plugin
npm install --save-dev @babel/plugin-transform-runtime

# Segundo plugin
npm install @babel/runtime

Ahora tenemos que configurar ese plugin en el archivo .babelrc. Así que agregamos una propiedad llamada plugins y colocamos el plugin transform-runtime como vemos a continuación.

"plugins": [
    "@babel/plugin-transform-runtime"
],

Ahora solo ejecutemos el comando de webpack y ya no tendremos problemas para ejecutar nuestro buscador de personajes de Rick y Morty.

3. Tu turno

Ahora que ya sabes como funciona Babel con Webpack te animo a crear tu propio buscador de personajes. Para esto puedes utilizar la API abierta de Pokémon que nos permite obtener cualquier Pokémon con su Id. Puedes tomar de referencia el siguiente ejemplo donde utilizo el API de Rick y Morty, y que ya explicamos anteriormente parte de su código.

Cuando quieras puedes ver el código del proyecto terminado. Pero ándale inténtalo tu mismo!!

4. El código

El código del proyecto está en el siguiente repositorio github.com/andygeek/Webpack-babel-rick-morty