Parcel es una herramienta Javascript que procesa todo el código de nuestro sitio o aplicación web, recorriendo todos sus archivos enlazados, y generando una nueva colección de ficheros, más apropiados para el navegador.
De esta forma, Parcel permite partir de un fichero inicial (HTML o Javascript, por ejemplo) e ir revisando todos los archivos que se utilizan y generando en una nueva carpeta (normalmente dist) todos los archivos referenciados, no teniendo en cuenta los que no se estén utilizando.
Además, Parcel también soporta escribir código en otros lenguajes o preprocesadores, convirtiendo al lenguaje necesario final, lo que lo hace su utilización mucho más sencilla que con otros sistemas.
Parcel se encuentra en proceso de transición. Parcel v1 es estable y funciona correctamente, pero no se actualizará más, por lo que es probable que al instalarlo obtengas múltiples avisos de paquetes obsoletos o problemas de seguridad. Actualmente, Parcel v2 está en fase alpha y cambian algunas cosas, pero nos centraremos en ella en este artículo.
Instalación de Parcel
Para comenzar a utilizar Parcel2, lo primero es crear una carpeta, inicializar el proyecto e instalar Parcel. Vamos a hacerlo desde una terminal:
# Creamos la carpeta de nuestro proyecto (first-project)
$ mkdir first-project
# Accedemos a ella
$ cd first-project
# Inicializamos un proyecto con los datos por defecto
$ npm init -y
# Instalamos Parcel2 como dependencia de desarrollo
$ npm install -D parcel@next
# Comprobamos que está correctamente instalado
$ npx parcel --version
2.0.0-beta.1Al instalar parcel@next estamos instalando la versión 2 estable. Podemos utilizar parcel@nightly para versiones más actuales, pero inestables (a riesgo de encontrarnos problemas) o simplemente utilizar parcel para utilizar la versión 1.
Observa también que estamos utilizando el flag -D para instalarlo como dependencia de desarrollo, ya que se trata de una herramienta de desarrollador. Otra opción sería instalarla de forma global con npm install -g parcel@next, tienes más información en instalaciones globales con NPM.
Como habrás observado, para utilizar Parcel necesitaremos tener instalado NodeJS, ya que utilizaremos el gestor de paquetes y dependencias NPM. Si no lo tienes instalado, te recomiendo seguir la guía de instalación de Node/NPM.
Preparación del código
Una vez instalado, lo habitual suele ser crear una estructura de carpetas para nuestro proyecto y colocar el esqueleto de la web. Podemos hacerlo así:
# Comprobamos que estamos en la carpeta raíz del proyecto
$ pwd
/home/manz/workspace/first-project
# Creamos la carpeta src/, que a su vez tendrá dentro assets/ y components/
$ mkdir -p src/{assets,components}
# Creamos los ficheros index.html, index.css e index.js en src/
$ touch src/index.{html,css,js}
# Abrimos VSCode en la carpeta actual (raíz del proyecto)
$ code .Nuestro punto de entrada (entrypoint) va a ser el fichero index.html, puesto que será el primer archivo que va a leer el navegador. De la misma forma, Parcel también lo tomará como punto de partida. Así pues, editamos el archivo src/index.html y colocamos un HTML base escribiendo ! y pulsando TAB (Emmet):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Sin embargo, este HTML es muy básico y aún no tiene enlazados los archivos .js y .css, por lo que vamos a enlazarlos correctamente añadiendo las etiquetas HTML correspondientes, justo antes del </head>. Nuestro <head> quedaría algo así:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<script defer src="./index.js"></script>
</head>Recuerda que la etiqueta <link> usa un atributo href para enlazar (y no tiene cierre de etiqueta), mientras que la etiqueta <script> usa un atributo src (y si tiene cierre). El atributo defer lo utilizamos para retrasar la carga de este script para cuando el HTML ya esté totalmente cargado (es equivalente a ponerlo antes del </body>). Puedes encontrar más información en modos de carga de la etiqueta HTML script.
Una vez hecho esto, vamos a añadir algo en el <body> para mostrarlo visualmente en nuestra página. Hacemos la siguiente modificación:
<body>
<h1>Hello, World!</h1>
</body>¡Hecho! Ya estamos listos para arrancar Parcel y ver su magia.
Aunque sólo hemos enlazado archivos
.cssy.js, una de las características más interesantes de Parcel es que podemos hacer exactamente lo mismo con, por ejemplo, un archivo.scss(Sass) y un archivo.ts(Typescript). Parcel detectará (por la extensión) de que tecnología se trata, instalará las dependencias necesarias y hará el preprocesado automágicamente.
Primeros pasos con Parcel
Una vez hemos realizado los pasos anteriores, abrimos una terminal y escribimos lo siguiente (asegurate siempre de estar en la carpeta raíz del proyecto):
# Arrancamos parcel indicando el punto de entrada (en nuestro caso: src/index.html)
$ npx parcel src/index.html
ℹ️ Server running at http://localhost:1234
✨ Built in 78msEste comando nos montará un servidor web local para ver la página que estamos desarrollando en vivo. La dirección donde se puede ver es http://localhost:1234, una dirección que sólo funcionará en nuestro equipo mientras tengamos Parcel activo y funcionando.
Bastará con copiar esa dirección (o, habitualmente, pulsar la tecla CTRL y hacer click en el enlace) y observaremos que se abre en nuestro navegador la página que estamos editando. Fíjate bien en la parte que indica Built in 78ms, ya que de existir algún error, en lugar de aparecer ese mensaje en verde, aparecerá el problema ocurrido.
Si en algún momento queremos detener el servidor local, bastará con pulsar CTLR+C. Ten en cuenta que si hacemos eso o cerramos la terminal, pararemos el servidor local y la dirección
localhostdejará de funcionar.
Una de las características más interesantes es que Parcel permite actualizar sobre la marcha y en el navegador los cambios que vayamos haciendo en el código. Por ejemplo, los archivos index.css e index.js están aún en blanco, vamos a añadir algunas líneas y comprobar si el navegador se actualiza solo. Actualizamos el index.css:
body {
background: hotpink;
color: white;
}Al pulsar CTRL+S (Guardar en VSCode), guardaremos el archivo, Parcel detectará cambios en el código fuente y actualizará el navegador para que recargue los cambios. Lo mismo debería ocurrir si modificamos el index.html o el index.js:
console.log("Ready!...");Al guardar el fichero index.js, el navegador debería recargarse sólo, y si abrimos la consola Javascript del navegador pulsando F12, nos mostrará dicho mensaje en el apartado Console.
En los siguientes temas aprenderemos más sobre los diferentes modos de Parcel y su personalización. De momento, una buena práctica podría ser añadir el comando
parcel src/index.html(sin npx) a un script de NPM.
