javascript - Difference between npx and npm?

I have just started Learning React and facebook helps in simplifying the initial setup by providing the following ready-made project.
Link to Facebook account on Github: https://github.com/facebook/create-react-app
If I have to install the skeleton project I have to type npx create-react-app my-app in command-line.
I was wondering why does the facebook account in Github have npx create-react-app my-app rather than npm create-react-app my-app?

Answer

NPM - Manages packages but doesn't make life easy executing any.
NPX - A tool for executing Node packages.

NPX comes bundled with NPM version 5.2+

NPM by itself does not simply run any package. it doesn't run any package in a matter of fact. If you want to run a package using NPM, you must specify that package in your package.json file.

When executables are installed via NPM packages, NPM links to them:

1. local installs have "links" created at ./node_modules/.bin/ directory.


2. global installs have "links" created from the global bin/ directory (e.g. /usr/local/bin) on Linux or at %AppData%/npm on Windows.

Documentation you should read

---

One might install a package locally on a certain project:

npm install some-package

Now let's say you want NodeJS to execute that package from the command line:

$ some-package

The above will fail. Only globally installed packages can be executed by typing their name only.

To fix this, and have it run, you must type the local path:

$ ./node_modules/.bin/some-package

You can technically run a locally installed package by editing your packages.json file and adding that package in the scripts section:

{

  "name": "whatever",
  "version": "1.0.0",
  "scripts": {
    "some-package": "some-package"
  }
}

Then run the script using npm run-script (or npm run):

npm run some-package

---

npx will check whether exists in $PATH, or in the local project binaries, and execute it. So, for the above example, if you wish to execute the locally-installed package some-package all you need to do is type:

npx some-package

Another major advantage of npx is the ability to execute a package which wasn't previously installed:

$ npx create-react-app my-app

The above example will generate a react app boilerplate within the path the command had run in, and ensures that you always use the latest version of a generator or build tool without having to upgrade each time you’re about to use it.

---

Related questions:

1. How to use package installed locally in node_modules?


2. NPM: how to source ./node_modules/.bin folder?


3. How do you run a js file using npm scripts?