Parcel 2: el Empaquetador Automágico

Hola a todos. Soy Jasper. Soy un desarrollador freelance y colaborador principal de Parcel, y hoy hablaré sobre Parcel 2. Entonces, ¿qué es Parcel 2? Parcel 2 es una reescritura completa de Parcel 1, pero ahora es posible que te estés preguntando, ¿qué es Parcel 1? Parcel 1 es un empaquetador de aplicaciones web rápido y escalable de configuración cero. Esto significa que es básicamente como Webpack o Rollup, pero con una gran diferencia en cómo manejamos el empaquetado. Intentamos hacerlo lo más simple posible, sin necesidad de configuración. También nos esforzamos por mantenerlo rápido y escalable, ya que se utiliza en grandes empresas como Atlassian.

Parcel 2 tiene muchas funcionalidades nuevas. Voy a mencionar algunas de las más importantes y las más interesantes. Hemos renovado todo nuestro sistema de complementos y hemos añadido un archivo de configuración. Ahora nuestro sistema de complementos es muy diferente al de Parcel 1, ya que ahora cada paso del proceso tiene un tipo de complemento e interfaz diferentes. Por ejemplo, tenemos transformadores que toman un tipo de archivo y lo convierten en otro tipo de archivo. Por ejemplo, de JavaScript moderno a JavaScript heredado, o de TypeScript a JavaScript. También tenemos, por ejemplo, optimizadores, que optimizan tu código o lo comprimen. Por ejemplo, tenemos un optimizador Terser, que minifica el código JavaScript. También hemos añadido un archivo de configuración en Parcel 2. El archivo de configuración no se utiliza para configurar nada específico en un transformador o cualquier complemento. Se utiliza para definir qué complementos se deben ejecutar para un determinado tipo de archivo. Como puedes ver aquí. Por ejemplo, este es un ejemplo de TypeScript donde, para los archivos TS y TSX, el transformador que se ejecuta es el compilador TSC de TypeScript en lugar de Babel. Y para un validador, también ejecutamos un verificador de tipos. También hemos añadido objetivos, que es muy útil para cosas como la representación del lado del servidor, ya que puedes construir un código de nodo y un código de navegador al mismo tiempo. Pero también es útil, por ejemplo, si aún admites Internet Explorer sin afectar negativamente a los usuarios que utilizan un navegador moderno. Así que puedes tener dos paquetes, por ejemplo, un paquete moderno para Chrome y un paquete heredado para Internet Explorer y otros navegadores heredados. También hemos introducido diagnósticos, que son realmente útiles si estás intentando debug un error y no sabes qué lo está causando. Por ejemplo, en esta captura de pantalla, importamos un archivo llamado Babel core en lugar del paquete Babel core. Y sugerimos los paquetes más cercanos que coinciden. Por ejemplo, en este caso, tenemos un Babel core y un Parcel core. Y el que mejor coincide es Babel core. Probablemente eso también es lo que querías decir. También hemos introducido canalizaciones con nombre que son muy útiles si quieres tener data o JavaScript en diferentes formatos.

Por ejemplo, tenemos importaciones de JSON aquí. Entonces, en un caso, es posible que desees una URL del archivo JSON. En otro caso, es posible que desees el texto del archivo JSON. Y puedes usar eso con canalizaciones con nombre. Por ejemplo, URL: data JSON devolverá una URL al archivo JSON, y texto, data JSON devolverá el contenido de ese archivo JSON. También podemos usar parámetros de consulta, por ejemplo, para optimizar imágenes en este caso. He tomado un ejemplo de nuestro optimizador de imágenes, que es URL: para la importación de URL, y luego parcel.JPG es una imagen del logotipo de Parcel. Y luego, tienes parámetros de consulta. El formato es WebP y la calidad es del 70%. Esa es una imagen bastante comprimida.

También hemos realizado muchos más cambios que solo estos pocos que he destacado. Hemos mejorado el rendimiento en más del 2x. Hemos hecho que nuestras cachés sean estables, por lo que ya no tienes que eliminar la caché de vez en cuando. Puedes dejarla ahí. También hemos mejorado nuestras estructuras de datos para utilizar mucha menos memoria. Esto también nos ayudó a escalar al tamaño de, por ejemplo, Atlassian. También hemos mejorado la división y agrupación de código. Por ejemplo, ahora tenemos una estrategia HTTP2, que te permite tener más división de código que antes. También hemos hecho que el alojamiento de ámbito sea estable, por lo que ahora puedes usarlo de forma segura en producción. También hemos mejorado nuestro soporte para monorepos y bibliotecas. Por ejemplo, los objetivos se pueden utilizar para compilar un monorepo completo con un solo comando.

Para demostrar que Parcel es realmente simple, voy a mostrar un pequeño ejemplo de React. Primero, agregas Parcel, React y React DOM para este ejemplo. Luego, en el package.json, tienes dos scripts. El script dev, que simplemente inicia el punto de entrada index.html utilizando Parcel. Y luego el comando build, que ejecuta Parcel build y index.html y crea un paquete optimizado. Entonces, index.html contiene un div con un ID de app y un script que hace referencia al archivo index.js. index.js contiene una aplicación de `Hola, mundo` simple. Y si ejecutamos yarn dev, simplemente funciona sin ninguna configuración. Y yarn build crea un paquete listo para producción sin ninguna configuración. Esto fue mi charla sobre Parcel. Gracias por escuchar. Puedes encontrarme en Twitter como Jasper Damor y también puedes encontrar Parcel en Twitter, Parcel.js o echar un vistazo a la documentación en v2.Parceljs.com.