If you are the first time to see npx command, then you may will ask:

What’s an NPX?

The first time I saw the PX command was in Babel’s documentation.

Note: If you do not have a package.json, create one before installing. This will ensure proper interaction with the npx command.

I tried it on my own computer and it was real, so I checked the NPM’s official information and found a command introduced in NPMV5.2.0. This command was introduced to improve the experience of developers using the command-line tools provided in the package.

NPM started with version 5.2 with the addition of the NPX command. It has many uses, and this article covers how to use npx command.

Node.js comes with an NPM module, so you can use the NPX command directly. If it doesn’t work, you can install it manually as the following command.

$ npm install -g npx
How to Use NPX Command?

Why introduce NPX command?

Okay! Let’s take a look at its Merits .

For example, we need to run a parcel command in our development: Parcel Index. HTML, there used to be several ways:

1. Global installation of parcel, but sometimes different versions of different projects, do not allow the use of global package, can only consider the following methods.

2. Using NPM scripts in package. json plus a script

"scripts": {
    "start": "parcel index.html"
}

3. Add Node’s executable directory to PATH

alias npmx=PATH=$(npm bin):$PATH
npmx parcel index.html

4. Specifies the executable command path

./node_modules/.bin/parcel index.html

Now that we have the npx command, we don’t need to think about the above method (actually npx is the encapsulation of method 3) . When we perform the npx parcel index.html will go automatically search in ./node_modules/.bin Directory.

NPX also allows us to execute commands one at a time without having to install them, for example:

npx create-react-app my-cool-new-app

This command temporarily installs the create-react-app package, and when completed, the create-react-app is deleted and does not appear in global. Next time, it will be re-temporarily installed.

The Merits of NPX

  • Avoid global installation.

As we know above, the first thing to do when using scaffolding such as vue-cli, create-react-app is to install these globally.

These packages are downloaded in the default node directory for Global Installation, which not only takes up a lot of space, but also leaves the corresponding versions behind long enough to manually upgrade and reuse them.

With the NPX command, there’s less hassle (great for those that don’t use it very often) .

For example, when you create a new project using create-react-app, you can:

npx create-react-app react-test

Npx downloads the create-react-app to a temporary directory, initializes the project, and then deletes it. And when you execute it again, you’ll still have to download it again and reinitialize the project.

  • Calling local module

In the GATSBY project, for example, if we need to package a build, we need to do it in package. Add commands under scripts in json.

If you do not add it, you can only use. / Node / Gatsby is executed in this way.

Another handy feature of npx is to simply execute npx gatsby build. It will automatically complete the use of the partial installation package in the project.

  • Execute source code on Github

You may want to know how to execute source code on Github?

NPX cnn also execute the source code of the modules on GITHUB.

$ npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32 

$ npx github:piuccio/cowsay hello

Note that the remote code must be a module, in other word, it must contain a package.json and the entry script.