loading...

npm vs npx - which to use when?

bogicevic7 profile image Dragoljub Bogićević Updated on ・2 min read

Let's see what is the difference between these two.

What is npm

npm (Node package manager) is the world's largest software registry. It is installed with Node.js which means that you have to install Node.js to get npm installed on your computer.
npm includes a CLI that can be used to download and install packages.

To start working with npm first we need to create package.json (this file holds various metadata relevant to the project. File is used to give information to npm that allows it to identify the project as well as handle the project's dependencies) file by executing this command:

npm init -y

This command will create package.json file in the current directory with default settings because we used -y flag.

To add packages from npm registry we can run this command:

npm i eslint

The command will add eslint linter to our project (it will create node_modules package and update package.json file with eslint as a dependency) - and basically, this is the main job of npm.

This is how package.json looks like after eslint installation:

{
  "name": "dev.to",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "eslint": "^6.8.0"
  }
}

Ok, so we have dependency included in our package, but how to use it? Well, this is the point where npx can jump in.

What is npx

npx is also a CLI tool whose purpose is to improve the experience of using packages from the npm registry (since npm version 5.2.0 npx is pre-bundled with npm - tnx StefanT123 for pointing this out). With npx it is easy to run any sort of Node.js based executable. Let's see examples:

To execute eslint we have two choices:

./node_module/.bin/eslint --init

Although, all node executable is located in .bin directory running the command above is not so user friendly, instead, we can use npx:

npx eslint --init

Much better!

If for some reason you do not want to use npx, you can install eslint globally:

npm install -g eslint

Now package will be installed in node_modules in user directory on your machine which means that you can run eslint globally in any directory.

Of course, there are a lot of use cases for npm and npx usage, I pointed out just basic ones.

Thank you for reading!

Discussion

pic
Editor guide
Collapse
mishafrenkman profile image
Michael Pomogajko

npx is mainly used to run one-off commands without having to install them.
It then fetches the binary from registry, runs it and deletes it again.
So it’s best used for stuff like npx create-react-app

Collapse
mishafrenkman profile image
Michael Pomogajko

So in your example you don’t have to install eslint in the first place and can directly type npx eslint

Collapse
bogicevic7 profile image
Dragoljub Bogićević Author

As well as github gists - this one is the rather neat functionality...

Collapse
bsorrentino profile image
bsorrentino

In my opinion discussion is not “one vs another” but rather “one with another”

npx extends and complete npm, one of the my preferred feature is npx-run that allowed me to use npm script also whether we have set (for security reasons) —ignore-scripts=true

Collapse
mattwaler profile image
Matt Waler

I use npx for packages like degit, serve, and for bootstrapping projects like next and gatsby. For everything else, I use npm in my repos.

Collapse
bogicevic7 profile image
Dragoljub Bogićević Author

Yeah, it is also good for trying packages, different versions of them...

Collapse
martyonthefly profile image
Sylvain Marty

What is the difference between npx and Yarn? :-)

Collapse
mburszley profile image
Maximilian Burszley

That's not an equal comparison. Npm and Yarn are the comparison and Yarn integrates what npm calls npx into its command without needing to call a different command.

All npx does is add the .bin folder to your path before searching for a command to execute, in essence.

Collapse
stefant123 profile image
StefanT123

Just to note that since npm version 5.2.0 npx is pre-bundled with npm

Collapse
bogicevic7 profile image
Dragoljub Bogićević Author

Tnx for pointing that out, I have added it to the post...