DEV Community

Dragoljub Bogićević
Dragoljub Bogićević

Posted on • Updated on

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!

Top comments (12)

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
 
projektorius96 profile image
Lukas Gaucas • Edited

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 !

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ć

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

Collapse
 
martyonthefly profile image
Sylvain Marty

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

Collapse
 
mburszley profile image
Maximilian Burszley • Edited

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
 
suchitra_13 profile image
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??

Thread Thread
 
mh_jsx profile image
Mudasir H

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

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
 
bogicevic7 profile image
Dragoljub Bogićević • Edited

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

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ć

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