Servidor de desarrollo con Rollup

La herramienta Rollup no incluye un servidor local de desarrollo, tal y como lo hacen Parcel o Webpack. Sin embargo, nosotros podemos crear una configuración adaptada a nuestro gusto, donde incluyamos un servidor local de desarrollo y utilizarlo conjuntamente a Rollup. ¡Veamos como hacerlo!

Si eres nuevo con Rollup, o no sabes nada sobre él, echale un vistazo a los primeros capítulos donde sentamos las bases y explicamos como empezar con este automatizador.

Configuración inicial de Rollup

Vamos a partir de la configuración de Rollup del artículo anterior: Guía inicial de Rollup, donde teníamos una estructura de carpetas y el siguiente archivo de configuración rollup.config.js:

import copy from "rollup-plugin-copy";

export default {
  input: "src/index.js",
  output: {
    file: "dist/app.js",
    format: "es"
  },
  plugins: [
    copy({
      targets: [
        { src: "src/index.html", dest: "dist" },
        { src: "src/assets/**/*", dest: "dist/assets" }
      ]
    })
  ]
}

Observa que lo que estamos indicando a Rollup es lo siguiente:

• Revisa nuestro src/index.js y genera el final en dist/app.js (en formato ESM).
• A través del plugin rollup-plugin-copy, copia el archivo src/index.html a dist.
• A través del mismo plugin, copia todo el contenido (archivos y subcarpetas) de src/assets en dist/assets.

Ahora nos faltaría incluir los siguientes scripts de NPM en nuestro archivo package.json para simplificar nuestras tareas:

{
  /* ... */
  "scripts": {
    "start": "rollup -c -w",
    "build": "rollup -c"
  }
  /* ... */
}

En el segundo de ellos, el script build, estamos utilizando el parámetro -c para que lea el archivo de configuración rollup.config.js. En el primero, además de esto, con el parámetro -w le indicamos que active el modo watch, una modalidad en la que cuando termine la tarea de compilación no finaliza el programa, sino que se queda vigilando los ficheros implicados para que, si detecta cambios, vuelva a generar la compilación.

Modo watch de Rollup

El problema principal que vamos a tener con la configuración anterior, es que debemos tener claro cuál es el workflow que hemos creado con nuestro empaquetador Rollup:

---- index.js
      |-- moduleA.js
      |-- moduleB.js

---- index.html
---- assets
      |-- image.jpg

Por ejemplo, imaginemos que tenemos un src/index.js donde hacemos dos import a los ficheros moduleA.js y moduleB.js. Rollup estará vigilando estos tres archivos, porque son los que forman parte del workflow. Sin embargo, quizás de forma adicional nosotros queremos que cuando se modifiquen los ficheros index.html u otros también se dispare Rollup de nuevo y procese los cambios.

Recuerda que index.html y los enlaces que tengamos referenciados en este fichero, no forman parte del workflow principal, sino que se están copiando a la carpeta de destino mediante el plugin copy de Rollup. Podemos instalar y configurar el plugin watch-assets:

$ npm install -D rollup-plugin-watch-assets

Modificando también el fichero de configuración rollup.config.js, para añadir dicho plugin y su respectiva configuración. El fichero de configuración quedaría como podemos ver a continuación en las siguientes lineas:

import copy from "rollup-plugin-copy";
import watch from "rollup-plugin-watch-assets";

export default {
  input: "src/index.js",
  output: {
    file: "dist/app.js",
    format: "es"
  },
  plugins: [
    copy({
      targets: [
        { src: "src/index.html", dest: "dist" },
        { src: "src/assets/**/*", dest: "dist/assets" }
      ]
    }),
    watch({
      assets: ["src"]
    })
  ]
}

Observa que lo que hemos hecho es importar el plugin rollup-plugin-watch-assets y añadirlo al de la lista de plugins, donde puedes ver que está copy() (el que realiza las copias de los assets) y watch, que es el nuevo plugin que hemos instalado. Observa que el de configuración de dicho plugin se basa en una propiedad assets que contiene un con las carpetas o ficheros que queremos vigilar. En nuestro caso he puesto src, que es donde tenemos todos los archivos originales.

De esta forma, al cambiar cualquier archivo que tengamos en src, se nos disparará Rollup para actualizar los cambios en dist.

Servidor local de desarrollo

Como hemos dicho más atrás, Rollup no incorpora un servidor local de desarrollo propio, por lo que si queremos utilizar uno en nuestro workflow, debemos instalar uno externo para utilizar. Existen muchísimos, sin embargo, en este artículo voy a citar servor, de @lukejacksonn, por varias razones principales:

• Es pequeño, rápido y ligero.
• No tiene dependencias externas.
• Posee capacidad de autorecarga.

Para instalarlo, haremos lo siguiente:

$ npm install -D servor

Ahora, si ejecutamos npx servor dist --reload abriremos un servidor local que por defecto escucha en http://localhost:8080. Acto seguido, modificaremos el package.json para dejarlo como se ve a continuación:

{
  /* ... */
  "scripts": {
    "dev": "servor dist --reload & rollup -c -w",
    "build": "rollup -c"
  }
  /* ... */
}

De este modo, cada vez que escribamos npm run dev, iniciamos el servidor local en http://localhost:8080 y ponemos Rollup a vigilar cambios. Observa el script dev, que realiza las siguientes tareas:

• Monta un servidor local de desarrollo con servor, usando el contenido de la carpeta dist.
• El parámetro --reload recarga la web en el navegador si detecta cambios.
• Al utilizar & (ojo, no &&), le decimos que a la misma vez, ejecute el siguiente comando.
• Con rollup -c -w leemos la configuración y lo ponemos en modo vigilar cambios.

Servor acepta los siguientes parámetros: npx servor <folder> <entrypoint> <port>, de modo que npx servor dist main.html 1234 --reload montaría un servidor con el contenido de la carpeta dist (por defecto es la carpeta actual), buscaría un fichero main.html (por defecto es index.html) y el servidor escucharía en el puerto 1234 (por defecto, usa el puerto 8080). Además, posee otros parámetros interesantes:

Parámetro	Descripción
--browse	Abre el navegador automáticamente.
--reload	Recarga el navegador cuando detecta cambios en ficheros.
--secure	Utiliza HTTPS con credenciales autogeneradas.
--silent	Modo silencioso. No muestra errores o logs en la terminal.
--module	Utiliza <script type="module"> para utilizar import en navegador.
--static	Modo estático. Enruta index anidados si existen.
--editor	Abre el VSCode automáticamente.

Recuerda que con CTRL+C puedes detener el script npm run dev, por lo que tanto el servidor local servor como rollup se interrumpirán y podrás volver a escribir en la terminal.

Usar Servor es solo una decisión propia. Puedes utilizar cualquier otro servidor local. Por ejemplo, en el artículo Servidor local de desarrollo: Web Dev Server explico como utilizar wds, un servidor moderno de nueva generación un poco más completo y orientado a ESM.