Transpilado de Javascript con Webpack

  • Por
Cómo hacer el transpilado del código Javascript, ES6 en adelante, con Webpack. De manera que sea compatible con todos los navegadores, incluso los que solo entienden ES5.

En un proyecto frontend es importante usar las últimas novedades del lenguaje Javascript. A veces porque es útil y productivo para el desarrollador, ya que generalmente las novedades del lenguaje permiten un código más resumido, que ofrece mayor facilidad de mantenimiento. A veces simplemente porque lo exige el stack de tecnologías y los frameworks utilizados.

Claro que no siempre todas las novedades del lenguaje están disponibles en todos los navegadores, por ello es fundamental la operación del transpilado de código. Seguramente a estas alturas todo el mundo sepa qué es transpilar, pero por si algún despistado lo desconoce, es una operación entre el compilado y la traducción, mediante la cual el código creado con versiones superiores de Javascript (o supersets de Javascript como TypeScript) es transformado en código compatible con todos los navegadores del mercado.

En este artículo te mostraremos cómo realizar la transpilación de Javascript con Webpack. Es una operación muy sencilla de realizar, que nos permitirá aprender algo nuevo en nuestro Manual de Webpack.

Babel loader

Para transpilar Javascript la herramienta que usaremos será BabelJS. No es una utilidad específica de Webpack, sino una herramienta autónoma que podemos usar en muchos flujos de desarrollo frontend. Para usarla dentro de Webpack usaremos el babel loader.

El primer paso será entonces instalar esta dependencia de desarrollo, con el siguiente comando de consola.

npm i -D babel-loader

Adicionalmente necesitamos instalar en el proyecto, también como dependencia de desarrollo, el propio Babel.

npm i -D babel-core

Una vez instalado, tenemos que configurar Webpack para hacer funcionar a Babel, mediante el archivo webpack.config.js.

El código que tendremos que usar será algo parecido al siguiente:

module.exports = {
  module: {
    rules: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
      }
    ]
  }
}

Hasta aquí hemos realizado la configuración relativa a Webpack, pero aún nos queda algo de trabajo para configurar Babel.

Configurar Babel en el proyecto

Básicamente este paso consiste en decirle a Babel el tipo de transpilado que debe realizar. Ahora en Babel se recomienda usar un "preset" que indica que la versión de nuestro código Javascript es ES2015, ES2016 y ES2017 (todo junto). De este modo conseguimos contar con todas las novedades del estándar de Javascript de los últimos años.

Tenemos que comenzar instalando la dependencia del preset.

npm i -D babel-preset-env

Adicionalmente tenemos que crear un archivo de configuración de Babel, que colocaremos en la raíz de nuestro proyecto, justo en el lugar donde se encuentra el package.json. El archivo que tenemos que crear se llama ".babelrc".

El archivo de configuración .babelrc contiene código JSON. En él tenemos que indicar que vamos a usar el preset que se acaba de instalar "env".

{
  "presets": ["env"]
}

Esto sería suficiente en principio para funcionar.

Habilitados para usar código Javascript ES2015 (ES6) en adelante

Tal como hemos configurado nuestro proyecto, podemos usar ahora el código Javascript con las nuevas versiones. Veamos un poco de código que podríamos colocar en el archivo de nuestro "entry point".

Nota: en principio el entry point de Webpack es el archivo que está en la ruta "src/index.js". Pero recuerda que esta es una configuración predeterminada que puedes variar fácilmente, como se explicó en el artículo de Configuración Webpack.
class miClase {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  muestraX() {
    console.log(this.x);
  }

  sumar(...valores) {
    let suma = 0;
    for(let i in valores) {
      suma += valores[i];
    }
    return suma;
  }
}

const miObj = new miClase(2, 5);
miObj.muestraX();

console.log(miObj.sumar(2, 4, 5, 6));
Nota: Este código Javascript tiene un par de detalles en ES6, como el uso de clases de programación orientada a objetos, el trabajo con otras declaraciones de variables como const y let, así como el operador rest. Si no conoces todas estas cosas las puedes aprender el Manual de ES6.

Imports de ES6

Otra cosa interesante que podemos hacer ahora que estamos habilitados para trabajar con Javascript ES2015 es la realización de imports, con lo que nos podemos traer el código de otros módulos.

Esto es algo de vital importancia para el mantenimiento de las aplicaciones, ya que al poder dividir el código en diversos archivos, éstos quedan más reducidos, manejables y concisos. Podemos poner cada cosa en su sitio y resultará más sencillo de organizarnos.

Así, desde nuestro index.js podemos escribir:

import './miModulo.js';

Esto quiere decir que tenemos un archivo llamado miModulo.js que estará en la misma carpeta que el index.js. Al hacer el bundle, Webpack juntará el código del index.js con el código de miModulo.js en el Javascript de salida.

Nota: Si no lo dominas todavía, puedes aprender más sobre los módulos de Javascript ES2015.

Importar librerías instaladas vía npm

Otra cosa que puedes importar de manera sencilla son las librerías de dependencias de terceros, que has instalado vía npm. La manera de hacerlo dependerá un poco de la organización de la librería, pero en líneas generales será más o menos así.

Primero instalar la correspondiente librería usando npm. Por ejemplo, así instalamos moment, una potente y popular librería para trabajo con fechas.

npm i moment

Ahora, desde el archivo Javascript donde quieras usar moment, lo tendrás que importar con el siguiente código de muestra.

import moment from 'moment';
import es from 'moment/locale/es';

En este caso tenemos que importar dos cosas. La primera es la propia librería moment y la segunda sirve para importar los "locales" para el español, es decir, todas las traducciones de la librería que usas para que los mensajes te salgan en español.

Posteriormente podrás usar la librería momentjs normalmente.

let tiempoDesde = moment("20180611", "YYYYMMDD").fromNow();

Ejecutar Webpack con transpilado

Este paso será igual que siempre. Recuerda que podemos ejecutar Webpack directamente desde la línea de comandos, con la siguiente instrucción.

webpack --mode production

Pero que generalmente tendrás tus scripts de npm para hacer algo como "npm run build", tal como ya explicamos en el artículo sobre configuración de Webpack.

Una vez se haya producido el bundle con nuestro código, tendremos todo unido en un único archivo de Javascript, que será compatible con todos los navegadores, incluso aquellos que sólo entienden ES5 (principalmente IE 11 y anteriores).

Al hacer los bundles, Webpack nos ofrecerá una salida como la siguiente. En ella podremos comprobar que se están uniendo varios archivos de código Javascript, los módulos distintos que hemos ido importando a lo largo de los ejemplos de este artículo.

Otra cosa que debes hacer, para verificar que está funcionando todo correctamente, es visualizar el código generado por Webpack, donde no deberían aparecer los códigos de ES6, como las clases, los imports, los "let" y "const", etc. Pero, por supuesto, la prueba de fuego será ejecutar ese código en un Internet Explorer, 11 o anterior, donde debería todo funcionar exactamente del mismo modo que en un navegador moderno (Chorme, Safari, Firefox) donde sí está disponible Ecmascript 2015.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir