DEV Community

Cover image for Do you know that there are 7 ways to install an npm package? I bet you don't know all.
Yuvaraj
Yuvaraj

Posted on • Originally published at yuvaraj.hashnode.dev

Do you know that there are 7 ways to install an npm package? I bet you don't know all.

#npm #node #webdev

Hello everyone 👋,

In this article, I'm going to share how to use the npm install CLI command efficiently with different ways of installing a package.

Before going to the CLI command, let us learn what is npm.

What is npm?

npm is the world's largest software registry. Open-source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.

Let's understand these key terms from the definition.

registry - Registry is a large public database of JavaScript software where software developers push their package to it. It is similar to Google Playstore.

packages - Packages are the software that a developer has created and pushed to it. It is similar to an APK to Google Playstore.

Developers - Developers are the one who creates the package, pushes to the registry and pull the other packages from the registry to use it in their application.

The below diagram shows how npm works

download (9).png

Ways to use npm install

To understand it, first, create an empty directory with the name as npm-install-ways.

mkdir npm-install-ways
cd npm-install-ways/
Enter fullscreen mode Exit fullscreen mode

mkdir - helps to create the directory. The second argument is the directory name.

cd - helps to navigate it to the specific directory.

Now, run npm init and press enter continously for all the prompts to have a default value. Finally, a package.json file will be created in the same path.

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (npm-install-ways) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/yuvaraj/Documents/blog article projects/npm-install-ways/package.json:

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)
Enter fullscreen mode Exit fullscreen mode

Open *package.json * file to see the content.

{
  "name": "use-of-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {}
}
Enter fullscreen mode Exit fullscreen mode

If you see in the above output, the dependencies & devDependencies have an empty object. What does that mean?

It tells that, our application is not dependent on any package from the registry. (for now)

1. Installing a package without any argument

Assume that our application needs a jquery package. You can install it with the below command.

npm install jquery
Enter fullscreen mode Exit fullscreen mode

Impacts:

It does few operations.

  1. Pulls the latest jquery package from npm.
  2. Install the jquery package in the node_modules folder.
  3. Adds jquery to the dependencies object in the package.json file.

This is the current package.json content,

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0" // <--- this is added
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Installing a package with --no-save argument

TypeScript becomes so popular by providing features like typings, interface, enums, etc... Now, you thought of trying it out temporarily without adding to the dependencies list in package.json.

In this scenario, you should use the --no-save argument while installing it.

npm install typescript --no-save
Enter fullscreen mode Exit fullscreen mode

Impacts:

It does 2 operations.

  1. Pulls the latest typescript package from npm.
  2. Install the typescript package in the node_modules folder.

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

It skips the 3rd operation from the 1st approach. Let's check if the typescript package is available in node_modules directory.

.
└── node_modules
    ├── jquery
    └── typescript
Enter fullscreen mode Exit fullscreen mode

Yes, it is there. Let's move on to the next one!

3. Installing a package only for the development environment

Do you know that you can install a npm package only for a development environment?

Yes, you can. Let's see it in action.

Assume that, we need to write a unit test case that requires a jasmine package.

Let's install it with the below command.

npm install jasmine --save-dev
Enter fullscreen mode Exit fullscreen mode

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "jasmine": "^3.8.0" <--- Added jasmine here
  }
}
Enter fullscreen mode Exit fullscreen mode

Impacts:

It does few operations.

  1. Pulls the latest jasmine package from npm.
  2. Install the jasmine package in the node_modules folder.
  3. Adds jasmine to the devDependencies object in the package.json file. (Note: It adds to devDependencies, not under dependencies)

So, you might be wondered what is the difference between this approach and the previous approaches.

Suppose, your application size is 10MB including the jasmine package which is 2MB. In the production environment, it is not required to have a jasmine package. So, If you install all application dependencies with npm install --production in the production server, it excludes the jasmine package from your application bundle since it is used only for development purposes.

And, thus it reduces your application build to 8MB from 10MB. Awesome!

4. Installing a specific package version

In our application, our jquery package version is 3.6.0. The latest version seems to have some problems. So, you are feeling to revert it to the older version (maybe 3.5.0) to make it work.

Let's see how to do it.

npm install jquery@3.5.0
Enter fullscreen mode Exit fullscreen mode

npm-install-specific-ver.png

Impacts:

  1. Pulls the specific jquery package version from npm. In this case, it is 3.5.0.
  2. Installs the specific jquery package in the node_modules folder. (It removed 3.6.0 and installed 3.5.0).
  3. Updates thejquery version in the dependencies object in the package.json file.

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.0" <--- changed from 3.6.0 to 3.5.0
  },
  "devDependencies": {
    "jasmine": "^3.8.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

5. Installing a package version in a given range

Let's try one more approach.

These are the few versions of jasmine versions available in npm.

Screenshot 2021-07-16 at 7.00.05 PM.png

Our application has a jasmine package in the 3.8.0 version. This version seems to be buggy and you wanted to go back to the last available version.

So, without knowing the exact version number, you can install those by,

npm install jasmine@"<3.8.0" --save-dev
Enter fullscreen mode Exit fullscreen mode

Impacts:

  1. Pulls the jquery package version which is lesser than 3.8.0 from npm. In this case, it is 3.7.0. (See the above screenshot).
  2. Then, it Installs the jquery package in the node_modules folder. (It removed 3.8.0 and installed 3.7.0).
  3. Updates thejquery version in the devDependencies object in the package.json file.

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.0"
  },
  "devDependencies": {
    "jasmine": "^3.7.0" <--- It updated from 3.8.0 to 3.7.0
  }
}
Enter fullscreen mode Exit fullscreen mode

Similarly, you can install the version by combining the lesser than (<) & greater than(>) symbols.

Example,

npm install jasmine@">3.0.0 <3.5.0" --save-dev
Enter fullscreen mode Exit fullscreen mode

The above command finds the jasmine version, which should be above 3.0.0 and lesser than 3.5.0. In this case, it installs 3.4.0.

6. Install package from tarball URL

You can also install the npm package with the tarball. It can be a local (or) remote file.

Let's install the jquery 3.3.0 version package from the tar file available in Github tags.

npm install https://github.com/jquery/jquery/archive/refs/tags/3.3.0.tar.gz
Enter fullscreen mode Exit fullscreen mode

It does the same operation as #1. Instead of pulling from the npm registry, it is installed from the tarball URL which is available on the jquery Github page.

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "https://github.com/jquery/jquery/archive/refs/tags/3.3.0.tar.gz" <--- Installed from Github Tarball URL
  },
  "devDependencies": {
    "jasmine": "^3.4.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Let's move on to the final approach.

7. Install npm package with a different name

So far, when we install a different version of a package, the existing one is deleted in the node_modules folder & it installs the specified version provided

What if there is a way you can keep both package versions?

In the last approach #6, we have installed jquery version 3.3.0 from Github tags. Let's try to install the jquery version 2 by keeping a customized package name for the jquery version 2.

npm-alias.png

npm install jquery-ver-2@npm:jquery@2
Enter fullscreen mode Exit fullscreen mode

Impacts:

  1. Pulls the jquery ver 2 package version from npm.
  2. Created an alias name for it. In this case, it is jquery-ver-2.
  3. Then, it Installs the jquery package in the node_modules folder. The folder will be jquery-ver-2.
  4. Adds thejquery version 2 in the name of jquery-ver-2 in the dependencies object in the package.json file.

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "https://github.com/jquery/jquery/archive/refs/tags/3.3.0.tar.gz",
    "jquery-ver-2": "npm:jquery@^2.2.4" <--- Jquery 2 is installed as jquery-ver-2.
  },
  "devDependencies": {
    "jasmine": "^3.4.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

I hope you enjoyed this article or found it helpful.

You can connect with me on Twitter & Github 🙂

Support 🙌

You can support me by buying me a coffee with the below link 👇

Buy me a coffee

Top comments (2)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

Oh wow, without reading I'm going to try and guess.

1 using your fingers and a terminal
2 using your toes and a terminal
3 using your nose and a terminal
4 putting you cat on a keyboard, pre writing npm and watching the Magic happen
5 visiting the registry zip
6 using any of the 100s of package managers for js
7 .. I can't think of anything, you win 😅

Collapse
 
davecranwell profile image
Dave Cranwell •

Any reason you've omitted installing a package from a github repo URL?

Read next

martygo profile image

🛑 Stop Create Hooks in React 🪝🎣

Martins Gouveia -

norbs profile image

Microservices vs Monoliths: The Battle of Architectures!

Norbs' Notes -

vakisr profile image

The Bad UI World Cup is hilarious

Vakis Rigas -

tianyaschool profile image

TypeScript's progressive adoption strategy for front-end projects

Tianya School -