What Is Npx? Npx vs Npm - They Are Different!
In this post you will learn about such tool which is called Npx. And actually when a lot of people see how you write in console npx they think that you did a typo and you really wanted to write npm install just like they used to.
But actually Npm and Npx are two different things. What is Npx at all?
Npx is a powerful command which is available starting from npm 5.2
When I write
npm --version
I get 8.1.0. So Npx command was already there available quite some time. So I can write
npx --version
and we also get 8.1.0 but this is a completely different command.
Do we have a problem?
Now the question is "Why do we need Npx at all?".
Just to remind you we have 2 different ways to install packages. We either install packages locally with usage of package.json and requiring them inside our project or we install these packages globally.
Only after global installation we can use them directly inside console
For example let's say that I want to use lint-staged from the terminal. I have 2 different possibilities.
If we install it locally with npm install lint-staged we want use this binary directly from terminal. We must write
./node_modules/lint-staged/bin/lint-staged.js
But nobody want to write something like this this is why all people create a script in package.json.
{
"scripts": {
"lint-staged": "lint-staged"
}
}
Essentially it will call a binary which is installed locally inside node_modules. Now we can simply write
yarn lint-staged
It was the best possible variant because you had a local dependency which is written inside your package.json.
Why global dependency is bad? For different projects you will install different versions of the same module. For example in other project we might have lint-staged of another version. And it might be not compatible between versions.
By installing package globally you will have versions collisions between projects
This is why it was always better to use local version.
NPX for the win
Which brings us to Npx. It allows us to omit full path to the binary file inside node_modules. We can simply write
npx lint-staged
I directly see the output No staged files found from the binary which is a correct output. It happens because we have lint-staged installed locally inside our project. Npx finds this binary inside node_modules and uses it.
Npx is just a sugar to use a binary from node_modules inside terminal without long path
Auto install
But it is not all. If you will run some command which is not installed on your machine. Then you will get a message about installation.
After hitting yes it will be directly installed and executed. Now inside terminal we can use npx prettier and it is directly available because it is already installed.
For example to generate a new React application you can write
npx create-react-app project-name
This command will generate for us a new project. Typically in all frameworks you must install some CLI tools and only then with that tool you can generate your new project. You don't need to do that with npx because here you simply of create-react-app by using this create-react-app generator.
Npx minimizes global packages that you must install on your machine
Delete your nvm
Also previously a lot of developers used tools like nvm or n to switch versions of NodeJS on your machine. For example you have some old project with version 8 or 10 and you need to switch between that project and some newer project because you have another Node version.
You don't need to use NVM for this anymore
You can simply write here
npm node@10 -v
And as you can see we will install this Node on our machine but it will be isolated. In this case here we can write all commands just with npx node@10 and we are sure that we will use correct Node version and not the latest.
Shell scripts
And the last feature that we get from Npx is a possibility to download shell scripts and use them directly in the terminal.
npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32
For example here we call npx with a url to Github. After hitting enter this script will be downloaded and executed.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
