ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Youtube Canal de Youtube
Twitch Canal de Twitch
Telegram Canal de Telegram
Discord Servidor de Discord

Modo de desarrollo de Parcel

En el artículo anterior vimos una pequeña guía rápida para instalar y poner a funcionar Parcel en el desarrollo de nuestro sitio o aplicación web. Pero en realidad, solo se ha visto una pequeña parte (¡muy pequeña!) de lo que es realmente Parcel.

Modo de desarrollo

Cuando vimos que Parcel se debía arrancar escribiendo en una terminal el comando npx parcel src/index.html, realmente lo que estamos haciendo es ejecutando una versión abreviada del modo de desarrollo de Parcel, que se inicia con el comando npx parcel serve src/index.html (modalidad por defecto).

En dicha modalidad tenemos múltiples opciones de personalización, donde podemos cambiar el comportamiento de Parcel. Recuerda que los parámetros deben indicarse siempre antes del punto de entrada, por ejemplo: npx parcel serve --port 8080 src/index.html. Veamos que características tenemos disponibles:

Parámetro Descripción
--port port El servidor local escucha en el puerto indicado. Por defecto, 1234.
--host host El servidor local escucha en el host o la IP indicada. Por defecto, localhost.
--open ruta Abre el navegador automáticamente. Se puede indicar la ruta.
--no-autoinstall Desactiva la autoinstalación de paquetes al vuelo mediante NPM.
--no-hmr Desactiva el Hot Module Replacement (autorecarga de página).
--log-level nivel Establece el nivel de error: none, error, warn, info o verbose.

Probablemente, el parámetro más común sea --port, mediante el cual podemos cambiar el puerto donde escucha el servidor. También podemos utilizar --host para cambiar la IP o host desde donde escucha el servidor, que por defecto es en localhost o 127.0.0.1.

Con el parámetro --open podemos indicar que se abra el navegador automáticamente y ahorrarnos el hacer click en él. De forma opcional puede ir seguido de la ruta del comando del navegador, para indicar que navegador queremos abrir (ojo, este parámetro en WSL probablemente no funcionará).

Por defecto, si Parcel encuentra ficheros de configuración, ficheros con ciertas extensiones o determinados fragmentos de código, realizará automáticamente la instalación de los paquetes que considere necesario, algo que puede ser muy cómodo e interesante. Sin embargo, con --no-autoinstall se puede desactivar, si por alguna razón se produce algún efecto no deseado.

Por otro lado, con --no-hmr se puede desactivar la autorecarga al modificar los archivos fuente de nuestro proyecto, algo no muy habitual, pero posible si quisieramos desactivarlo por alguna razón, mientras que con --log-level se puede establecer un nivel de errores más o menos alto, y así ofrecer más o menos información de depuración.

Un ejemplo, combinando algunos de los parámetros anteriores:

$ npx parcel serve --no-autoinstall --port 8080 src/index.html

Certificado SSL (HTTPS)

Por defecto, Parcel escucha mediante el protocolo http://. Si en su lugar, queremos que lo haga con https://, podemos indicar el parámetro --https, además de utilizar --cert y --key para indicar el fichero certificado (generalmente, un .cer o .crt) y el fichero de clave privada (generalmente, un .key):

Parámetro Descripción
--https Usa HTTPS en lugar de HTTP en el servidor web local.
--cert ruta Ruta con el certificado para usar con HTTPS.
--key ruta Ruta con la clave privada para usar con HTTPS.

Cache de archivos

Parcel trabaja con un sistema de cache integrado, que crea copias de nuestra web en una carpeta llamada .parcel-cache, salvo que utilicemos el parámetro --cache-dir para cambiarlo. Este cache consigue que no se regenere la web íntegra, sino sólo los fragmentos de código que van cambiando en cada modificación.

Parámetro Descripción
--cache-dir ruta Indica la carpeta a usar de cache. Por defecto, .parcel-cache.
--no-cache Desactiva el cache de ficheros.

En el caso de que tengamos problemas y no se esté actualizando contenido, o algún error pudiera estar relacionado con el cache, podemos desactivarlo con el parámetro --no-cache.

Generación de archivos

Sin indicar ningún parámetro, Parcel generará unos archivos de extensión .map que actuan como mapas entre los ficheros de código fuente originales y los generados en la carpeta dist por el automatizador. Así podemos relacionar uno con otro, e incluso se puede configurar el navegador para que los interprete y muestre en el Developer Tools. Con el parámetro --no-source-maps podemos desactivar su generación, si no los estamos utilizando.

Con el parámetro --dist-dir se puede indicar una ruta de destino (por defecto, dist), donde se generarán los archivos finales que se muestran en el navegador. En el caso de querer tener varios perfiles con diferentes configuraciones, podemos utilizar el parámetro --target e indicar un target que habría que definir en el package.json:

{
  ...
  "targets": {
    default: {
      distDir: "dist"
    },
    build: {
      distDir: "build"
    }
  }
}

Incluso también podemos especificar múltiples puntos de entrada a Parcel.

OJO: Las características target de Parcel no las he conseguido hacer funcionar. Es posible que en la versión alfa actual aún no funcionen adecuadamente.

Parámetro Descripción
--no-source-maps No crea ficheros .map, que actuan de mapas entre ficheros originales y generados.
--dist-dir ruta Indica la ruta de destino cuando no se indican targets.
--target nombre Sólo construye el objetivo indicado. Por defecto, [].
--public-url url Añade el prefijo url en las rutas absolutas a assets. Útil para despliegues en GitHub Pages.
--profile Activa el «profiling» en la generación de builds.

Aunque es más práctico en el modo de producción que veremos más adelante, el parámetro --public-url se puede utilizar para añadir un prefijo a las URL donde indicamos assets o ficheros de código fuente. Es interesante cuando debemos modificar la ruta de la página debido al lugar donde se despliega.

Por último, el parámetro --profile nos permite generar un archivo .trace, que no es más que un JSON que podemos abrir desde el Developer Tools del navegador, desde la pestaña Performance, en el botón, Load profile. Esto importará el fichero JSON y mostrará un mapa visual con el que podremos hacer profiling (revisar rendimiento) de los pasos que ha realizado nuestra aplicación.

Parcel tiene 3 modos principales: serve (del que hemos hablado esta sección), watch y build. Del modo build hablaremos más adelante. El modo watch es, a grandes rasgos idéntico al modo serve, la única diferencia es que serve vigila cambios y tiene servidor integrado, mientras que watch sólo vigila cambios, útil si quieres utilizarlo con otro servidor web externo.



Manz
Publicado por Manz

Docente, divulgador informático y Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.