⛩️ La Guerra de los Paquetes

En el ecosistema JavaScript, tres guerreros compiten por tu atención: npm, pnpm y yarn. Cada uno tiene fortalezas únicas. Como Ninja, debes conocer sus secretos.


🎯 Definición Teórica: ¿Por Qué Importa el Gestor?

El Problema

JavaScript necesita un gestor de dependencias robusto. Las diferencias impactan directamente en:

AspectoImpacto
VelocidadTiempo de desarrollo
Espacio en discoLimitaciones de deployment
ConsistenciaBugs enigmáticos
SeguridadVulnerabilidades

El Por Qué Técnico

  • npm: El estándar oficial, pero lento y verbose
  • pnpm: (revolución) con hard links y deduplicación
  • yarn: Balance entre velocidad y features

🗡️ Guía de Implementación

Comparativa de Comandos

# ╔══════════════════════════════════════════════════════════════╗
# ║                    COMANDOS COMPARATIVOS                       ║
# ╠══════════╦══════════╦══════════╦═════════════════════════════╣
# ║ Acción    ║   npm    ║   pnpm   ║           yarn             ║
# ╠══════════╬══════════╬══════════╬═════════════════════════════╣
# ║ Instalar  ║ npm i    ║ pnpm i   ║ yarn add                   ║
# ║ Global    ║ npm i -g ║ pnpm i -g║ yarn global add            ║
# ║ Dev       ║ npm i -D ║ pnpm i -D║ yarn add -D                ║
# ║ Remover   ║ npm r    ║ pnpm r   ║ yarn remove                ║
# ║ Actualizar║ npm up   ║ pnpm up  ║ yarn upgrade               ║
# ║ Ejecutar  ║ npm run  ║ pnpm    ║ yarn                       ║
# ╚══════════╩══════════╩══════════╩═════════════════════════════╝

Instalación

# npm (ya viene con Node)
node -v
npm -v

# pnpm
npm install -g pnpm
# o
curl -fsSL https://get.pnpm.io/install.sh | sh -

# yarn
npm install -g yarn

Rendimiento Real

# Benchmarks típicos (resultados pueden variar)
# ╔════════════════════════════════════════════════════╗
# ║  Comando         ║  npm  ║  pnpm  ║  yarn  ║
# ╠══════════════════╬═══════╬════════╬═══════╣
# ║  clean install   ║  45s  ║  18s   ║  28s   ║
# ║  add package     ║  12s  ║  3s    ║  8s    ║
# ║  remove package  ║  8s   ║  2s    ║  6s    ║
# ╚══════════════════╝ 2023  ║  Benchmarks

Diferencias Críticas

1. Estructura de node_modules

# npm: flat node_modules (versión 7+ con workspaces)
proyecto/
└── node_modules/
    ├── lodash/          # Copia directa
    └── react/          # Copia directa

# pnpm: contenido-addressable store + hard links
proyecto/
└── node_modules/
    └── .pnpm/
        ├── lodash@4.17.21/
   └── node_modules/
        └── react@18.2.0/
            └── node_modules/

# yarn: flat con symlinks (antes),  PnP (Plug'n'Play)
proyecto/
└── node_modules/
    ├── .pnp.cjs        # Mapeo de paquetes
    └── lodash -> .yarn/unplugged/lodash...

2. Deduplicación

# pnpm instala exactamente UNA versión de cada paquete
# npm/yarn instalan múltiples versiones si hay conflictos

# Ejemplo: proyecto usa lodash@4.17.20 y lodash@4.17.21
# npm:   node_modules/lodash (una copia)
#        Dependientes tienen sus propias copias si difieren
# pnpm:  UN hard link, todos comparten

🥷 Reto Ninja

Nivel: Genin → Jonin

Misión 1: Comparativa de Rendimiento

# Crea un script que mide tiempo de instalación
time npm install lodash express react axios
time pnpm add lodash express react axios
time yarn add lodash express react axios

Misión 2: Elige tu Arma

EscenarioRecomendación
Proyecto legacynpm (compatibilidad)
Nuevo proyectopnpm (velocidad + espacio)
Equipo nuevoyarn (documentación)
Monorepopnpm workspaces
CI/CD rápidopnpm

Misión 3: Transforma tu Proyecto

# Migrar de npm a pnpm
rm -rf node_modules package-lock.json
pnpm install

# Migrar de yarn a pnpm
rm -rf node_modules yarn.lock
pnpm import

📜 Casos de Uso Avanzados

Workspaces (Monorepos)

// package.json - raíz
{
  "name": "mi-monorepo",
  "private": true,
  "workspaces": ["packages/*"]
}
# pnpm workspaces (más poderoso)
# pnpm-workspace.yaml
packages:
  - 'packages/*'
  - 'apps/*'

Scripts Pre/Post

# package.json
{
  "scripts": {
    "preinstall": "echo 'Preparando shinobi...'",
    "install": "echo 'Instalando deps...'",
    "postinstall": "echo 'Listo para batalla!'"
  }
}

npmrc para Velocidad

# ~/.npmrc para npm
registry=https://registry.npmjs.org/
prefer-offline=true

# pnpm workspace
# pnpm-workspace.yaml
strict-peer-dependencies=false

🎓 Conclusión del Maestro

“No importa qué gestor elijas, lo que importa es que domines uno. Pero el Ninja sabio conoce las fortalezas de cada uno.” — Maestro del Código


✅ Checklist de Dominio

  • npm, pnpm, yarn instalados
  • Realizar benchmark en proyecto real
  • Configurar pnpm workspace
  • Entender deduplicación
  • Migrar un proyecto

Recompensa XP: 75 XP ⚔️