Gestión de paquetes en Monorepos

Rate this content
Bookmark

Hablaremos sobre algunos de los puntos problemáticos y exploraremos recetas para una gestión de paquetes efectiva en Monorepos.
Discutiremos cómo funciona la gestión de paquetes con npm, pnpm y Yarn. Además, te mostraré una nueva herramienta que es menos conocida pero mejora mucho la experiencia del desarrollador.

This talk has been presented at DevOps.js Conf 2024, check out the latest edition of this JavaScript Conference.

FAQ

Pnpm es un gestor de paquetes JS que permite una gestión eficiente en monorepos, reduciendo significativamente los tiempos de instalación de paquetes comparado con soluciones como npm. Zoltan Koçan contribuyó a pnpm como respuesta a los largos tiempos de instalación en JustAnswer, logrando reducir este tiempo a solo 90 segundos.

Lerna es una herramienta que fue creada para manejar monorepos en proyectos JS, instalando dependencias utilizando npm-cli. Sin embargo, la instalación con Lerna es conocida por ser muy lenta, lo que destacó la necesidad de que los gestores de paquetes implementaran de forma nativa la gestión en monorepos.

Yarn y npm utilizan un enfoque hoisted por defecto, donde todas las dependencias se colocan en el directorio raíz. Pnpm, por otro lado, usa un diseño de módulos de nodos aislados, donde las dependencias de cada paquete se anidan, permitiendo que los paquetes solo accedan a sus propias dependencias.

Si las dev.dependencies se utilizan en código de producción, como en el ejemplo de lodash en app1, el código podría funcionar localmente pero fallaría en producción donde no se instalan las dev.dependencies. Es crucial asegurarse de que las dependencias estén correctamente declaradas para evitar errores de ejecución.

Herramientas como Syncpack pueden ayudar a encontrar duplicados de versiones y verificar la inconsistencia de versiones en un monorepo. Yarn ofrece sincronización de versiones de dependencias de forma nativa, mientras que pnpm planea introducir esta característica a través de los catálogos del espacio de trabajo.

Bit no es un gestor de paquetes tradicional, sino una cadena de herramientas para construir software componible, que maneja versiones, dependencias y publicación de paquetes. A diferencia de herramientas como pnpm, Bit crea un único manifiesto en la raíz del espacio de trabajo y distingue automáticamente las dependencias de producción y desarrollo.

Zoltan Kochan
Zoltan Kochan
19 min
15 Feb, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla aborda los puntos problemáticos y la gestión de paquetes efectiva en Monorepos, incluido el uso de diseños hoisted o aislados y los desafíos de trabajar con dependencias entre pares. Presenta la herramienta Bit, que aborda estos problemas y maneja la gestión de dependencias y el control de versiones. Bit permite la instalación y gestión automática de dependencias, admite múltiples versiones de una dependencia entre pares y actualiza los componentes de manera transparente en diferentes entornos.
Available in English: Package Management in Monorepos

1. Introducción a la Gestión de Paquetes en Monorepos

Short description:

Mi nombre es Zoltan Koçan. Hablaré sobre los puntos problemáticos y compartiré recetas para una gestión efectiva de paquetes en monorepos. Me encargo de la gestión de dependencias en Bit y soy el principal mantenedor del proyecto pnpm. La historia de las herramientas de monorepo para proyectos JS comienza con Babel y Lerna. Para el año 2017, pnpm, Yarn y npm ya ofrecían soporte para monorepos. Los gestores de paquetes pueden organizar las dependencias en diseños hoisted o aislados, siendo pnpm el que utiliza el diseño aislado de módulos de nodos.

Mi nombre es Zoltan Koçan. En mi presentación, quiero hablar sobre la gestión de paquetes en monorepos. Discutiré algunos de los puntos problemáticos y compartiré recetas para una gestión efectiva de paquetes en monorepos.

Actualmente, trabajo en Bit, donde me encargo de las tareas relacionadas con la gestión de dependencias. También soy el principal mantenedor del proyecto de código abierto pnpm, que es un gestor de paquetes JS. Antes de Bit, trabajé en JustAnswer. En JustAnswer teníamos un monorepo enorme con cientos de componentes. La instalación con npm llevaba 30 minutos en ese monorepo. Esa fue la principal razón por la que empecé a contribuir a una alternativa más rápida, pnpm. Con pnpm, pudimos reducir el tiempo de instalación a unos 90 segundos.

Veamos brevemente la historia de las herramientas de monorepo para proyectos JS. Babel fue uno de los proyectos más influyentes en el ecosistema de JavaScript y probablemente fue uno de los primeros proyectos JS de código abierto populares que utilizó un monorepositorio. Los creadores de Babel crearon Lerna en 2015. Lerna podía instalar dependencias en un monorepo utilizando npm-cli bajo el capó. Dicho esto, la instalación con Lerna era terriblemente lenta, por decir lo menos. Todos sabían que los gestores de paquetes deberían implementar la instalación en monorepos de forma nativa. Para el año 2017, tanto pnpm como Yarn habían lanzado soporte para monorepos. Yarn llamó a esta característica instalación de workspaces, mientras que pnpm utilizó el término singular workspace. En un par de años, npm también lanzó soporte para workspaces. A día de hoy, hay tres gestores de paquetes maduros y populares de Node.js con soporte integrado para monorepos.

Existen dos formas en que los gestores de paquetes pueden organizar las dependencias en un monorepo: hoisted e aislado. Los tres gestores de paquetes admiten ambos diseños. Por defecto, Yarn y npm utilizan un enfoque hoisted. Con este enfoque, todas las dependencias directas e indirectas se colocan en el directorio raíz no-modules. Si hay varias versiones de las mismas dependencias, una de las versiones se anida. Como puedes ver en esta diapositiva, hay dos versiones diferentes de lodash. Por lo tanto, una de las versiones se anida en la raíz del monorepo, mientras que la otra se anida dentro de app2. pnpm utiliza un diseño diferente llamado módulos de nodos aislados. Con los módulos de nodos aislados, las dependencias de cada paquete se anidan. La ventaja de este enfoque es que los paquetes solo tienen acceso a sus propias dependencias.

2. Gestión de Dependencias en Monorepos

Short description:

Mientras que con el diseño hoisted, todos los proyectos tendrían acceso al paquete cookie. Es realmente fácil desordenar las dependencias en un monorepo. Main.js en app1 está utilizando lodash que se encuentra en las dev.dependencies. Trabajar con dependencias entre pares en monorepos es un desafío. Es crucial utilizar una única versión de la dependencia entre pares en todos los paquetes del espacio de trabajo. Solo Yarn admite actualmente la sincronización de versiones de dependencias de forma nativa. pnpm tiene planes de introducir esta función a través de los catálogos del espacio de trabajo. pnpm ofrece una función para admitir múltiples versiones de una dependencia entre pares conocida como dependencias inyectadas.

Mientras que con el diseño hoisted, todos los proyectos tendrían acceso al paquete cookie, con un diseño de módulos de nodo aislado, los proyectos solo tienen acceso a sus propias dependencias. Por lo tanto, en este caso, solo app1 podrá requerir cookie.

Creo que la mayoría de las personas están de acuerdo en que los monorepos brindan una experiencia de desarrollo superior. A pesar de esto, es realmente fácil desordenar las dependencias en un monorepo. Como se puede ver en este ejemplo, la aplicación está utilizando una cookie pero no la lista en sus dependencias. Este código funcionará localmente porque la cookie se encuentra en el directorio de módulos de nodo de un directorio padre. Sin embargo, se romperá cuando alguien instale app1 fuera del monorepo.

Otro problema en este ejemplo es que main.js en app1 está utilizando lodash. Main.js es código de producción, pero lodash está listado en las dev.dependencies. Esto significa que este código funcionará localmente, pero se romperá en producción donde no se instalan las dev.dependencies. Para detectar estos dos problemas específicos, puedes utilizar una regla especial en eslint, la regla de noextraneous dependencies del complemento de importación. Si configuras esta regla de linting, eslint te notificará las dependencias que se importan pero no se declaran en package.json. En este ejemplo, recibirás un error sobre el uso de cookie en app1. eslint también te notificará que lodash es una dev.dependency. Puedes evitarlo si se utiliza en código de producción.

Trabajar con dependencias entre pares en monorepos es un desafío. Es crucial que las dependencias entre pares sean únicas durante la ejecución. Si es posible, debes intentar utilizar una única versión de la dependencia entre pares en todos los paquetes del espacio de trabajo. Como se puede ver en este ejemplo, tanto card como button hacen referencia a la misma versión de React. Esto funcionará bien. Ya sea que estés lidiando con dependencias entre pares o no, es preferible utilizar la misma versión de una dependencia en todos tus proyectos. Hacerlo puede ayudarte a evitar problemas relacionados con las dependencias entre pares y reducir el tamaño de tus paquetes. Hasta donde yo sé, solo Yarn admite actualmente la sincronización de versiones de dependencias de forma nativa utilizando restricciones. pnpm tiene planes de introducir esta función a través de los catálogos del espacio de trabajo. También es posible utilizar herramientas de terceros para encontrar duplicados de versiones. Varios herramientas de terceros actúan como linters para verificar la inconsistencia de versiones. Una de estas herramientas es Syncpack. En monorepos grandes, a veces puede resultar desafiante evitar tener múltiples versiones de una dependencia entre pares. Entre npm, yarn y pnpm, solo pnpm ofrece una función para admitir múltiples versiones de una dependencia entre pares. Esta función se conoce como dependencias inyectadas.

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

Elevando Monorepos con los Espacios de Trabajo de npm
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Elevando Monorepos con los Espacios de Trabajo de npm
Top Content
NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.
pnpm: un gestor de paquetes rápido y eficiente para JavaScript
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm: un gestor de paquetes rápido y eficiente para JavaScript
pnpm is a fast and efficient package manager that gained popularity in 2021 and is used by big tech companies like Microsoft and TikTok. It has a unique isolated node module structure that prevents package conflicts and ensures each project only has access to its own dependencies. pnpm also offers superior monorepo support with its node module structure. It solves the disk space usage issue by using a content addressable storage, reducing disk space consumption. pnpm is incredibly fast due to its installation process and deterministic node module structure. It also allows file linking using hardlinks instead of symlinks.
Poner fin al dolor: Repensando CI para Monorepos Grandes
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Poner fin al dolor: Repensando CI para Monorepos Grandes
Today's Talk discusses rethinking CI in monorepos, with a focus on leveraging the implicit graph of project dependencies to optimize build times and manage complexity. The use of NX Replay and NX Agents is highlighted as a way to enhance CI efficiency by caching previous computations and distributing tasks across multiple machines. Fine-grained distribution and flakiness detection are discussed as methods to improve distribution efficiency and ensure a clean setup. Enabling distribution with NX Agents simplifies the setup process, and NX Cloud offers dynamic scaling and cost reduction. Overall, the Talk explores strategies to improve the scalability and efficiency of CI pipelines in monorepos.
La filosofía de Yarn
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
La filosofía de Yarn
Let's talk about React and TypeScript, Yarn's philosophy and long-term relevance, stability and error handling in Yarn, Yarn's behavior and open source sustainability, investing in maintenance and future contributors, contributing to the JavaScript ecosystem, open-source contribution experience, maintaining naming consistency in large projects, version consistency and strictness in Yarn, and Yarn 4 experiments for performance improvement.
Yarn 4 - Gestión Moderna de Paquetes
JSNation 2022JSNation 2022
28 min
Yarn 4 - Gestión Moderna de Paquetes
Top Content
Yarn is a package manager that focuses on stability, performance, and security. It offers unique features like plug and play installation, support for nonmodules, and the exec protocol. Yarn is committed to being a good citizen in the open-source community and contributes to fixing dependencies. It is part of the Node.js Loader's working group and advocates for Corepack. Yarn is still experimental but is improving its user experience and security features. Contributions are welcome, and switching to Yarn can improve performance in large projects.
Microfrontends Federados a Gran Escala
React Summit 2023React Summit 2023
31 min
Microfrontends Federados a Gran Escala
Top Content
This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.

Workshops on related topic

React a Escala con Nx
React Summit 2023React Summit 2023
145 min
React a Escala con Nx
Top Content
Featured WorkshopFree
Isaac Mann
Isaac Mann
Vamos a utilizar Nx y algunos de sus plugins para acelerar el desarrollo de esta aplicación.
Algunas de las cosas que aprenderás:- Generar un espacio de trabajo Nx prístino- Generar aplicaciones frontend React y APIs backend dentro de tu espacio de trabajo, con proxies preconfigurados- Crear librerías compartidas para reutilizar código- Generar nuevos componentes enrutados con todas las rutas preconfiguradas por Nx y listas para usar- Cómo organizar el código en un monorepositorio- Mover fácilmente las librerías alrededor de tu estructura de carpetas- Crear historias de Storybook y pruebas e2e de Cypress para tus componentes
Tabla de contenidos: - Lab 1 - Generar un espacio de trabajo vacío- Lab 2 - Generar una aplicación React- Lab 3 - Ejecutores- Lab 3.1 - Migraciones- Lab 4 - Generar una librería de componentes- Lab 5 - Generar una librería de utilidades- Lab 6 - Generar una librería de rutas- Lab 7 - Añadir una API de Express- Lab 8 - Mostrar un juego completo en el componente de detalle de juego enrutado- Lab 9 - Generar una librería de tipos que la API y el frontend pueden compartir- Lab 10 - Generar historias de Storybook para el componente de interfaz de usuario compartido- Lab 11 - Prueba E2E del componente compartido
Monorepos de Node con Nx
Node Congress 2023Node Congress 2023
160 min
Monorepos de Node con Nx
Top Content
WorkshopFree
Isaac Mann
Isaac Mann
Varias apis y varios equipos en el mismo repositorio pueden causar muchos dolores de cabeza, pero Nx te tiene cubierto. Aprende a compartir código, mantener archivos de configuración y coordinar cambios en un monorepo que puede escalar tanto como tu organización. Nx te permite dar estructura a un repositorio con cientos de colaboradores y elimina las desaceleraciones de CI que normalmente ocurren a medida que crece la base de código.
Índice de contenidos:- Laboratorio 1 - Generar un espacio de trabajo vacío- Laboratorio 2 - Generar una api de node- Laboratorio 3 - Ejecutores- Laboratorio 4 - Migraciones- Laboratorio 5 - Generar una biblioteca de autenticación- Laboratorio 6 - Generar una biblioteca de base de datos- Laboratorio 7 - Añadir un cli de node- Laboratorio 8 - Limites de módulo- Laboratorio 9 - Plugins y Generadores - Introducción- Laboratorio 10 - Plugins y Generadores - Modificación de archivos- Laboratorio 11 - Configuración de CI- Laboratorio 12 - Caché distribuida
Encontrar, Hackear y solucionar las vulnerabilidades de NodeJS con Snyk
JSNation 2022JSNation 2022
99 min
Encontrar, Hackear y solucionar las vulnerabilidades de NodeJS con Snyk
WorkshopFree
Matthew Salmon
Matthew Salmon
npm y seguridad, ¿cuánto sabes sobre tus dependencias?Hack-along, hacking en vivo de una aplicación Node vulnerable https://github.com/snyk-labs/nodejs-goof, Vulnerabilidades tanto de código abierto como de código escrito. Se anima a descargar la aplicación y hackear junto con nosotros.Corrigiendo los problemas y una introducción a Snyk con una demostración.Preguntas abiertas.
Construye aplicaciones Web3 con React
React Summit 2022React Summit 2022
51 min
Construye aplicaciones Web3 con React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es hacer que sea fácil para los desarrolladores de React construir aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.
Aprende más sobre el Hyperverse aquí.
Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en React.