Simplificar las Publicaciones de Paquetes - Desde la Versionado hasta la Publicación

Rate this content
Bookmark

Los monorepos han demostrado ser útiles cuando se trata de desarrollar y publicar paquetes NPM relacionados. Ofrecen una experiencia de desarrollo unificada al tiempo que permiten la distribución de paquetes más detallados para facilitar su consumo. De hecho, muchas bibliotecas OSS populares siguen este enfoque, como Vue, Angular, React, Vite, Tanstack y RxJS (solo por mencionar algunas). Sin embargo, el proceso de publicación dentro de los monorepos presenta desafíos únicos, especialmente cuando se trata de paquetes interdependientes múltiples. Y sí, existen soluciones para la versionado y la publicación de paquetes, pero a menudo no son suficientes cuando se trata de monorepos. Nx recientemente introdujo un comando de "release" diseñado para estos escenarios.

En mi charla, exploraré cómo podemos configurar un proceso de publicación, que cubra la versionado, la generación de registros de cambios y la publicación en plataformas como NPM y GitHub (incluido el soporte de procedencia). Únete a mí para descubrir más.

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

Juri Strumpflohner
Juri Strumpflohner
7 min
13 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla se centra en el comando de lanzamiento de Nx para publicar paquetes npm en una configuración de monorepo. Asegura el orden correcto de publicación de paquetes, maneja la versionado y los registros de cambios, y permite simular cambios antes de la publicación. Las características avanzadas incluyen la versionado configurable, las publicaciones en grupo y el soporte para diferentes idiomas. Hay documentación, videos y recetas disponibles para personalizar y automatizar las publicaciones en tu sistema de CI.

1. Introducción al comando de lanzamiento de Nx

Short description:

Me centraré en el comando de lanzamiento de Nx para publicar paquetes npm en una configuración de monorepo. Asegura que los paquetes se publiquen en el orden correcto y maneja la versión y los registros de cambios. Puedes ejecutar el comando 'Nx release' para simular y ver los cambios antes de publicar. Usa el comando 'Nx set up Verdasho' para crear un registro local de npm Verdasho para realizar pruebas.

Así que tenemos siete minutos. Ni siquiera preparé diapositivas. Ahora, podría mostrarte cómo pasamos de ser un desarrollador 10x a ser un desarrollador Nx, pero no tenemos suficiente tiempo. Mi nombre es Juri. Soy miembro del equipo principal de Nx. Hacemos muchas cosas, desde el desarrollo local hasta CI, así que tenemos mucho soporte.

Lo que quiero enfocar es el comando de lanzamiento de Nx que lanzamos hace medio año aproximadamente al público, y básicamente se trata de publicar paquetes npm. Aquí tengo un espacio de trabajo local de npm, así que si voy al archivo package JSON, puedes ver que aquí hay una versión de Nx instalada, hay un espacio de trabajo de npm configurado en un paquete en ejemplos, y si ejecuto un gráfico de Nx, que puedes ejecutar en cualquier espacio de trabajo incluso si no tienes Nx instalado, te mostrará cómo se ve la estructura. Está inspirado en 10-sec query que utiliza Nx para desarrollar sus paquetes. Espero que Dominic no esté viendo esto porque no hay lógica aquí.

Quiero mostrar lo que significa versionar, generar registros de cambios y publicar este tipo de paquetes. Hay soluciones disponibles, pero generalmente carecen un poco cuando se trata de una configuración de monorepo. Hay algunas dependencias allí, especialmente si hablamos de versiones, pero incluso en el proceso de publicación, si enviamos estos paquetes a npm, no queremos enviar un paquete que queremos enviar en el orden correcto porque no queremos tener una dependencia que aún no se haya publicado. ¿Cómo funciona? Básicamente, puedes ejecutar un solo comando que es un lanzamiento de Nx. Este es nuestro primer lanzamiento porque aún no tenemos uno. Luego ejecutas menos D que es el modo de simulación. Quiero hacer una prueba en seco para ver qué sucede. Recorre el paquete que tienes. Sí, queremos lanzar una versión principal. Como puedes ver, imprime una diferencia de lo que sucedería, por lo que incrementa la versión en consecuencia. También actualiza las dependencias locales que puedas tener en ese espacio de trabajo y genera un registro de cambios si es necesario generarlo. Básicamente, puedo eliminar ese menos D. Ejecutar nuevamente la versión principal y continuar y crear eso. El primer paso aquí abajo, pide la publicación. No quiero enviar eso a npm, pero lo que podemos hacer aquí es que he configurado un registro local de npm Verdasho. Puedes hacer eso. Tenemos un generador que te ayuda a configurarlo. Si ejecutas Nx set up Verdasho, lo creará para ti, y ahora podemos ejecutar algo como registro local. Escribir con esta inclinación es bastante interesante. Este sería nuestro Verdasho local.

2. Funciones avanzadas de lanzamiento de Nx

Short description:

En un escenario del mundo real, puedes configurar la versión, incluyendo la versión independiente y las versiones de GitHub. Nx release admite lanzamientos grupales y se puede extender a diferentes lenguajes. Hay documentación disponible con lanzamientos gestionados, videos explicativos y recetas para personalizar y automatizar los lanzamientos en tu sistema de CI.

Lo eliminé de inmediato, así que está bastante claro. Esto se ejecuta ahora y reescribe todas mis publicaciones locales, así que puedo acceder y luego implementarlo en esta instancia local de Verdasho. De hecho, si vuelvo, puedes ver los paquetes reales que aparecen allí.

En un escenario del mundo real, no quieres ir y especificar manualmente cada vez qué versión quieres incrementar, ya sea una versión principal o no, por lo que existe la posibilidad en el archivo NxJSON de configurar parte de eso, y puedo avanzar aquí, por ejemplo, pegar, digamos, Semver. ¿A dónde va? Déjame escribirlo entonces. Va a obtener ... Entonces, tenemos la versión, y dices semantic versioning, es verdadero. En ese caso, puedo ir a React query, por ejemplo, digamos, aquí tenemos algo de lógica pequeña que queremos implementar. Console lock, sí, eso funciona. Entonces decimos, como, hay una característica, React query. Algo así. Ahora, si ejecutas NxRelease nuevamente, simplemente ejecútalo, detecta automáticamente que es una actualización menor que hemos realizado, por lo que la versión que obtendrás es 1.1.0, y podemos decir que queremos publicar esto, y también obtenemos aquí un registro de cambios en la raíz que está en esta representación. Ahora, hay algunas opciones más que puedes configurar allí. Puedes definir cuál es la relación de producto real aquí, por ejemplo, si es algo que quieres fijar en la versión para que todos los paquetes se incrementen al mismo tiempo, si quieres tener una versión independiente e incluso cosas como tener lanzamientos de GitHub al mismo tiempo que se empujan en lugar de solo npm. Esto es de nuestro propio repositorio de Nx en GitHub, por lo que este es el formato que ves en GitHub donde ves el enlace de comentarios, ves en la parte inferior también el enlace de los contribuyentes para ese lanzamiento específico, por lo que se etiquetan, se informan. Es bastante agradable, una comunidad de código abierto para asegurarse de que esas personas estén informadas. Puedes hacer más cosas en el sentido de tener lanzamientos grupales, lo cual es bastante interesante, por ejemplo, en este caso, tenemos, si miras, partes más relacionadas con React, tenemos un sólido aquí, y más partes principales, por lo que incluso podrías decir que quieres tener algún tipo de grupos de lanzamiento. Veamos si los fragmentos funcionan esta vez, sí, lo hacen. Podrías decir que tengo grupos donde el sólido incluye este tipo de proyectos, y ellos deberían tener una versión de una manera determinada, por lo que puedes versionarlos de forma independiente y publicarlos . Estas son algunas de las funciones que implementamos en esa versión de lanzamiento de Nx. En este momento, uno de los paquetes que admitimos es JavaScript, pero puedes extenderlo por tu cuenta. El proceso general de versión y publicación. Incluso tenemos uno para Rust, y se puede extender a otros lenguajes también. Hay muchas funciones y cosas que te mostré hoy en nuestra documentación, por lo que hay lanzamientos gestionados en general que tienen un video explicativo, y también aquí abajo, ves una serie de recetas diferentes para personalizar y automatizar los lanzamientos en tu sistema de CI, cómo hacer el soporte de procedencia de NPM, y esos tipos de cosas que querrías tener en una forma de publicación de paquetes de código abierto. Bien, eso es todo. Eso es todo lo que puedo mostrarte hasta ahora. Todavía estamos fuera del stand, así que si quieres echar un vistazo y venir a profundizar un poco más, estaré encantado de responder preguntas. Gracias. .

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.
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.
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.
Escala tu aplicación de React sin micro-frontends
React Summit 2022React Summit 2022
21 min
Escala tu aplicación de React sin micro-frontends
This Talk discusses scaling a React app without micro-frontend and the challenges of a growing codebase. Annex is introduced as a tool for smart rebuilds and computation caching. The importance of libraries in organizing code and promoting clean architecture is emphasized. The use of caching, NxCloud, and incremental build for optimization is explored. Updating dependencies and utilizing profiling tools are suggested for further performance improvements. Splitting the app into libraries and the benefits of a build system like NX are highlighted.
La Era de los Monorepos
JSNation 2022JSNation 2022
25 min
La Era de los Monorepos
Today's Talk is about the world of monorepos, their history, benefits, and features. Monorepos address challenges in web development, such as slow build processes and unstable connections on mobile devices. Collocation in monorepos enables easy sharing of functions and components among projects. Speed and efficiency in monorepos are achieved through collocation, dependency graphs, and task orchestration. Monorepo tools like Learnr offer features such as caching and distributed task execution. Monorepos provide code sharing, consistent tooling, and automated migration, resulting in a 10x developer experience.
Remixando tu Stack en un Espacio de Trabajo Monorepo
Remix Conf Europe 2022Remix Conf Europe 2022
22 min
Remixando tu Stack en un Espacio de Trabajo Monorepo
Let's talk about remixing our stack in a Monorepo workspace, which allows for incremental migration and is suitable for transitioning from a Next.js app to a remix stack. Refactoring may be required for feature-specific and Next.js-coupled components, but the process is simplified because the features have already been moved out. Configuring the Monorepo to reference packages locally and linking them to the Next.js application is necessary. Nx provides benefits like fast refreshing, pre-configured setups, and features like local and remote caching.

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