¿Diferencia entre npx y npm?

517

Acabo de comenzar a aprender React, y Facebook ayuda a simplificar la configuración inicial al proporcionar el siguiente proyecto listo para usar .

Si tengo que instalar el proyecto esqueleto, tengo que escribir npx create-react-app my-appen la línea de comandos.

Me preguntaba ¿por qué Facebook tiene en Github en npx create-react-app my-applugar de npm create-react-app my-app?

Paresh Maniyar
fuente
23
create-react-appEs un generador. npxva a internet y descarga el paquete temporalmente para poder ejecutarlo ( np x ). Lo que obtienes (y quieres) es la salida, que se guarda localmente, donde ejecutaste el comando.
vsync

Respuestas:

644

Presentamos npx: un corredor de paquetes npm

NPM- Gestiona paquetes pero no facilita la vida ejecutando ninguno.
NPX- Una herramienta para ejecutar paquetes Node.

NPXviene incluido con la NPMversión5.2+

NPMpor sí solo no ejecuta ningún paquete. no ejecuta ningún paquete de hecho. Si desea ejecutar un paquete usando NPM, debe especificar ese paquete en su package.jsonarchivo.

Cuando los ejecutables se instalan a través de paquetes NPM, NPM se vincula a ellos:

  1. las instalaciones locales tienen "enlaces" creados en el ./node_modules/.bin/directorio.
  2. las instalaciones globales tienen "enlaces" creados desde el bin/directorio global (por ejemplo /usr/local/bin) en Linux o en %AppData%/npmWindows.

Documentación que deberías leer


NPM:

Uno podría instalar un paquete localmente en un determinado proyecto:

npm install some-package

Ahora supongamos que desea que NodeJS ejecute ese paquete desde la línea de comandos:

$ some-package

Lo anterior fallará . Solo los paquetes instalados globalmente pueden ejecutarse escribiendo su nombre solamente .

Para solucionar esto y ejecutarlo, debe escribir la ruta local:

$ ./node_modules/.bin/some-package

Técnicamente, puede ejecutar un paquete instalado localmente editando su packages.jsonarchivo y agregando ese paquete en la scriptssección:

{
  "name": "whatever",
  "version": "1.0.0",
  "scripts": {
    "some-package": "some-package"
  }
}

Luego ejecute el script usando npm run-script(o npm run):

npm run some-package

NPX:

npxcomprobará si <command>existe $PATHo en los binarios locales del proyecto y lo ejecutará. Entonces, para el ejemplo anterior, si desea ejecutar el paquete instalado localmente, some-packagetodo lo que necesita hacer es escribir:

npx some-package

Otra ventaja importantenpx es la capacidad de ejecutar un paquete que no estaba instalado previamente:

$ npx create-react-app my-app

El ejemplo anterior generará una reactplantilla de aplicación dentro de la ruta en la que se ejecutó el comando, y asegura que siempre use la última versión de un generador o herramienta de compilación sin tener que actualizar cada vez que esté a punto de usarlo.


Preguntas relacionadas:

  1. ¿Cómo usar el paquete instalado localmente en node_modules?
  2. NPM: ¿cómo obtener la carpeta ./node_modules/.bin?
  3. ¿Cómo ejecutas un archivo js usando scripts npm?
vsync
fuente
2
Así que reacciona, no lo uses node.js, ¿verdad? ¿Por qué está disponible a través de 'npm' (el administrador de paquetes de nodos)?
winklerrr
3
Hace algunos años, había Bower para la gestión de paquetes frontend, pero su uso cayó drásticamente a favor de npm. Entre algunas razones, podría usar un solo administrador de paquetes para todo lo relacionado con javascript, y también puede usar resoluciones commonjs para desarrollar proyectos frontend. Puede consultar esta respuesta para obtener más detalles. En cuanto a reaccionar: no, no usa directamente el nodo, ¡aunque también puede usarlo en el nodo! (por ejemplo: representación del lado del servidor)
RecuencoJones
1
@RecuencoJones - Comentaste mi respuesta en lugar de OP
vsync
1
Sí, olvidé mencionar a @winklerrr, estaba abordando su comentario
RecuencoJones
1
Creo que la característica más útil es NPX instalando el paquete cuando aún no se ha instalado. De lo contrario, agregue ./node_modules/.bina su $ PATH y no se necesita NPX.
Ron E
78

npx es un corredor de paquetes npm (x probablemente significa eXecute). El uso típico es descargar y ejecutar un paquete temporalmente o para pruebas.

create-react-app es un paquete npm que se espera que se ejecute solo una vez en el ciclo de vida de un proyecto. Por lo tanto, se prefiere usar npx para instalarlo y ejecutarlo en un solo paso.

Como se menciona en la página de manual https://www.npmjs.com/package/npx , npx puede ejecutar comandos en la RUTA o desde node_modules / .bin de forma predeterminada.

Nota: Con algunas excavaciones, podemos encontrar que create-react-app apunta a un archivo Javascript (posiblemente a /usr/lib/node_modules/create-react-app/index.js en sistemas Linux) que se ejecuta dentro del entorno del nodo . Esta es simplemente una herramienta global que realiza algunas comprobaciones. La configuración real se realiza mediante react-scripts, cuya última versión está instalada en el proyecto. Consulte https://github.com/facebook/create-react-app para obtener más información.

dww
fuente
2
El uso típico es ejecutar la versión ya instalada local o globalmente con la misma frecuencia que descargar y ejecutar un paquete.
69

NPM es un administrador de paquetes, puede instalar paquetes node.js usando NPM

NPX es una herramienta para ejecutar paquetes node.js.

No importa si instaló ese paquete global o localmente. NPX lo instalará y ejecutará temporalmente. NPM también puede ejecutar paquetes si configura un archivo package.json e lo incluye en la sección de secuencia de comandos.

Así que recuerde esto, si desea verificar / ejecutar un paquete de nodos rápidamente sin instalar NPX local o globalmente.

np M - Gerente

np X - Ejecutar - fácil de recordar

cherankrish
fuente
Explicación
Mucho mejor que los largos blogs que pasé.
Mohan Gundlapalli
¿Puedes elaborar un poco sobre el "temporalmente". ¿Quiere decir que los binarios se descartan después de ejecutar el comando, lo que obliga a npx a volver a descargar los binarios cada vez?
Jim Aho
49

NPX:

De https://www.futurehosting.com/blog/npx-makes-life-easier-for-node-developers-plus-node-vulnerability-news/ :

Los desarrolladores web pueden tener docenas de proyectos en sus máquinas de desarrollo, y cada proyecto tiene su propio conjunto particular de dependencias instaladas por npm. Hace unos años, el consejo habitual para manejar aplicaciones CLI como Grunt o Gulp era instalarlas localmente en cada proyecto y también globalmente para que pudieran ejecutarse fácilmente desde la línea de comandos.

Pero la instalación global causó tantos problemas como se resolvió. Los proyectos pueden depender de diferentes versiones de herramientas de línea de comandos, y contaminar el sistema operativo con muchas herramientas CLI específicas de desarrollo tampoco es bueno. Hoy, la mayoría de los desarrolladores prefieren instalar herramientas localmente y dejarlo así.

Las versiones locales de herramientas permiten a los desarrolladores extraer proyectos de GitHub sin preocuparse por las incompatibilidades con las versiones de herramientas instaladas globalmente. NPM solo puede instalar versiones locales y listo. Pero las instalaciones específicas del proyecto no están exentas de problemas: ¿cómo ejecuta la versión correcta de la herramienta sin especificar su ubicación exacta en el proyecto o jugar con alias?

Ese es el problema que resuelve npx. Una nueva herramienta incluida en NPM 5.2, npx es una pequeña utilidad que es lo suficientemente inteligente como para ejecutar la aplicación correcta cuando se llama desde un proyecto.

Si desea ejecutar la versión local de proyecto de mocha, por ejemplo, puede ejecutar npx mocha dentro del proyecto y hará lo que espera.

Un beneficio secundario útil de npx es que instalará automáticamente paquetes npm que aún no están instalados. Entonces, como señala el creador de la herramienta, Kat Marchán, puede ejecutar npx benny-hill sin tener que lidiar con Benny Hill contaminando el medio ambiente global.

Si desea probar npx, actualice a la versión más reciente de npm.

Venkat Ch
fuente
Si está utilizando nvm-windows, es probable que no obtenga npx con npm, ¡pero necesita instalarlo manualmente! npm i -g npx
Neil
1
NPM can just install local versions- incorrecto. npmpuede instalar global y es una práctica común.
vsync
1
Puede encontrar una gran introducción a NPX aquí: medium.com/@maybekatz/… , de Kat Marchán.
Jeff Hu
1
@vsync Creo que esto debería interpretarse como "NPM puede simplemente instalar versiones locales y listo". en lugar de implicar una limitación.
YipYip
37

npx ejecuta un comando de un paquete sin instalarlo explícitamente.

Casos de uso:

  • No desea instalar paquetes ni global ni localmente.
  • No tienes permiso para instalarlo globalmente.
  • Solo quiero probar algunos comandos.

Sintaxis:

npx [options] [-p|--package <package>] <command> [command-arg]...

El paquete es opcional:

npx   -p uglify-js         uglifyjs --output app.min.js app.js common.js
      +----------------+   +--------------------------------------------+
      package (optional)   command, followed by arguments

Por ejemplo:

Start a HTTP Server      : npx http-server
Lint code                : npx eslint ./src
                         # Run uglifyjs command in the package uglify-js
Minify JS                : npx -p uglify-js uglifyjs -o app.min.js app.js common.js
Minify CSS               : npx clean-css-cli -o style.min.css css/bootstrap.css style.css
Minify HTML              : npx html-minifier index-2.html -o index.html --remove-comments --collapse-whitespace
Scan for open ports      : npx evilscan 192.168.1.10 --port=10-9999
Cast video to Chromecast : npx castnow http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4

Más sobre command:

Ninh Pham
fuente
18

Definición simple:

npm - Administrador de paquetes Javascript

npx - Ejecuta binarios de paquetes npm

Yassine Qoraiche
fuente
7

Aquí hay un ejemplo de NPX en acción: npx cowsay hello

Si escribe eso en su terminal bash, verá el resultado. El beneficio de esto es que npx ha instalado temporalmente cowsay. No hay contaminación del paquete ya que cowsay no está instalado permanentemente. Esto es ideal para paquetes únicos en los que desea evitar la contaminación del paquete.

Como se menciona en otras respuestas, npx también es muy útil en los casos en que (con npm) el paquete debe instalarse y luego configurarse antes de ejecutarse. Por ejemplo, en lugar de usar npm para instalar y luego configurar el archivo json.package y luego llamar al comando de ejecución configurado, solo use npx en su lugar. Un ejemplo real: npx create-react-app my-app

Risteard
fuente
3
¿Dónde lo instala y lo elimina una vez que finaliza el comando, o lo almacena en caché durante un período de tiempo prolongado o siempre verifica que tenga la versión más reciente del paquete?
redOctober13
@ redOctober13 hay algo de almacenamiento en caché, pero npx también le pide al registro npm la versión más nueva cada vez, por lo que el almacenamiento en caché no ayuda demasiado con la velocidad. Y se expande y luego limpia las dependencias cada vez.
Simon B.