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:

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):

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.

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.

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.