Introduction

NPM is an essential tool for JavaScript developers for managing versatile packages in the node.js ecosystem.

While I was learning Tailwind CSS and Node.js, I came across this term "NPM" and this made me pretty curious.

So I decided to dive deep into the concept usage and working of NPM

In this article, we will explore the basic concept of NPM

So, let's dive into it.

What is NPM?

So before we move further let's understand What is NPM.

NPM stands for Node Package Manager. It is the main and default package manager for the JavaScript runtime environment Node.js

Not clear enough?

Let's break it into much simpler words

It is a huge repository containing numerous open-source software that can be used by anyone for free.

Why do we need NPM?

Now the question that arises in our mind is why do we actually need npm?

Let's understand this using an example. Assume that we are building a laptop. Is it possible to build all its components from scratch and then assemble all the components to build a laptop?

No right?

As it will take a lot of time and is also not worth it. Instead, we just take the pre-built components and assemble them to make a laptop which makes the process much easier and faster

NPM helps us in a similar way. It makes writing code easier as we can use pre-built code written by other authors

Other authors write their code for their package and publish it on the NPM registry. We can then use the code by installing it on our machine using NPM CLI(Command Line Interface). All kinds of packages are present in NPM from single-purpose ones to large libraries.

Now to use NPM we need to know how to install NPM on our machines.

Let's look into that

Installing Node.js

Step 1: Go to the website https://nodejs.org/en/download

Select the required version, the OS, and click on download.

Now download it and complete the setup.

Tip: Avoid choosing the latest version as it might contain bugs

Step 2: Run the following commands on your terminal and check if Node.js was installed.

The command node -v and npm -v will return its latest versions.

If it's not working then try restarting your system and it will work.

Now let's look into the process of installing npm packages

Installing NPM Packages

In this step, we will install the required NPM package.

For that first clone any repository and open it in your code editor

Now open the terminal and run the following command

npm init -y

Note: Here -y is used to automatically answer "yes" to all prompts. Thus preventing us from doing it manually.

You will see a package.json file was created.

We will be looking into the usage and details of this file further

In a nutshell, package.json file contains the details about the dependencies and packages to be installed on running the required npm command

On running the command npm install it will create a node_modules folder and install the required packages and dependencies as mentioned in the package.json file inside the node_modules folder

It will also create a package-lock.json file. In the further sections, we will be looking into the details of the package-lock.json file.

We can also use the following command to only install the specified and required packages and their dependencies in the node_modules

After installation, it will automatically get pushed into the package.json file

npm install <package name>

What we have been doing till now is installing local packages but there is also something termed global packages that can be installed and used

Now we will see the difference between local packages and global packages

Local Package v/s Global Package

Let's understand the difference between the local package and the global package.

Local packages: These packages are installed in the directory where we run the npm install <package name> command. These packages are not available for other projects or other directories.

Global packages: These are installed in our system in a specified location and can be used in any directory or any project present in the System.

We can install these global packages using the command

npm install -g <package-name>

And, we are ready to use the installed packages and work with them.

Now, we will be looking into the use and details of the "package.json" file and "package-lock.json" file.

About Package.json File

It is important to know the uses and details of these files. So, let's learn about the package.json file.

Package.json file stores all the data about the project.

It contains :

name -> name of the project
version -> The current version of the project
description -> The description of the project
main -> Specifies the file that is the main entry point of your project
scripts -> This includes the command associated with your project like the command for building, running, or testing the project
dependencies -> This is where all the required packages are listed that are required to run the project. These are installed in your system using npm install
devDependencies -> This contains the modules that are required only during the development not in the production
repository -> Specifies the type of version control we are using and the url of the repository
keywords -> These are the array of strings that contain the keywords of the projects that help people discover the project
author -> The name of the author of the project
license -> the license type of the project

A sample package.json looks like this

About Package-lock.json File

Now when you are installing the packages you may have noticed that it also creates a package-lock.json file.

This file contains the records of actual specific versions of each package and dependencies installed on your local system

This file helps us to install the exact version of the packages and dependencies despite any update in version in between the phase when the file was created and when it was installed locally.

This is the main function that this file performs

Apart from this, It speeds up the installation process -> without the package-lock.json file before installing npm has to request the registry for each package to see if there are new versions available.

With package-lock.json npm knows the exact version to install and thus it speeds up the installation process

These were the basic usage of the package.json file and the package-lock.json file

Conclusion

This was all we needed to know about NPM Packages to have a basic clear understanding.

I hope I made it simple for all.

If you found this blog useful and insightful, share it and comment down your views on it.

Do follow for more such content.

Here's how you can connect with me.

Email - olibhia0712@gmail.com

Socials: Twitter , LinkedIn and GitHub

Thanks for giving it a read !!

All About NPM (Node Package Manager)