npx Tutorial de introducción

Si estás empezando a aprender JavaScript o Node.js, es muy probable que ya hayas usadonpmpara instalar varias herramientas y librerías. A veces, quizás solo queremos ejecutar rápidamente una herramienta para ver su efecto, sin querer instalarla globalmente.

Además, hay otra situación: diferentes proyectos necesitan diferentes versiones de herramientas de línea de comandos, y la instalación global siempre causa conflictos.

npxEs una poderosa herramienta creada para resolver estos problemas.

npxEs una herramienta de línea de comandos introducida en npm versión 5.2.0, que te permite ejecutar paquetes npm sin necesidad de instalarlos globalmente.

En pocas palabras,npx es una herramienta conveniente para ejecutar paquetes de Node.js, su filosofía de diseño principal es:Uso temporal sin instalación permanente。

Una metáfora vívida

Imagina la caja de herramientas de tu casa:

• npmes como tuadministrador del almacén de herramientas. Cuandonpm install -g some-tooles como decirle al administrador: compra esta herramienta y guárdala para siempre en el garaje de nuestra casa (entorno global).
• npxes como unservicio de recados inmediato. Cuandonpx some-tooles como decirle al mensajero: ve a buscarme unsome-toolpara usarlo un momento; cuando termines, devuélvelo, no lo dejes en mi casa.

Connpx, puedes ejecutar cualquier paquete del registro npm sin tener que instalarlo primero en tu computadora.

Puntos débiles tradicionales	La solución de npx
Instalación global obligatoria	Ejecución directa
Conflictos de versiones	Usar una versión específica cada vez
Contaminación del entorno	Se puede limpiar después de usar
Comandos locales difíciles de encontrar	Localización automática

---

¿Por qué usar npx?

1. Resolver la contaminación de paquetes globales y los conflictos de versiones

EnnpxAntes de que apareciera, si querías usar en la línea de comandos algo comocreate-react-app、vue-cliesta herramienta de andamiaje, tenías que instalarla globalmente primero:npm install -g create-react-app。

Esto trae dos problemas:

• Contamina el entorno global: los paquetes instalados ocupan espacio en tu disco durante mucho tiempo, incluso si no los usas.
• Conflictos de versiones: si estás desarrollando dos proyectos, uno necesitacreate-react-app@3, el otro necesitacreate-react-app@5, la instalación global solo puede conservar una versión, lo que hará que uno de los proyectos no funcione correctamente.

npxTe permite especificar la versión directamente para ejecutarla, y al terminar te vas, evitando perfectamente estos problemas.

2. Ejecutar fácilmente paquetes instalados localmente en el proyecto

En el directorio del proyecto, los paquetes que instalas mediantenpm install some-cli-tool(aparecerán en el directorionode_modules/.bin/), normalmente solo se pueden invocar mediante rutas complejas o scripts de npm. Peronpxpuede usar inteligentemente primero la versión local del proyecto actual, lo que hace que la invocación sea muy simple.

3. Probar nuevas herramientas de forma segura y conveniente

¿Quieres probar una herramienta de línea de comandos recién publicada? Simplemente usanpx new-cool-tool¡Pruébala! Si no es adecuada, no dejará ningún rastro en tu computadora.

---

Cómo funciona npx

Cuando ejecutasnpx <command>, buscará y ejecutará el comando siguiendo la siguiente lógica:

Este proceso es completamente transparente para el usuario; solo tienes que disfrutar de la conveniencia que ofrece.

---

¿Cómo usar npx?

Preparación del entorno

Asegúrate de que tu versión de Node.js sea >= 5.2.0. Puedes verificarlo con el siguiente comando:

node --version
npm --version
# 如果 npm 版本 >= 5.2.0，npx 就已经可用了
npx --version

Sintaxis básica

npx [选项] <命令>[@版本] [命令的参数...]

Descripción de opciones y parámetros comunes

Opción	Nombre completo	Descripción
--no-install		Obliga a npx a usar solo paquetes que ya existen localmente; si no hay ninguno local, muestra un error y no descarga.
--ignore-existing		Ignora los paquetes que ya existen localmente y descarga a la fuerza la versión más reciente del remoto.
-p, --package <包名>		Especifica el paquete a instalar. Esto es muy útil cuando necesitas usar varios paquetes al mismo tiempo.
-c <命令字符串>		Cuando se usa-ppara especificar múltiples paquetes, usa-cpara indicarle a npx el comando específico a ejecutar.
--yes		En los casos en que se sabe que se activará una solicitud (como create-react-app preguntando si continuar), responde automáticamente "yes".

---

Ejemplos de aplicación práctica

Veamos a través de algunos ejemplos concretos cómonpxpuede demostrar su valía.

Ejemplo 1: Ejecutar un comando único (el escenario más común)

Quieres usarcowsayesta interesante herramienta para hacer que una vaca hable en la terminal, pero no quieres instalarla.

Paso 1: Ejecutar directamente con npx

npx cowsay hello

Explicación del código：npxComprobará si hay localmentecowsay; si no lo hay, lo descargará automáticamente desde npm y lo limpiará después de ejecutar el comando.

Resultado esperado de la ejecución：

npx cowsay hello

Need to install the following packages:
[email protected]
Ok to proceed? (y) y
 _______
< hello >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Paso 2: Ejecutar con una versión específicaSi quieres usar una versión específica:

npx [email protected] hello1.4.0

Salida:

 ____________
< hello1.4.0 >
 ------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Ejemplo 2: Crear un proyecto con un andamiaje (scaffold)

Tomemos como ejemplo la creación de un proyecto React:

Método tradicional (ya no se recomienda)：

npm install -g create-react-app  # 全局安装
create-react-app my-app          # 使用

Problemas de este método de instalación:

• Instalar un montón de herramientas globalmente
• Versiones desordenadas
• La computadora se vuelve cada vez más pesada

Método moderno (usando npx)：

npx create-react-app my-app

Explicación del código：npxObtendrá temporalmente la versión más reciente decreate-react-app, la usará para crear el esqueleto del proyecto, y al terminar no dejarácreate-react-appen tu entorno global. La próxima vez que crees un proyecto, volverá a obtener la versión más reciente.

Ejemplo 3: Ejecutar herramientas locales del proyecto

Supongamos que en un proyecto instalastewebpackcomo dependencia de desarrollo (npm install webpack --save-dev).

Método de invocación tradicional (muy engorroso)：

# 需要输入冗长的路径
./node_modules/.bin/webpack --version

# 或者在 package.json 中配置 scripts
# "scripts": { "build": "webpack" }
# 然后运行
npm run build

Usar npx (muy sencillo)：

npx webpack --version
# 或直接运行构建
npx webpack

Explicación del código：npxEncontrará inteligentemente primero en el proyectonode_moduleselwebpackpara ejecutarlo.

Ejemplo 4: Ejecutar scripts desde GitHub

npxIncluso puede ejecutar código de un gist de GitHub o de un repositorio.

npx https://gist.github.com/username/abcdefg

Ten en cuenta que ejecutar código desconocido de Internet conlleva riesgos de seguridad; asegúrate de que la fuente sea confiable.

---

Las tres capacidades principales de npx

1. Ejecutar directamente cualquier paquete npm

Formato general:

npx 包名

Ejemplo:

npx cowsay hello

Ejecutará directamente una vaquita de línea de comandos 🐮

2. Ejecutar dependencias locales del proyecto

Muchas herramientas solo se instalan en el proyecto:

npm install vite

Antes tenías que:

./node_modules/.bin/vite

Ahora:

npx vite

Automáticamente encuentra el ejecutable local por ti

3. Ejecutar con la versión más reciente (sin contaminar el sistema)

npx create-next-app@latest my-app

Usar siempre la versión más reciente del andamiaje

Sin necesidad de actualizar herramientas globales

---

Los escenarios más comunes de npx

Crear proyectos

npx create-react-app my-app
npx create-next-app
npx vue-cli create my-vue
npx degit user/repo

Herramientas temporales

npx eslint .
npx prettier --write .
npx serve .

Ejecutar servidores de desarrollo

npx vite
npx nodemon app.js

---

Técnicas avanzadas y precauciones

1. Usar múltiples paquetes combinados

A veces un comando necesita depender de varios paquetes. Por ejemplo, quieres iniciar un servidor HTTP simple en un directorio y, al mismo tiempo, usarbrowser-syncpara lograr la recarga en tiempo real. Aunque no es común,npxpuede hacerlo:

npx -p http-server -p browser-sync -c 'http-server & browser-sync start --proxy "localhost:8080" --files "**/*"'

Explicación del código：

• -pEspecifica los paquetes que se deben preparar.
• -cEspecifica la cadena de comando completa a ejecutar.

2. Precauciones

• Conexión de red: la primera vez que ejecutas un paquete, debe descargarse de la red; la velocidad depende de tu conexión.
• Seguridad：npxSe descargará y ejecutará código automáticamente.Solo ejecuta fuentes y paquetes en los que confíes.。
• Directorio temporalLos paquetes descargados se almacenan en el directorio temporal del sistema operativo y el sistema puede limpiarlos periódicamente.

Otras extensiones