"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Empaquetar con Parcel

Parcel es un nuevo empaquetador de código que esta ganando popularidad y que puede ser muy util en debido a su rapidez y características.

Hasta ahora cuando pensabamos en empaquetadores de código se nos venían a la mente Browserify y sobre todo Webpack, Parcel es una nueva herramienta que sirve para esta misma tarea.

Y entonces que nos aporta Parcel para que nos cambiemos de empaquetador cuando Webpack (por poner un ejemplo), esta mucho más probado y tiene una comunidad más grande que lo apoya…

Es cierto que los otros empaquetadores que probamos llevan ya años entre nosotros (Webpack que ya va por la versión 3, es un proyecto del año 2012), tienen la confianza de muchos desarrolladores (36.500 estrellas en Github) y una comunidad enorme detrás (tenemos loaders para casi todo y en stackoverflow hay resultas muchísimas dudas, además de estar muy bien documentado).

Sin embargo que sea el último en llegar y sea menos conocido no implica que sea peor, de hecho ya es muy popular.

¿Qué ventajas tiene Parcel?

La ventaja de la que más presumen en su web, y que lo convierten en un serio competidor es su velocidad.

Los empaquetadores de código sirven para crear módulos a partir de nuestros distintos archivos y generar un archivo final, que será el que carguemos, el cual va a encargarse de cargar los módulos necesarios en cada punto.

Este proceso de empaquetado puede consumir bastantes recursos según la cantidad de código que tenga que procesar, y por lo tanto tardar bastante.

Parcel usa procesos paralelos para realizar el empaquetado, por lo que si tenemos ordenadores con varios núcleos (hoy en día todos), el trabajo se puede repartir entre ellos y por lo tanto agilizar el empaquetado.

También tiene un sistema de cacheado de archivos para que una vez construido, las siguientes reconstrucciones sean muy rápidas.

Para demostrar que toda esta parrafada se traduce en cifras aseguran que al compilar una aplicación que contiene 1726 módulos (6.5M sin comprimir) en un portatil de 4 núcleos físicos el empaquetado tardó:

Con Browserify 22.98 segundos
 Con Webpack 20.71 segundos
 Con Parcel  9.98 segundos
 Con Parcel (usando caché)  2.64 segundos

Si estas cifras son ciertas sin duda esta muy por encima de sus competidores.

Otra de las ventajas más importantes que tiene es que no requiere de configuración, para los que llevamos años usando webpack esto es una agradable novedad, pues la configuración de los empaquetadores suele ser una tarea muy compleja y bastante delicada.

El empaquetado de JS, CSS, HTML, archivos, etc es automático, sin que tengamos que añadirle plugins o loaders para definir que hacer con cada tipo de fichero.

Esta claro que si Parcel se encarga de todo vamos a perder flexibilidad, pero al usar Babel, PostCSS y PostHTML la mayoría de nuestras necesidades están cubiertas.

Con los paquetes correspondientes instalados podemos transpilar nuestros estilos, de manera que podemos usar SASS, LESS, Stylus…

Para compilar SCSS es necesario el módulo node-sass.
Una vez que tengas node-sass instalado puedes importar tus archivos SCSS desde archivos JavaScript.

 

Además de estas dos ventajas, que son donde radica su éxito, Parcel también nos da funcionalidades clásicas de otros empaquetadores como pudieran ser reemplazar módulos en caliente (Hot module replacement) para poder añadir, borrar o actualizar módulos de JS o CSS mientras la aplicación se esta ejecutando sin necesidar de recargar toda la pagína.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)