Difference Between Npx and Npm

Difference between npx and npm?

Introducing npx: an npm package runner

`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 as 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:

local installs have "links" created at ./node_modules/.bin/ directory.
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

NPM:

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:

npx will check whether <command> 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.

Use-Case Example:

npx command may be helpful in the script section of a package.json file,
when it is unwanted to define a dependency which might not be commonly used or any other reason:

"scripts": {
    "start": "npx gulp@3.9.1",
    "serve": "npx http-server"
}

Call with: npm run serve

Understanding difference between npx and npm

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

Difference between npx create-react-app and create-react-app

npx will download the package create-react-app, run it once, then delete it from your disk. If you already have the package installed via npm install -g create-react-app, you can simply run create-react-app in your terminal.

It is recommended to use npx, because it doesn't clog up your filesystem, and because it will always us a package's latest version.

You can learn more from it on the official documentation.

what is the difference between npm install -g react-native-cli versus using npx react-native init project name?

npx is a npm package runner (x probably stands for eXecute). The typical use is to download and run a package temporarily or for trials.

With npm you install the package on your machine. And global makes it available to all your projects not only the one where you currently work in.

What is difference between pnpm create, pnpx, dlx?

As of v7, pnpm dlx is the same as pnpx. It downloads a package and executes it.

pnpm create is a shorthand for pnpm dlx, when you need to create an app. So, for instance, pnpm create react-app my-app will download the create-react-app package and run it to bootstrap a react app. It is the same as running pnpm dlx create-react-app my-app.

There is also pnpm exec, which doesn't download a package just runs a package that is already in node_modules/.bin

why must use npx to cek version program on npm global?

Try updating your PATH variable with this command:

export PATH=$PATH:/Users/denis/.npm-global/bin

Updating Node/NPM might help too.

difference between `-- and +-- after running npm list

Yep, it just means "the last one at this level". Depending on your locale, npm draws a nice little Unicode box drawing "end hook" thing, or the approximation you were seeing:

/tmp/example > LC_ALL=en_US.UTF-8 npm ls -a
example@ /tmp/example
└─┬ string-width@5.1.2
  ├── eastasianwidth@0.2.0
  ├── emoji-regex@9.2.2
  └─┬ strip-ansi@7.0.1
    └── ansi-regex@6.0.1

/tmp/example > LC_ALL=C npm ls -a
example@ /tmp/example
`-- string-width@5.1.2
  +-- eastasianwidth@0.2.0
  +-- emoji-regex@9.2.2
  `-- strip-ansi@7.0.1
    `-- ansi-regex@6.0.1

If you don't want to change your locale, but do want npm ls to use the better-looking glyphs, you can pass --unicode.

Difference Between Npx and Npm