Parcel, un paquete web más simple

Parcel es un Bundler de aplicaciones web. Está en la misma categoría de herramientas de paquete web, con una propuesta de valor diferente. Parcel promete hacer muchas cosas sin ninguna configuración y también ser rápido.

Parcel es un Bundler de aplicaciones web.

Está en la misma categoría de herramientas depaquete web, con una propuesta de valor diferente.

Su conjunto de características principales incluye

  • agrupación de activos (JS, CSS, HTML, imágenes)
  • división de código de configuración cero
  • transformaciones automáticas usandoBabel,PostCSSy PostHTML
  • reemplazo de módulo en caliente
  • almacenamiento en caché y procesamiento paralelo para compilaciones más rápidas

Parcel promete hacer todo esto sin ninguna configuración y también ser rápido.

Instalación

El paquete se instala usandoHilo:

yarn global add parcel-bundler

onpm:

npm install -g parcel-bundler

Iniciar paquete

El paquete se puede iniciar usando

parcel watch index.html

comenzará a buscar activos desde la fuente de la página HTML y sustituirá cualquiera de las referencias que procesa por un archivo de salida.

También puede apuntar Parcel a un archivo JS en su lugar:

parcel watch entry.js

Servidor de desarrollo

Convenientemente, Parcel viene con un servidor de desarrollo integrado, por lo que no tiene que configurar uno. Puedes comenzar con:

parcel index.html

Paquete listo para producción

Cuando esté satisfecho con su aplicación y desee crear un paquete listo para producción, ejecute

parcel build index.html

Un paquete de producción deshabilita el reemplazo de módulo en caliente y no observa sus cambios, existe una vez que se realiza el paquete y usa un minificador.

También activa automáticamente elNODE_ENVvariable aproduction, para hacer que las bibliotecas generen el código de producción (por ejemplo, React yVueusa esta convención)

Activos

JavaScript

El paquete admite ambosMódulos ES(import...) yCommonJS(require...).

RealizaDivisión automática de código mediante importaciones dinámicas.

¿Qué significa esto y por qué es útil?

Una importación dinámica devuelve unpromesa, y en lugar de cargar todas las dependencias al inicio de la aplicación, podemos pedirle al navegador que las cargue, pero solo ejecuta algunas partes de la aplicación cuando están listas.

O podemos pedirle al navegador que los cargue solo cuando lo necesitemos, por ejemplo, cuando el usuario hace clic en un enlace en particular.

Verdivisión de códigopara más detalles.

CSS

Parcel admite CSS simple, Sass, Less y Stylus.

Puedes escribir tu CSS usandoMódulos CSS.

Transforma

Cuando Parcel descubre que tiene una configuración para uno de

  • Babel.babelrc)
  • PostCSS (.postcssrc)
  • PostHTML (.posthtmlrc)

lo utilizará automáticamente en su proceso de agrupación.

Reemplazo de módulo en caliente

El reemplazo de módulo en caliente (HMR) es una característica útil al crear una aplicación. Cuando guardamos una nueva copia de CSS o JavaScript, HMR se encarga de actualizar el módulo en el navegador, sin actualizar toda la aplicación.

Esto es genial, especialmente si su aplicación tiene muchos estados que necesita activar para probar una funcionalidad específica (por ejemplo, "vaya a la configuración, haga clic en esto, escriba aquello ...").

Paquete vs paquete web

Comparemos Parcel con el paquete web, porque es muy popular y probablemente haya oído hablar de él o lo haya usado en un proyecto. También es bueno conocer las diferencias, incluso si nunca usó ninguno de ellos.

webpack te permite hacer un montón de cosas, y si bien esto es genial, también significa que debemos configurarlo cuidadosamente para que haga exactamente lo que queremos.

A veces elwebpack.config.jsEl archivo crece a cientos de líneas, y lo copiamos / pegamos en el siguiente proyecto, y es una molestia si necesitamos modificarlo.

Parcel nos promete hacer mucho de lo que hace webpack, perosin ninguna configuración en absoluto, depender deconvenciones sobre configuración.

webpack 4, principalmente en respuesta al éxito de Parcel, introdujo un modo de configuración cero, con algunas convenciones, en lugar de requerir siempre una configuración.

Mientras que webpack tienemiles de complementos, El paquete tienealgunos, pero no se anuncian en el sitio, una señal de que los desarrolladores de Parcel quieren que evitemos el uso de complementos hasta que realmente no podamos evitarlos porque no podemos adaptarnos a las convenciones de Parcel, o para hacer que Parcel admita algo que no sale de la caja.

¿Cual deberías usar?Recomendaría Parcel para proyectos pequeños y el paquete web cuando supere sus capacidades y desee un control absoluto de todo lo que hace su paquete de módulos.


Más tutoriales de devtools: