npm vs npx - which to use when?

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!

Comments

[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

[Lukas Gaucas]

That's what it means when they say , that "npx let's you avoid versioning " i.e. if central server (in this case public npm registry) is always up to date , npx does upstreaming job for you without worry of versioning with "npm" manually !

[Michael Pomogajko]

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

[Dragoljub Bogićević]

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

[Sylvain Marty]

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

[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.

[Suchitra]

I know this is not a good comparision but I have a doubt in mind that .. in case of "npm" if we don't want to install some dependency locally we generally use "npx".
So, in case of "yarn" package manager what should we use when we don't want to instally some dependency!
Nutshell "yarn" is the alternative of "npm" so, what is alternative of "npx" in terms of "yarn" package manager??

[Mudasir H]

Basically yarn is just an improvement to npm. Yarn consume the same package.json format and can install npm packages.

[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

[Dragoljub Bogićević]

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

[StefanT123]

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

[Dragoljub Bogićević]

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