Introducción a Parcel

0
368

Parcel es un empaquetador de archivos.

Una aplicación estará formada por decenas de ficheros html, js, ts, etc.

Cuando queramos distribuir la aplicación Parcel nos simplificará la función. Si queremos probar nuestra aplicación desplegando en un servidor Web veréis que es sencillo e inmediato.

Antes de comenzar recordarte que este tutorial forma parte de una cadena de tutoriales en las que pretendo simplemente probar tecnologías actuales, aquí abajo podrás encontrarlos:

 

También  me gustaría que vieras este video de 2 minutos para entender dónde estamos y a dónde vamos.


Mi equipo es Mac

macOS Catalina
Versión 10.15.2

MacBook Pro (15-inch, 2018)
Procesador 2,9 GHz Intel Core i9 de 6 núcleos
Memoria 32 GB 2400 MHz DDR4
Gráficos Intel UHD Graphics 630 1536 MB


Lo primero que vamos a hacer es ir a la documentación (escueta) e instalar Parcel

https://parceljs.org/getting_started.html

La instalación se realiza con el comando: npm install -g parcel-bundler

Ojo que sin sudo fallará la instalación.

Ya con los permisos me sigue dando algún error (tengo que investigar un poco más) pero luego funciona lo que os quiero mostrar.

Ahora vamos a generar un fichero package.json adecuado. Usamos el comando npm init -y

Inicialmente es lo que teníamos.

Después este es el resultado.

Ahora creamos un fichero índex.html y un índex.js

Con parcel build ./src/index.html empaqueta y arranca un servidor en el puesto 1234 donde probar nuestro proyecto

Podemos ver en un navegador el resultado.

Podemos ver los ficheros generado y hacemos commit.

Ahora cambiamos el fichero a índex.ts. No hay que hacer nada adicional.

Y sin hacer nada más que grabar, podemos comprobar el resultado.

Con la opción built se crea una carpeta de distribución.

A mí desde luego me ha parecido sencillisimo crear un servidor donde probar nuestro proyecto con Parcel.

Todavía nos quedan cosas para gobernar el ciclo de vida de desarrollo.

Ahora el siguiente podría ser estudiar el modelo MVC para ir creando una estructura JavaScript.

 

Aquí te dejo el enlace al siguiente tutorial:

Verificación de formato de código con Eslint

Dejar respuesta

Please enter your comment!
Please enter your name here