Transpilado de Javascript con Webpack

  • Por
  • Última actualización: 10 de diciembre de 2018
  • Javascript
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.

Nota: Durante el artículo vamos a ofrecer alternativas de trabajo con Babel 6 y Babel 7, ya que hace pocos días se ha presentado Babel7 y los nombres de paquetes de npm de BabelJS han cambiado.

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

Actualización: Acaba de salir Babel 7. Esta release ha provocado un cambio en los nombres de las dependencias npm que necesitamos para usar Babel, por lo que vamos a dar los comandos de instalación que hoy deberías usar para proyectos nuevos. Los loader de Webpack, así como los plugins de Webpack que usan Babel por debajo, siguen siendo compatibles con Babel 7 y se instalan igual.

Este sería el comando para instalar babel-core para Babel 7:

npm install --save-dev @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 "env". Primero veamos la alternativa de Babel 6:

npm i -D babel-preset-env

Ahora la alternativa de comando para instalar el preset "env" para Babel 7:

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"]
}

En el caso de Babel 7 el nombre del preset "env" ha cambiado y tendremos que actualizar también el .babelrc. Nos quedará así:

{
  "presets": ["@babel/preset-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.

Configuración de Babel en webpack.config.js

Como hemos indicado, el archivo webpack.config.js nos permite indicar que debemos procesar "babel-loader" para cada archivo Javascript. Además de esta configuración también podemos indicarle la opción del preset, lo que nos ahorraría crear el archivo babel.rc que hemos señalado anteriormente.

El código de configuración nos quedaría entonces más o menos como podemos ver a continuación, en webpack.config.js:

En el caso de indicar el preset de Babel en la configuración de Webpack nos ahorraría el paso de de realizar el archivo babel.rc. Entonces, nuestro código de configuración para el caso de Babel, quedaría más o menos así.

rules: [
      {
      test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: { presets: [['@babel/preset-env']] }
        }
      }
    ]

Esta ventaja interesante que ofrece esta alternativa es que permite usar presets o configuraciones de transpilado diferentes dependiendo del archivo de configuración de Webpack que estemos cargando en cada momento.

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

Comentarios

Sergio Conca

10/12/2018
Explicar la configuración de Babel también a partir del archivo webpack.config.js
Si se configura Babel en el webpack.config.js tiene la ventaja de poder adaptar el funcionamiento de Babel dependiendo de nuestras necesidades.