Elevando Monorepos con los Espacios de Trabajo de npm

Rate this content
Bookmark

Aprenda más sobre cómo aprovechar las características predeterminadas de los espacios de trabajo de npm para ayudarlo a administrar su proyecto monorepo, mientras también explora algunas de las nuevas características de npm cli.

Ruy Adorno
Ruy Adorno
33 min
25 Mar, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Los espacios de trabajo de NPM ayudan a administrar múltiples paquetes anidados dentro de un único paquete de nivel superior, mejorando desde el lanzamiento de NPM CLI 7.0. Puede agregar fácilmente dependencias a los espacios de trabajo y manejar duplicaciones. La ejecución de scripts y la orquestación en un monorepo se facilita con los espacios de trabajo de NPM. El comando npm pkg es útil para establecer y recuperar claves y valores de los archivos package.json. Los espacios de trabajo de NPM ofrecen beneficios en comparación con Lerna y los planes futuros incluyen un mejor enlace de espacios de trabajo y la adición de características faltantes.

Available in English

1. Introducción a los Espacios de Trabajo de NPM

Short description:

Hola, y bienvenidos a la masterclass de monorepos con los espacios de trabajo de NPM. Mi nombre es Rui Aduno, desarrollador de software en el equipo de NPM CLI en GitHub. He estado trabajando en NPM CLI durante casi tres años. Comencemos con una visión general de los espacios de trabajo de NPM. Los espacios de trabajo te ayudan a gestionar múltiples paquetes anidados dentro de un único paquete de nivel superior. Centraliza la instalación de dependencias y te permite ejecutar todas las tareas en un solo lugar. Hemos estado mejorando los espacios de trabajo de NPM desde agosto de 2020 con el lanzamiento de NPM CLI 7.0. Se avecinan más mejoras.

Hola, y bienvenidos a la masterclass de monorepos con los espacios de trabajo de NPM. Permíteme empezar presentándome. Mi nombre es Rui Aduno. Soy un desarrollador de software en el equipo de NPM CLI en GitHub. He estado trabajando en NPM CLI durante casi tres años. Trabajé en la reescritura de NPM v7 y en muchas de las características de las que vamos a hablar aquí hoy, especialmente en los espacios de trabajo. Estoy muy emocionado de compartir parte de ese trabajo con ustedes hoy.

Comencemos con una visión general de lo que vamos a cubrir aquí hoy. Empezaremos con una introducción a lo que son los espacios de trabajo de NPM y luego cubriremos algunos ejemplos muy prácticos tratando de acercarnos lo más posible al uso real y también señalaremos algunas de las cosas que deberías esperar. Así que, comencemos.

Los espacios de trabajo de NPM. ¿Qué es? Así que, comencemos con los espacios de trabajo, que es básicamente este concepto introducido por Yarn hace un tiempo y básicamente es una forma de ayudarte a gestionar muchos paquetes dentro de un solo repositorio y para NPM, los espacios de trabajo de NPM es el nombre amplio que dimos al conjunto de características que te ayudan a lograr eso, básicamente te ayudan a gestionar múltiples paquetes anidados dentro de un paquete de nivel superior. Así que, te va a ayudar a centralizar la instalación de todas las dependencias en una sola carpeta de módulos de node. Así que, también terminarás teniendo solo un archivo de bloqueo de paquetes, y hay algunas ventajas en eso, definitivamente es la forma ideal de gestionar monorepos, y gracias a eso puedes tener un solo lugar para gestionar todos tus problemas, y básicamente gestionar tu proyecto y tu comunidad. Pero también, en el lado técnico, también puedes centralizar, tener un solo lugar para ejecutar todas tus tareas, construir, cualquier cosa que puedas imaginar, necesitas todo junto para hacer funcionar tu proyecto con todos los paquetes, puedes tenerlo todo en un solo lugar. Así que, podría ayudar mucho dependiendo del estilo del proyecto que estás tratando de lograr. Otra cosa que me gustaría señalar aquí es la línea de tiempo, solo para dar un poco de esta noción de cómo hemos estado mejorando iterativamente los espacios de trabajo de NPM. Y puedes ver que todo comenzó en agosto de 2020 con el lanzamiento de la versión 7.0 de NPM CLI que introdujo por primera vez el soporte para instalar NPM, los espacios de trabajo. Y luego en la versión 7.7, otra gran actualización, que introdujo por primera vez las propiedades de configuración de un espacio de trabajo o dirigidas a todos los espacios de trabajo y el primer comando que los soportó con NPM Run y NPM Exec. Hubo muchas más, pero solo quería ilustrar cómo hemos estado mejorando. Y definitivamente puedes esperar ver más mejoras en los Espacios de Trabajo de NPM.

2. Añadiendo Espacios de Trabajo y Dependencias

Short description:

Así que comencemos con algunos ejemplos aquí. Tengo este proyecto que tengo en el lado izquierdo aquí, que es una aplicación simple que he armado tratando de acercarme lo más posible a un proyecto de la vida real. Esta es una especie de aplicación web que consta de dos servicios diferentes. Y con eso espero poner algunos ejemplos que están muy cerca de cómo usarías esto en tu vida real. Avanzando aquí, me gustaría destacar NPM Init. Probablemente es la mejor manera de comenzar tu espacio de trabajo. Así que voy a ejecutar un ejemplo rápido aquí en mi aplicación de muestra. Voy a crear un nuevo espacio de trabajo. Digamos que lo voy a llamar el sitio web. Así que puedo ejecutar NPM init. Y estoy apuntando a un sitio web. Así que eso va a crear una carpeta de sitio web con un archivo package.json dentro de ella. Y como mencioné antes, el otro punto realmente importante que NPM init se encarga es de colocar la referencia al sitio web dentro de mi archivo package.json en mi carpeta de nivel superior. Así que con eso, todo está configurado. Si instalo npm aquí, ahora el árbol de instalación va a estar rastreando el sitio web. Y si ejecuto npm ls de nuevo, voy a ver el sitio web listado como uno de los espacios de trabajo aquí resaltado en verde. Y podemos pasar a otro aspecto muy importante. ¿Cómo añades dependencias a uno de tus espacios de trabajo? Así que un ejemplo rápido aquí de nuevo. Voy a cambiar la configuración del espacio de trabajo aquí, para que puedas ver que puedes ir prácticamente a cualquier parte. Así que puedo declarar un espacio de trabajo npm, voy a apuntar al sitio web que acabo de crear.

Así que comencemos con algunos ejemplos aquí. Tengo este proyecto que tengo en el lado izquierdo aquí, que es una aplicación simple que he armado tratando de acercarme lo más posible a un proyecto de la vida real. Esta es una especie de aplicación web que consta de dos servicios diferentes. Así que puedes ver que tengo mi servicio de user sense, mi servicio de web app, e incluso configuré un tercer espacio de trabajo aquí, que son las diapositivas que estás viendo ahora mismo. Así que todos forman parte de esta aplicación monorepo que estoy gestionando aquí.

Y con eso espero poner algunos ejemplos que están muy cerca de cómo usarías esto en tu vida real. Así que puedes ver que todos tienen un montón de dependencias aquí usando NextJS, los servicios usando Fastify. Así que puedo empezar rápidamente ejecutando NPM Ls aquí, y podemos ver cómo Ls es un comando que es consciente de los espacios de trabajo, y va a resaltar cada uno de los espacios de trabajo en mi proyecto, e incluso listar las dependencias de cada espacio de trabajo cuando ejecuto NPM Ls. Así que es el primer comando que sabe que tiene soporte de primera clase para espacios de trabajo. Así que avanzando aquí, me gustaría destacar NPM Init. Probablemente es la mejor manera de empezar tu espacio de trabajo, porque se va a asegurar que cada paso que se necesita va a terminar estando allí. Así que básicamente, todo lo que necesitas para rastrear un paquete anidado como un espacio de trabajo es asegurarte de que tienes la carpeta con un archivo package.json dentro de ella, dentro de tu proyecto, y luego simplemente añadir ese nombre de carpeta a tu campo de espacios de trabajo de tu package.json en el nivel superior. Así que usar NPM init va a asegurar que esos requisitos están allí. Así que voy a ejecutar un ejemplo rápido aquí en mi aplicación de muestra. Voy a crear un nuevo espacio de trabajo. Digamos que lo voy a llamar el sitio web. Así que puedo ejecutar NPM init. Estoy usando dash y aquí para aceptar todos los valores por defecto. Y estoy apuntando a un sitio web. Así que eso va a crear una carpeta de sitio web con un archivo package.json dentro de ella. Va a imprimir el contenido del archivo package.json aquí. Y como mencioné antes, el otro punto realmente importante que NPM init se encarga de es colocar la referencia al sitio web dentro de mi archivo package.json en mi carpeta de nivel superior. Así que con eso, todo está configurado. Si instalo npm aquí, ahora el árbol de instalación va a estar rastreando el sitio web. Y si ejecuto npm ls de nuevo, voy a ver el sitio web listado como uno de los espacios de trabajo aquí resaltado en verde. Así que definitivamente es la forma recomendada de empezar con un nuevo espacio de trabajo dentro de tu proyecto.

Y podemos pasar a otro aspecto muy importante. ¿Cómo añades dependencias a uno de tus espacios de trabajo? Así que un ejemplo rápido aquí de nuevo. Voy a cambiar la configuración del espacio de trabajo aquí, para que puedas ver que puedes ir prácticamente a cualquier parte. Así que puedo declarar un espacio de trabajo npm, voy a apuntar al sitio web que acabo de crear.

QnA

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

Automating All the Code & Testing Things with GitHub Actions
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.
Fine-tuning DevOps for People over Perfection
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Top Content
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.
Why is CI so Damn Slow?
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.
The Zen of Yarn
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.
End the Pain: Rethinking CI for Large Monorepos
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
End the Pain: Rethinking CI for Large Monorepos
Scaling large codebases, especially monorepos, can be a nightmare on Continuous Integration (CI) systems. The current landscape of CI tools leans towards being machine-oriented, low-level, and demanding in terms of maintenance. What's worse, they're often disassociated from the developer's actual needs and workflow.Why is CI a stumbling block? Because current CI systems are jacks-of-all-trades, with no specific understanding of your codebase. They can't take advantage of the context they operate in to offer optimizations.In this talk, we'll explore the future of CI, designed specifically for large codebases and monorepos. Imagine a CI system that understands the structure of your workspace, dynamically parallelizes tasks across machines using historical data, and does all of this with a minimal, high-level configuration. Let's rethink CI, making it smarter, more efficient, and aligned with developer needs.
Atomic Deployment for JS Hipsters
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!

Workshops on related topic

React at Scale with Nx
React Summit 2023React Summit 2023
145 min
React at Scale with Nx
Top Content
Featured WorkshopFree
Isaac Mann
Isaac Mann
We're going to be using Nx and some its plugins to accelerate the development of this app.
Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components
Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component
Node Monorepos with Nx
Node Congress 2023Node Congress 2023
160 min
Node Monorepos with Nx
Top Content
WorkshopFree
Isaac Mann
Isaac Mann
Multiple apis and multiple teams all in the same repository can cause a lot of headaches, but Nx has you covered. Learn to share code, maintain configuration files and coordinate changes in a monorepo that can scale as large as your organisation does. Nx allows you to bring structure to a repository with hundreds of contributors and eliminates the CI slowdowns that typically occur as the codebase grows.
Table of contents:- Lab 1 - Generate an empty workspace- Lab 2 - Generate a node api- Lab 3 - Executors- Lab 4 - Migrations- Lab 5 - Generate an auth library- Lab 6 - Generate a database library- Lab 7 - Add a node cli- Lab 8 - Module boundaries- Lab 9 - Plugins and Generators - Intro- Lab 10 - Plugins and Generators - Modifying files- Lab 11 - Setting up CI- Lab 12 - Distributed caching
Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
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.
MERN Stack Application Deployment in Kubernetes
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Joel Lord
Joel Lord
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.
Azure Static Web Apps (SWA) with Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Juarez Barbosa Junior
Juarez Barbosa Junior
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.