Logo

dev-resources.site

for different kinds of informations.

Diferença entre NPM INIT e NPX

Published at
2/21/2024
Categories
npm
npx
frontend
Author
coderanac
Categories
3 categories in total
npm
open
npx
open
frontend
open
Author
9 person written this
coderanac
open
Diferença entre NPM INIT e NPX

Tanto o npm init quanto o npx são usados para gerenciar pacotes do node. A difrença é que com o npm init nós instalamos um pacote, já no npx nós executamos ele. Bem simples.

Meme com dois homens aranhas se encarando como se fossem iguais

Podemos entender melhor usando o exemplo do create-react-app e do http-server.

npm init react-app

O npm init é um inicializador de pacotes. Ele é usado para iniciar um template de projeto. Com ele não é preciso colocar o create como prefixo porque ele já faz isso automáticamente.

Exemplo de código executado  com sucesso de npm init react-app

npx create-react-app

Exemplo de códido executado com sucesso de npx create-react-app

O npx é um executador (node package eXecute). Ele inicia seu trabalho rastreando na sua máquina ou na pasta do projeto por pacotes que correspondam ao que você está tentando executar. Caso ele não encontre ele fará download dessas depêndencias em uma pasta temporária.

Exibindo pasta temporária do npx

npm install http-server

E por último, o npm install faz a instalação do pacote e depois disso você pode usá-lo só chamando o nome do pacote.

Executando código com sucesso de npm install http-server -g

Quando pensamos no npm install é importante nos atentarmos para não termos pacotes globais desatualizados.

Já com o npx o ideal é usar para pacotes que usaremos pontualmente. Fora isso rodem o npm install na pasta do projeto. É para você que quer usar um pacote sem instalar ele.

Executando código de npx http-server

O npm init, como o próprio nome diz, é um inicializador. Se você usar esse comando para um pacote que não é de inicialização você vai receber um erro bem bonito:

Exibe erro ao tentar executar o código npm init http-server

To do list com começar a usar npm init e parar de usar npx para tudo listados

referências: npm-init, npx, npm-install.

npx Article's
30 articles in total
Favicon
Improving Port Management Speed: Why I Created `port-client` to Replace `npx kill-port`
Favicon
How to install react
Favicon
npm vs npx: Choosing the Right Tool for the Job
Favicon
npm vs npx - What's the difference?
Favicon
npmとnpxの違い
Favicon
Package Manager Fight: npm vs pnpm vs npx vs yarn vs bun
Favicon
App::cpx
Favicon
NPM vs NPX: What's the Difference?
Favicon
npm vs npx — What are the Basic Difference?
Favicon
Create an NPX professional card
Favicon
Diferença entre NPM INIT e NPX
Favicon
Demystifying NPM and NPX: A Dive into Package Management
Favicon
npm vs npx: Friends or Enemy?
Favicon
Understanding npm vs npx: A Developer's Guide 📦🚀
Favicon
Understanding NPM and NPX in frontend Development
Favicon
A NodeJS newbie's guide to understanding NPM and NPX
Favicon
Errors when creating strapi app using the command npx create-strapi-app@latest --quickstart
Favicon
Npx, c'est quoi ?
Favicon
You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)
Favicon
What is NPX?
Favicon
Use this NPM script to create your EditorConfig files
Favicon
Creating an npx Command
Favicon
Automatically Remove Unused Node Modules with Python
Favicon
Animated CLI Profile Card
Favicon
Useful Npx Packages for the Developer's Everyday Life
Favicon
Short Video example in 20 Seconds. Get a Github directory quickly by a simple command without installation.
Favicon
My personal business card - What's next?
Favicon
Creating my personal business card
Favicon
When to Use Global NPM Installs? Rarely
Favicon
Useful NPX

Featured ones: