Diferença entre npx e npm?

517

Acabei de começar a aprender o React, e o Facebook ajuda a simplificar a configuração inicial, fornecendo o seguinte projeto pronto .

Se eu precisar instalar o projeto esqueleto, digite npx create-react-app my-appa linha de comando.

Fiquei me perguntando por que o Facebook no Github tem um npx create-react-app my-apppouco do que npm create-react-app my-app?

Paresh Maniyar
fonte
23
create-react-appé um gerador. npxvai para a internet , baixando o pacote temporariamente para que ele possa ser executado ( np x ). O que você obtém (e deseja) é a saída, que é salva localmente, onde você executou o comando.
vsync

Respostas:

644

Apresentando npx: um executor de pacotes npm

NPM- Gerencia pacotes, mas não facilita a execução de nenhum.
NPX- Uma ferramenta para executar pacotes de nós.

NPXvem junto com a NPMversão5.2+

NPMpor si só não executa simplesmente nenhum pacote. Na verdade, ele não executa nenhum pacote. Se você deseja executar um pacote usando o NPM, deve especificar esse pacote no seu package.jsonarquivo.

Quando os executáveis ​​são instalados via pacotes NPM, o NPM se vincula a eles:

  1. instalações locais têm "links" criados no ./node_modules/.bin/diretório
  2. instalações globais têm "links" criados a partir do bin/diretório global (por exemplo /usr/local/bin) no Linux ou no %AppData%/npmWindows.

Documentação que você deve ler


NPM:

Pode-se instalar um pacote localmente em um determinado projeto:

npm install some-package

Agora, digamos que você queira que o NodeJS execute esse pacote na linha de comando:

$ some-package

O acima irá falhar . Somente pacotes instalados globalmente podem ser executados digitando apenas seu nome .

Para corrigir isso e executá-lo, você deve digitar o caminho local:

$ ./node_modules/.bin/some-package

Tecnicamente, você pode executar um pacote instalado localmente editando seu packages.jsonarquivo e adicionando esse pacote na scriptsseção:

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

Em seguida, execute o script usando npm run-script(ou npm run):

npm run some-package

NPX:

npxirá verificar se <command>existe $PATHou nos binários locais do projeto e executá-lo. Portanto, para o exemplo acima, se você deseja executar o pacote instalado localmente, some-packagebasta digitar:

npx some-package

Outra grande vantagem npxé a capacidade de executar um pacote que não foi instalado anteriormente:

$ npx create-react-app my-app

O exemplo acima gerará um reactclichê de aplicativo no caminho em que o comando foi executado e garante que você sempre use a versão mais recente de um gerador ou ferramenta de compilação sem precisar atualizar sempre que estiver prestes a usá-lo.


Perguntas relacionadas:

  1. Como usar o pacote instalado localmente em node_modules?
  2. NPM: como origem da pasta ./node_modules/.bin?
  3. Como você executa um arquivo js usando scripts npm?
vsync
fonte
2
Então reagir não usa node.js, certo? Por que está disponível através do 'npm' (o gerenciador de pacotes do nó)?
21419
3
Alguns anos atrás, havia o Bower para gerenciamento de pacotes de front-end, mas seu uso caiu drasticamente a favor do npm. Entre alguns motivos, você pode usar um único gerenciador de pacotes para tudo relacionado ao javascript e também pode usar as resoluções commonjs para desenvolver projetos de front-end. Você pode verificar esta resposta para obter mais detalhes. Em relação ao react: não, ele não usa diretamente o nó, embora você também possa usá-lo no nó! (por exemplo: renderização no lado do servidor)
RecuencoJones 04/04
1
@RecuencoJones - Você comentou a minha resposta em vez de OP
vsync
1
Sim, eu esqueci de mencionar @winklerrr, eu estava dirigindo seu comentário
RecuencoJones
1
Eu acho que o recurso mais útil é o NPX instalar o pacote quando ele ainda não foi instalado. Caso contrário, adicione ./node_modules/.binao seu $ PATH e o NPX não será necessário.
Ron E
78

npx é um corredor de pacotes npm (x provavelmente significa eXecute). O uso típico é baixar e executar um pacote temporariamente ou para testes.

create- react -app é um pacote npm que deve ser executado apenas uma vez no ciclo de vida de um projeto. Portanto, é preferível usar o npx para instalá-lo e executá-lo em uma única etapa.

Conforme mencionado na página de manual https://www.npmjs.com/package/npx , o npx pode executar comandos no PATH ou em node_modules / .bin por padrão.

Nota: Com algumas pesquisas, podemos descobrir que create-react-app aponta para um arquivo Javascript (possivelmente para /usr/lib/node_modules/create-react-app/index.js em sistemas Linux) executado no ambiente do nó . Esta é simplesmente uma ferramenta global que faz algumas verificações. A configuração real é feita por react-scripts, cuja versão mais recente está instalada no projeto. Consulte https://github.com/facebook/create-react-app para obter mais informações.

dww
fonte
2
O uso típico é tão frequentemente para executar a versão já instalada local ou globalmente quanto para baixar e executar um pacote.
69

O NPM é um gerenciador de pacotes, você pode instalar os pacotes node.js usando o NPM

O NPX é uma ferramenta para executar pacotes node.js.

Não importa se você instalou esse pacote globalmente ou localmente. O NPX o instalará e executará temporariamente. O NPM também pode executar pacotes se você configurar um arquivo package.json e incluí-lo na seção de scripts.

Portanto, lembre-se disso, se você deseja verificar / executar um pacote de nós rapidamente sem instalar local ou globalmente, use o NPX.

np M - Gerente

np X - Execute - fácil de lembrar

cherankrish
fonte
Breve e claro explicar
Barış Serkan AKIN
Muito melhor do que os longos blogs que eu passei.
Mohan Gundlapalli
Você pode elaborar um pouco sobre o "temporariamente". Você quer dizer que os binários são descartados após a execução do comando, forçando o npx a baixar novamente os binários sempre ?
Jim Aho
49

NPX:

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

Os desenvolvedores da Web podem ter dezenas de projetos em suas máquinas de desenvolvimento, e cada projeto possui seu próprio conjunto específico de dependências instaladas pelo npm. Alguns anos atrás, o conselho usual para lidar com aplicativos CLI como Grunt ou Gulp era instalá-los localmente em cada projeto e também globalmente, para que pudessem ser executados facilmente na linha de comando.

Mas a instalação global causou tantos problemas quanto resolveu. Os projetos podem depender de versões diferentes das ferramentas de linha de comando, e poluir o sistema operacional com muitas ferramentas CLI específicas do desenvolvimento também não é bom. Hoje, a maioria dos desenvolvedores prefere instalar ferramentas localmente e deixar por isso mesmo.

As versões locais de ferramentas permitem que os desenvolvedores obtenham projetos do GitHub sem se preocupar com incompatibilidades com versões de ferramentas instaladas globalmente. O NPM pode apenas instalar versões locais e você está pronto para começar. Mas as instalações específicas do projeto não apresentam problemas: como você executa a versão correta da ferramenta sem especificar sua localização exata no projeto ou brincar com aliases?

Esse é o problema que o npx resolve. Uma nova ferramenta incluída no NPM 5.2, npx, é um pequeno utilitário inteligente o suficiente para executar o aplicativo certo quando ele é chamado de dentro de um projeto.

Se você deseja executar a versão local do projeto do mocha, por exemplo, é possível executar o npx mocha dentro do projeto e ele fará o que você espera.

Um benefício colateral útil do npx é que ele instala automaticamente pacotes npm que ainda não estão instalados. Portanto, como aponta o criador da ferramenta Kat Marchán, você pode executar o npx benny-hill sem ter que lidar com Benny Hill poluindo o ambiente global.

Se você quiser dar uma olhada no npx, atualize para a versão mais recente do npm.

Venkat Ch
fonte
Se você estiver usando o nvm-windows, provavelmente não obterá o npx com o npm, mas precisará instalá-lo manualmente! npm i -g npx
Neil
1
NPM can just install local versions- incorreto. npmpode instalar global e é uma prática comum.
Vsync
1
Uma ótima introdução ao NPX pode ser encontrada aqui: medium.com/@maybekatz/… , de Kat Marchán.
Jeff Hu
1
@ vsync Eu acredito que isso deve ser interpretado como "o NPM pode simplesmente instalar versões locais e você está pronto para ir". ao invés de implicar uma limitação.
YipYip
37

npx executa um comando de um pacote sem instalá-lo explicitamente.

Casos de uso:

  • Você não deseja instalar pacotes nem globalmente nem localmente.
  • Você não tem permissão para instalá-lo globalmente.
  • Só quero testar alguns comandos.

Sintaxe:

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

O pacote é opcional:

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

Por exemplo:

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

Mais sobre command:

Ninh Pham
fonte
18

Definição Simples:

npm - gerenciador de pacotes Javascript

npx - Executa binários do pacote npm

Yassine Qoraiche
fonte
7

Aqui está um exemplo de NPX em ação: npx cowsay hello

Se você digitar isso no seu terminal bash, verá o resultado. A vantagem disso é que o npx instalou temporariamente o cowsay. Não há poluição na embalagem, pois o cowsay não está instalado permanentemente. Isso é ótimo para pacotes únicos em que você deseja evitar a poluição dos pacotes.

Como mencionado em outras respostas, o npx também é muito útil nos casos em que (com o npm) o pacote precisa ser instalado e configurado antes da execução. Por exemplo, em vez de usar o npm para instalar e, em seguida, configurar o arquivo json.package e, em seguida, chamar o comando de execução configurado, basta usar o npx. Um exemplo real: npx create-react-app my-app

Risteard
fonte
3
Onde ele o instala e o remove após a conclusão do comando, ou o armazena em cache por algum tempo ou sempre verifica se você possui a versão mais recente do pacote?
redOctober13
@ redOctober13 há algum cache, mas o npx também solicita ao npm Registry a versão mais recente todas as vezes, portanto o cache não ajuda muito com a velocidade. E ele se expande e depois limpa as dependências sempre.
Simon B.