PNPM: Una alternativa para NPM

Como desarrolladores, necesitamos un administrador de paquetes que nos facilite organizarlos y compartirlos,  así como módulos del entorno donde programamos.

Quienes usamos Node.js empleamos por defecto NPM. Sin embargo, el mayor inconveniente que tenemos con éste es la gran cantidad en espacio de disco que ocupamos en cada proyecto, es decir, que si tenemos 50 proyectos donde usamos la misma dependencia, tendremos 50 copias de esa dependencia guardadas en disco.

Esto no sucede con PNPM (Performant NPM), un administrador de paquetes mejorado que es hasta dos veces más rápido que NPM e incluso que las demás alternativas, y permite enlazar, en una sola dependencia, los 50 proyectos.

¿Por qué PNPM es más rápido que NPM?

PNPM no tiene etapas de bloqueo de instalación, ya que cada dependencia tiene sus propias etapas y la siguiente inicia tan pronto como sea posible y no al terminar todas a la vez.

A continuación, te explicaré paso a paso cómo instalarlo y usarlo para nuestros proyectos, creando una pequeña aplicación con React.js y Vite.

¿Cómo instalamos PNPM?

La manera más fácil de instalar PNPM es usando NPM:

¿Cómo comprobamos que ya lo tenemos instalado?

👉 Si no usas NPM, no te preocupes: puedes instalarlo de otras maneras. A continuación, te describo las diferentes formas que existen para la instalación:

🖥️ Si usas Windows puedes instalarlo en PowerShell:

🖥️  Con sistemas POSIX:

1. Mediante curl:

2.     Mediante wget:

🖥️  Con Alpine Linux:

Si necesitas instalar una versión específica, usa lo siguiente:

Si quieres instalar una versión en específico, entonces:

🖥️ Con Corepack

Desde su versión 16.13, Node.js nos envía Corepack para administrar administradores de paquetes. Es importante saber que esto es una función totalmente experimental, por lo que previamente se debe habilitar con el comando:

Si instalaste Node.js usando Homebrew, deberás instalar Corepack por separado de esta forma:

Al ejecutar lo anterior, se instalará automáticamente PNPM. Sin embargo, muy probablemente no sea la última versión. Por eso se debe actualizar, verificando cuál es la última versión de NPM y ejecutar:

👉 Si usas la versión 16.17 o posterior de Node.js, puedes instalar la última versión de PNPM solamente especificando la etiqueta latest de esta manera:

🖥️  Con Homebrew

Si tienes instalado en tu sistema este administrador de paquetes, puedes instalar PNPM así:

🖥️ Con Scoop

Si ya tienes Scoop en tu sistema, instala PNPM con lo siguiente:

¿Se puede usar PNPM en servidores CI?

¡Por supuesto! PNPM puede usarse muy fácilmente en varios sistemas de integración continua:

📌 Si utilizas GitbLab Cli:

Para almacenar e instalar en caché sus dependencias, edita el archivo .gitlab-ci.yml:

📌 Si utilizas Bitbucket Pipelines: Al igual que con GitLab, se debe editar su archivo .bitbucket-pipelines.yml.

📌 En caso de que uses Azure Pipelines: Recuerda que esta edición se realiza en el archivo .azure-pipelines.yml:

📌 En caso que uses GitHub Actions: Recuerda que esta edición se realiza en el archivo .github/workflows/NAME.yml.

📌 Si usas AppVeyor: Recuerda que esta edición se realiza en el archivo .appveyor.yml.

Es importante mencionar que, si trabajas con Git, debes tener cuidado con el archivo package-lock.yarml, de modo de evitar errores al momento de usar tu repositorio.

Al igual que con NPM, usaremos el comando init, es decir, pnpm init, pero recomiendo tener cuidado sobre los cambios que realices antes de confirmarlos, ya que compilará los paquetes más actualizados (lo ideal para la gran mayoría de los casos), pero si no es tu objetivo, mejor revísalo.

¿Cómo realiza PNPM el manejo de dependencias?

Cuando ya lo tengamos instalado, necesitaremos implementarlo, algo muy similar al uso de NPM. A continuación, describo los comandos más usados y cómo implementarlos:

✅ Añadir paquetes

Usamos el comando:

Por defecto, él se encargará de instalar el paquete en su última versión. Si quisiéramos instalar una versión más específica, usaremos etiquetas, versión específica o rango de las versiones. Si aplicamos el ejemplo con express tendríamos:

🔵 Con etiqueta:

🔵 Usando versión:

🔵 Con rango de versión:

Como mencionaba anteriormente, con este comando se instalará por defecto la última versión especificada en el package-name desde el registro de NPM.

✅ Actualización de paquetes

Tienes varias maneras de realizarlo. Debes escoger la que se adapte mejor a lo que necesitas. A continuación, muestro un ejemplo usándolo para Babel:

🔵 Si quieres actualizar todo el paquete, debes implementar:

🔵 Si quieres realizar excepciones en la actualización, utiliza:

Lo anterior actualiza todas las dependencias en nuestro proyecto, exceptuando webpack.

Es importante saber que en estos patrones se pueden realizar combinaciones. Por ejemplo:

En el primer comando actualizaremos todo el paquete de Babel y, en el segundo, actualizaremos Babel exceptuando core.

✅ Instalación de paquetes

Al igual que NPM, PNPM funciona con el comando:

📌 Dentro de un workspace (espacio de trabajo), este comando instalará todas las dependencias en todos tus proyectos. Para evitarlo, puedes desactivar la función de recursividad: recursive-install false.

🔍 Soporta alias, esto quiere decir que si ejecutas con i funcionará de la misma manera.

✅ Desinstalación de paquetes

Se usa el comando:

De esta manera, eliminará todo lo que estaba en node_modules desde el package.json de tu proyecto. Si quieres eliminar solo una, agrega el nombre al final del comando.

¿Podemos usar scripts con PNPM?

Claro que sí. A continuación, te detallo cómo realizarlo:

✅ Create

Usamos PNPM seguido del create. Por ejemplo, con React.js el script sería:

✅ Test

Ejecuta un comando que realicemos con la propiedad script en test del package. Este puede funcionar para ejecutar pruebas unitarias o pruebas de integración en el proyecto.

✅ Start

Se utiliza para iniciar un paquete cuando es necesario. Ejecuta un comando que realicemos en el script de start del package en scripts.

Es importante saber que, si no se especifica nada en la parte de script, por defecto ejecutará Node Server.js y, si no está especificado, dará error.

Creemos un ejemplo práctico

Sabiendo todo lo anterior, explicaré un ejemplo sencillo. Vamos a suponer que queremos crear una aplicación. En la parte de scripts explicaba que podemos usar:

Pero ¿qué pasa si deseas crear el proyecto con alguna herramienta de compilación? En este ejemplo, usaremos Vite.js para crear una app con React y JavaScript.

👉 Usaré Visual Studio Code como editor de código, aunque puedes usar el que más te guste.

Paso 1: La terminal se verá de la siguiente manera:

Paso 2: Procedemos a instalar todas las dependencias.

Paso 3: Verás que se crea el proyecto como lo harías con NPM, con el detalle que en node_modules notamos que aparece la flecha de referencia.

Acá lo que quiere decir es que está usando la instalación de la dependencia de otro proyecto en mi sistema para referenciarlo y no volver a instalarlo. La gran ventaja de esto es que ahorra mucho espacio en tu disco, proporcional a la cantidad de proyectos y dependencias, ¡y tienes instalaciones mucho más rápidas!

Paso 4: Instalar una dependencia de desarrollo (en este caso, react-icons):

🔍 Es importante saber que, si la dependencia genera algún error o advertencia, la terminal nos mostrará un mensaje más estético e informativo que usando NPM.

👉 Acá me saldré a la carpeta padre llamada React, donde no teníamos ningún package-lock, tratando de instalar siempre React icons para mostrarte cómo aparece un error:

🔍 Vemos que, al momento de instalar, manda una alerta y no instala hasta resolverla. Dicha alerta nos dice que debemos tener instalado todo el paquete de react@”*” para proceder con la instalación. Esto lo solucionaremos siguiendo las instrucciones de consola:

A continuación, lo puedes eliminar ya que React lo tenemos instalado en la carpeta ejemplo:

Paso 5: Eliminado lo anterior, vamos a la carpeta ejemplo y ahora iniciaremos Vite.

📌 Aclaro que, a manera de explicación, por esta vez no usaremos el script dev sino el start:

🔍 Vemos que, por defecto, él busca el archivo server.js y, al no encontrarlo, genera un error. Ahora editaremos el script y vemos cómo Vite inicia normalmente:

¡Listo! Ya tenemos una aplicación hecha funcional en React y hemos practicado algunos comandos básicos enseñados previamente 😀.

⚠️ Algo extra que me gustaría añadir es que, al momento de hacer un deploy de nuestro proyecto, probablemente dará error, ya que primero debes saber si donde subirás tu página soporta PNPM.

Actualmente, las opciones más comunes para subir tu proyecto son Netlify o Vercel. Ambas ya soportan PNPM. Para Vercel, necesitas tener desde la versión 5.4 de PNPM o posterior para subir tu proyecto. Acá puedes ver la documentación de Vercel donde explica esto.

Conclusión

PNPM es una excelente opción para mejorar el rendimiento de monorrepositorios, y se puede usar en nuestros proyectos que realizamos a diario ya que tiene herramientas para modificar lo que viene por defecto.

Dado lo anterior, es una gran alternativa a NPM e incluso a otros administradores de paquetes. El proyecto de PNPM está en GitHub y, si deseas más información, te invito a echarle un vistazo a la documentación oficial.

Esta ha sido mi guía para explicar un paso a paso de cómo integrar PNPM a tus futuros proyectos. Espero que logre servirte.

Anímate a probar esta opción en tu desarrollo  💻 😊.

¡Nos vemos pronto!