Parcel 2: el Empaquetador Automágico

Rate this content
Bookmark

Parcel 1 fue creado a partir de la frustración de configurar empaquetadores heredados lentos y difíciles de configurar como Webpack, y a su vez inició una tendencia de herramientas de configuración cero. Desafortunadamente, Parcel 1 tenía algunos defectos de diseño importantes que llevaron a la creación de Parcel 2, una reescritura completa de Parcel que tiene como objetivo resolver esos defectos de diseño y crear un empaquetador que pueda escalar al tamaño de empresas como Atlassian y Adobe, y más allá. Un nuevo sistema de complementos, objetivos de empaquetado, configuración opcional, cachés estables, mejora del scope-hoisting, mejor experiencia de desarrollo y mejor rendimiento son solo algunas de las cosas en las que hemos estado trabajando durante los últimos 3 años.


En esta charla echaré un vistazo a cómo funciona Parcel y hablaré sobre un par de las características más grandes y emocionantes de Parcel 2.

8 min
01 Jul, 2021

Video Summary and Transcription

Parcel 2 es una reescritura completa de Parcel 1, un empaquetador de aplicaciones web de configuración cero rápido y escalable utilizado por grandes empresas como Atlassian y Adobe. Ofrece un enfoque de configuración cero con buenos valores predeterminados, lo que lo hace listo para producción desde el primer momento. Las nuevas características incluyen un sistema de complementos renovado, un archivo de configuración, transformadores para la conversión de archivos, optimizadores para la compresión de código, soporte objetivo para diferentes navegadores, diagnósticos para la depuración de errores y canalizaciones con nombre para datos y JavaScript en diferentes formatos. Parcel 2 también admite diferentes escenarios de importación, como la importación de archivos JSON con canalizaciones con nombre y el uso de parámetros de consulta para la optimización de imágenes. Incluye varias mejoras de rendimiento, cachés estables, estructuras de datos optimizadas, división y empaquetado de código mejorados, mejor hospedaje de scope y un mejor soporte para monorepos y bibliotecas. Se proporciona un ejemplo de React para mostrar la simplicidad de Parcel y cómo usarlo con React.

Available in English

1. Introducción a Parcel 2

Short description:

Parcel 2 es una reescritura completa de Parcel 1, un empaquetador de aplicaciones web de configuración cero rápido y escalable utilizado por grandes empresas como Atlassian y Adobe.

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.

2. Funcionalidades de Parcel 2

Short description:

Parcel 2 utiliza caché y workers para optimizar el rendimiento. Ofrece un enfoque de configuración cero con buenos valores predeterminados, lo que lo hace listo para producción desde el principio. Las nuevas funcionalidades incluyen un sistema de complementos renovado, un archivo de configuración, transformadores para la conversión de archivos, optimizadores para la compresión de código, soporte objetivo para diferentes navegadores, diagnósticos para la depuración de errores y canalizaciones con nombre para datos y JavaScript en diferentes formatos.

y Adobe. ¿Qué hace que Parcel sea rápido? Bueno, utilizamos caché y workers. Así que almacenamos en caché cada resultado de interpolación de Babel y otros transpiladores como Typescript, y también utilizamos workers para paralelizar ese trabajo entre todos los núcleos de tu CPU. Y ahora podrías preguntarte, ¿es realmente de configuración cero? Bueno, en realidad tenemos un archivo de configuración, pero intentamos que no lo configures tanto como sea posible. Así que tratamos de tener buenos valores predeterminados y estar listos para producción desde el principio. Así que solo creas tu aplicación. Y cuando estés listo, puedes enviarla a producción y todo estará optimizado como debería.

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.

3. Importación y Optimización de Parcel 2

Short description:

Parcel 2 admite diferentes escenarios de importación, como la importación de archivos JSON con canalizaciones con nombre y el uso de parámetros de consulta para la optimización de imágenes. La nueva versión también incluye varias mejoras de rendimiento, cachés estables, estructuras de datos optimizadas, división y agrupación de código mejorados, mejor alojamiento de ámbito y un mejor soporte para monorepos y bibliotecas. Para demostrar la simplicidad de Parcel, se proporciona un ejemplo de React que muestra cómo agregar Parcel y React, configurar scripts en package.json y ejecutar compilaciones de desarrollo y producción fácilmente.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.

Workshops on related topic

DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.