1 of 37

Introdución a pnpm

Manejador de paquetes en Node.js rápido y eficiente con tu disco duro

BeerJS Cba 58 - 2021

2 of 37

Juan Picado

  • Senior Front-End Engineer en �eBay Classifieds Group (Adevinta)
  • Mantengo el proyecto Verdaccio
  • Colaboro con pnpm (a veces)
  • 📍 Berlin 🇩🇪
  • ❤️ Madrid 🇪🇸 / 🇳🇮

3 of 37

Hoy hablamos de

  • Node.js
  • Manejadores de Paquetes
  • Workspaces con pnpm
  • Demo 15 min

4 of 37

Manejadores de Paquetes

  • Workspaces
  • Checkshum
  • Lock File
  • Fue el primero
  • Dependency Hell Fix
  • Preinstalado con Node.js
  • Symlinks
  • Instalar Node.js
  • Estricto por defecto

5 of 37

pnpm (performant npm)

6 of 37

Un poco de historia

7 of 37

Es de los más rápidos en muchas circunstancias

8 of 37

Todos crecen en popularidad empujados por JavaScript en general

9 of 37

Instalando pnpm

10 of 37

Corepack

Desde Node.js 17 o mayor (o Node.js 16 experimental)

11 of 37

Que nos ofrece pnpm?

12 of 37

pnpm usa enlaces simbolicos

  • Los enlaces simbólicos ocupan muy poco espacio
  • Hace que las escrituras/lecturas en el disco duro sean muy rápidas

13 of 37

Hoisted Modules

Desde npm@3 construye árbol de directorio en modo “flat”

pnpm install --shamefully-hoist

14 of 37

Hoisted Modules

Un ejemplo sencillo:

Dependencia A y B

A -> B@1.0.0

C -> B@2.0.0

15 of 37

Hoisted Modules

Si una dependencia está duplicada, se guarda en un segundo nivel.

@jotadev/b

esta dentro de @jotadev/c

16 of 37

Hoisted Modules

Si una dependencia está duplicada, se guarda en un segundo nivel.

@jotadev/b

esta dentro de @jotadev/c

17 of 37

Hoisted Modules

Node.js resuelve enlaces simbólicos como enlaces reales.

  • Evita la repetición de archivos
  • Ahorra espacio

18 of 37

Hoisted Modules

.pnpm es la carpeta que almacena todos los paquetes en una estructura plana, así que cada paquete puede ser encontrado bajo este patrón.

19 of 37

Performance

20 of 37

Performance

21 of 37

Limitaciones

  • npm-shrinkwrap.json y package-lock.json son ignorados
  • bundledDependencies es una propiedad nativa de npm y es ignorada, pnpm publish ignorará este campo.
  • No funciona en FAT 32 (sdcard)

22 of 37

pnpm import

Con este comando puedes lidiar con la anterior limitación y convertir otros lockfiles a pnpm-lock.yaml.

23 of 37

Comandos en pnpm

24 of 37

Comandos populares

pnpm guarda compatibilidad con npm en muchos de sus comandos. Incluso pnpm delega algunos de ellos a npm que aun no han sido implementados.

  • Manejo y Revisión de dependencias
  • Scripts (pnpm start, etc)

25 of 37

pnpx (pnpm dlx and pnpm exec run)

pnpx es un comando similar a npx (es legacy).

pnpm dlx es similar a pnpx con la diferencia que necesita pnpm preinstalado y instala el paquete y lo ejecuta.

💡Util para ejecutar create-react-app

26 of 37

pnpx (pnpm dlx and pnpm exec run)

pnpx es un comando similar a npx (es legacy).

pnpm exec es similar a pnpx con la diferencia que ejecuta paquetes desde node_modules/.bin

💡 Muy útil cuando necesitas ejecutar jest o eslint directamente

27 of 37

pnpm filter

Filtering es una manera de ejecutar scripts dentro de un workspaces sin navegar a carpetas con patrones.

💡 Como en Lerna

28 of 37

pnpm y workspaces

29 of 37

pnpm workspaces

Workspaces es una característica que te permite administrar múltiples paquetes dentro de un proyecto (mono-repo).

Debe existir un archivo pnpm-workspaces.yaml en la raíz del repositorio.

30 of 37

Para Avanzados 🤠

31 of 37

pnpm plug and play

El archivo .pnpmfile.cjs te permite modificar la ejecución de la instalación con hooks.

32 of 37

GitHub Actions

En vez de instalar pnpm de manera manual, puedes usar el GH Action con caché integrado.

33 of 37

pnpm env <cmd>

Te permite instalar Node.js como si lo hicieras on nvm (node version manager).

34 of 37

Overrides

TBA

35 of 37

😎 Demo 🥳

15 minutos

  • workspaces
  • pnpm filter
  • pnpm rescursive

36 of 37

Interesante para leer

37 of 37