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.
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:
src/index.js
y genera el final en dist/app.js
(en formato ESM).rollup-plugin-copy
, copia el archivo src/index.html
a dist
.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.
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 copy()
(el que realiza las copias de los assets) y watch
, que es el nuevo plugin que hemos instalado. Observa que el assets
que contiene un 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
.
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:
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:
servor
, usando el contenido de la carpeta dist
.--reload
recarga la web en el navegador si detecta cambios.&
(ojo, no &&
), le decimos que a la misma vez, ejecute el siguiente comando.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.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev