What is NPM?

NPM stands for Node Package Manager. It comes pre-installed with Node.js. NPM is used to install Node.js packages to use them in our application. It makes it easier for developers to share and reuse open source code by enabling them to be installed as modules. Modules are JavaScript packages that you can install in your system using NPM. NPM helps to manage packages in your projects as dependencies.

What is NPX?

NPX is an NPM package executor. Initially, NPX was launched in July 2017.

NPX was just an NPM package that could be installed like other NPM packages. Currently, NPX is bundled with NPM when you install the NPM version 5.2.0 or higher.

How does NPM treat Node.js packages?

It sets up modules such that Node.js can locate the packages and manage the dependencies of that application.

When using NPM, there are two ways to install a package into your local computer.

• Locally: When a package is installed locally, it is installed in "./node_modules/.bin/"  of the local project directory.
• Globally: A global package is installed in the user environment path. “/usr/local/bin“ for Linux and “AppData%/npm“ for Windows.

When you install executables using NPM, Node.js links them either from the local or global path. NPM does not execute a package directly.

To use and run an NPM installed package, you should specify the package in the package.json file. The package.json file is created automatically when you initialize your Node.js project with npm init -y (the option -y , automatically answer “yes” to any prompts that npm might print on the command line..)

To execute a locally installed package, it should be specified in the package.json scripts block as shown below.

{
    "name": "Your app",
    "versiuon":  "1.0.0",
    "scripts":  {
            "your-package":  "your-package-name"
     }
}

Then, you can execute the package with:

npm run your-package-name

Alternativaly, you can execute the same package by typing the local path in a command-line tool.

./node_modules/.bin/your-package-name

 Example

Let’s say you have installed Eslint, a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.

npm install eslint

To execute the package binaries, you have to point to the package path.

./node_modules/.bin/eslint --init

You should provide the file name as the argument to execute for the ESlint package.

./node_modules/.bin/eslint yourfile.js

NPX comes in to save a couple of keystrokes to make it easier to execute Node.js modules. It makes it easier to run and interact with executables hosted in the NPM registry and to execute NPM local binaries. It also comes with many added features.

Using NPX

With NPX, you can run and execute packages without having to install them locally or globally.

When running NPM executables with NPX, if a package is installed, NPX will search for the package binaries (either locally or globally) and then run the package.

If the package was not previously installed, NPX will not install the package in your system; instead, it will create a temporary cache that will hold the package binaries. Once the execution is over, NPX will remove the installed cache binaries from the system.

This way, your globals stays clean. This saves disk space and allows you to run a package only when it’s needed. It also gives you the advantage of testing packages without having to install them.

When using NPM, you have to remember to type the path of the package in the command, as explained in the Eslint case.

./node_modules/.bin/eslint yourfile.js

With NPX, you can have your local packages installed and use NPX commands (instead of adding the whole path) to execute the package binaries.

npx eslint yourfile.js

Why NPX over NPM scripts?

• No need to edit the package.json file with node_modules paths.
• You can directly execute the tool from the command line.
• Packages used by npx are not installed globally so you don´t have to care for the pollution for the long term.
• With NPM, if you want to test packages, you have to download the packages and run them inside your project. This comes in handy when upgrading packages to newer versions. With NPX, you can determine if the new version is compatible with your project before deciding whether to update them. 

Example:

 let’s take a Node.js project, for instance where Webpack is installed globally, and the currently installed version is 4.40.3. Webpack is used for bundling project assets. Check out this guide to learn more about configuring Webpack with your project.

When configured, run webpack to get the command results.

Let’s try using NPX and run the webpack at version 5.11.1 to see what the difference would look like on the project. Run npx webpack@5.11.1.

Here, the results show that the new version will help you buddle your project further with a couple of KBs.