⚡ npx: El Jutsu de la Ejecución Temporal

“El ninja perfecto no deja rastro. Ejecuta su técnica y desaparece sin alterar el entorno.” - Código del Jutsu Temporal

🎯 El Problema que Resuelve npx

Antes de npx (npm < 5.2), para ejecutar herramientas CLI tenías dos opciones:

Opción 1: Instalación Global (contaminante)

npm install -g create-react-app
create-react-app mi-app

npm install -g typescript
tsc --init

npm install -g eslint
eslint --init

Problemas:

• Instalas versiones que quedan obsoletas
• Ocupan espacio en tu sistema
• Conflictos si diferentes proyectos necesitan versiones diferentes
• Requiere permisos de administrador (sudo en Linux/Mac)

Opción 2: Instalación Local (verbose)

npm install --save-dev create-react-app
./node_modules/.bin/create-react-app mi-app

Problemas:

• Sintaxis larga y fea
• Instalas en cada proyecto aunque solo lo uses una vez

La Solución: npx

npx create-react-app mi-app

Beneficios:

• ✅ Ejecuta la versión más reciente sin instalar
• ✅ No contamina tu sistema
• ✅ No requiere permisos especiales
• ✅ Sintaxis limpia y simple

---

📜 ¿Qué es npx?

npx (Node Package eXecute) es un ejecutor de paquetes que viene incluido con npm desde la versión 5.2.

Cómo Funciona

Cuando ejecutas npx create-react-app mi-app:

1. Busca en ./node_modules/.bin/ (instalación local)
2. Si no lo encuentra, descarga temporalmente del registro npm
3. Ejecuta el comando
4. Elimina la descarga temporal (no queda instalado)

Verificar que tienes npx:

npx --version
# 10.2.4 (viene con npm)

---

🚀 Casos de Uso Principales

1. Inicializar Proyectos

React:

npx create-react-app mi-app

Next.js:

npx create-next-app@latest mi-proyecto

Vue:

npx create-vue@latest

Astro:

npx create-astro@latest

Vite:

npx create-vite mi-proyecto

2. Ejecutar Herramientas de Desarrollo

TypeScript:

# Inicializar tsconfig.json
npx tsc --init

# Compilar una vez
npx tsc

ESLint:

npx eslint --init
npx eslint src/

Prettier:

npx prettier --write .

3. Probar Paquetes Antes de Instalar

# Probar cowsay sin instalarlo
npx cowsay "Hola ninja"

# Probar http-server
npx http-server .

# Probar json-server (API fake)
npx json-server --watch db.json

4. Ejecutar Scripts de package.json

# Si tienes un script en node_modules/.bin/
npx webpack --mode production

# Es equivalente a:
./node_modules/.bin/webpack --mode production

5. Ejecutar Versiones Específicas

# Usar versión específica de create-react-app
npx create-react-app@4.0.0 mi-app

# Usar versión latest (más reciente)
npx create-next-app@latest

---

🔍 npx vs npm install -g

Cuándo Usar npx

✅ Usa npx si:

• Ejecutas la herramienta esporádicamente
• Quieres la versión más reciente siempre
• Inicializas proyectos (create-react-app, create-next-app, etc.)
• Pruebas paquetes antes de instalar

Ejemplos:

npx create-react-app mi-app        # Inicializadores
npx http-server .                  # Servidor temporal
npx prettier --write .             # Formateo ocasional
npx lighthouse https://mi-web.com  # Auditoría única

Cuándo Usar npm install -g

✅ Usa instalación global si:

• Usas la herramienta constantemente
• La versión no cambia frecuentemente
• Quieres acceso offline

Ejemplos:

npm install -g vercel              # CLI de deployment
npm install -g netlify-cli         # CLI de hosting
npm install -g nodemon             # Reinicio automático
npm install -g live-server         # Servidor de desarrollo

Comparación Directa

Criterio	npx	npm install -g
Espacio en disco	Temporal (se borra)	Permanente
Velocidad 1ra vez	Descarga cada vez	Descarga una vez
Velocidad después	Descarga siempre	Instantáneo (ya instalado)
Versión	Siempre la última	La que instalaste
Permisos	No requiere sudo	Puede requerir sudo
Uso offline	❌ No funciona	✅ Funciona

---

💡 Trucos Ninja con npx

1. Ejecutar Paquetes de GitHub Directamente

# Ejecutar desde un repositorio de GitHub
npx github:usuario/repositorio

# Ejemplo: Ejecutar gist
npx gist-cli

2. Ejecutar Código Node.js Inline

# Ejecutar código JavaScript directo
npx -p cowsay -c "cowsay Hola"

3. Usar Alias Cortos

# Crear alias en tu .bashrc o .zshrc
alias servidor='npx http-server'
alias prettier-fix='npx prettier --write .'

# Ahora puedes usar:
servidor
prettier-fix

4. Especificar Versión con @

# Versión específica
npx typescript@4.9.5 --version

# Última versión
npx typescript@latest --version

# Versión beta
npx create-react-app@beta mi-app

5. Ejecutar Múltiples Comandos

# Ejecutar varios paquetes en secuencia
npx -p cowsay -p lolcatjs -c "cowsay Hola | lolcatjs"

---

🎯 Casos de Uso Avanzados

Generar Sitios Estáticos

# Crear sitio con Astro
npx create-astro@latest mi-blog

# Crear sitio con Gatsby
npx gatsby new mi-sitio

Auditorías y Testing

# Lighthouse (auditoría de rendimiento)
npx lighthouse https://mi-sitio.com --view

# Analizar bundle de webpack
npx webpack-bundle-analyzer stats.json

# Analizar dependencias desactualizadas
npx npm-check-updates

Herramientas de Productividad

# Servidor HTTP simple
npx http-server ./dist -p 8080

# API REST fake
npx json-server --watch db.json --port 3000

# QR Code en terminal
npx qrcode "https://mi-sitio.com"

# Crear diagramas ASCII
npx figlet "8devmx Ninja"

Migración y Transformación de Código

# Convertir JavaScript a TypeScript
npx jscodeshift -t transform.js src/

# Migrar de Webpack a Vite
npx webpack-to-vite

---

⚠️ Consideraciones de Seguridad

Riesgo: Ejecutar Código de Terceros

Cuando ejecutas npx <paquete>, estás corriendo código descargado de Internet.

Precauciones:

# 1. Verifica el nombre exacto del paquete
npx create-react-app  # ✅ Correcto
npx crate-react-app   # ❌ Typo peligroso (typosquatting)

# 2. Revisa el paquete en npmjs.com antes
# Busca: descargas semanales, último update, issues

# 3. Usa --yes solo si confías 100%
npx --yes cowsay "Hola"  # Salta confirmación

# 4. Para producción, instala localmente en lugar de npx
npm install eslint --save-dev
npx eslint .

Ejemplo de Typosquatting Real

En 2017, atacantes subieron paquetes con nombres similares a populares:

• crossenv (malicioso) vs cross-env (legítimo)
• mongose vs mongoose

Protección:

# npm te pregunta antes de ejecutar si el paquete no existe localmente
Need to install the following packages:
  create-react-app
Ok to proceed? (y)

Lee el nombre con cuidado antes de confirmar.

---

🎯 Reto Ninja del Tema

Misión: Experimentar con npx sin contaminar tu sistema

1. Crea una carpeta de prueba:

   mkdir npx-dojo
   cd npx-dojo

2. Prueba herramientas temporales:

   npx cowsay "Mi primer npx"
   npx figlet "8devmx"
   npx qrcode "https://8devmx.com"

3. Levanta un servidor HTTP:

   echo "<h1>Hola Ninja</h1>" > index.html
   npx http-server -p 8080

4. Inicializa un proyecto de ejemplo:

   npx create-vite@latest test-vite --template vanilla
   cd test-vite
   npm install
   npm run dev

5. Compara con instalación global:

   # Verifica si http-server quedó instalado
   which http-server  # No debería existir
   
   # Ahora instálalo globalmente
   npm install -g http-server
   which http-server  # Ahora sí existe

Criterios de éxito:

• ✅ Ejecutaste 3+ herramientas con npx
• ✅ Entendiste que npx NO las instaló permanentemente
• ✅ Comparaste velocidad de primera ejecución vs global
• ✅ Levantaste un servidor temporal

---

📚 Comandos Esenciales de npx

# Sintaxis básica
npx <paquete>

# Con argumentos
npx <paquete> --opcion valor

# Versión específica
npx <paquete>@version

# Forzar reinstalación (ignora caché)
npx --no <paquete>

# Usar paquete local si existe, sino descarga
npx --prefer-offline <paquete>

# Ejecutar sin confirmación
npx --yes <paquete>

# Ver qué haría sin ejecutar
npx --dry-run <paquete>

---

💡 Jutsu Secreto: Cache de npx

npx SÍ cachea paquetes descargados en:

# Ubicación del caché (varía por OS)
# Linux/Mac: ~/.npm/_npx/
# Windows: %AppData%\npm-cache\_npx\

# Ver espacio usado
npx --version
du -sh ~/.npm/_npx/

# Limpiar caché si crece mucho
npm cache clean --force

Esto hace que la segunda ejecución de npx cowsay sea más rápida.

---

⚠️ Errores Comunes

Error #1: Comando no encontrado

npx: command not found

Causa: npm versión antigua (<5.2)

Solución:

npm install -g npm@latest

Error #2: Versión incorrecta ejecutada

# Esperas versión X pero se ejecuta Y
npx typescript --version
# 4.5.0 (pero querías 5.0.0)

Solución:

# Especifica versión explícitamente
npx typescript@5.0.0 --version

Error #3: Falla en descarga

npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo

Causa: Sin conexión a Internet o proxy mal configurado

Solución:

# Verificar conexión
ping registry.npmjs.org

# Si estás tras proxy, configúralo
npm config set proxy http://proxy.empresa.com:8080

---

📚 Recursos Adicionales

• npx Documentation
• npm Blog: Introducing npx
• Awesome npx - Lista de paquetes útiles

---

Siguiente Pergamino: 4.4 Composer: El Invocador de PHP

¿Probaste npx? Comparte tu herramienta favorita en Discord con #npxNinja! ⚡🥷