A Beginner's Guide to NPM Package Manager in 2022

In this tutorial, we will learn everything about NPM, npm scripts & packages, as well as, latest npm packages for developers to become more productive developers.

Since Node.js was created, it has been sweeping the globe. Node.js has been used to build hundreds of thousands of systems, prompting the developer community to claim that JavaScript is eating software.

The popular package manager npm, which allows JavaScript developers to share useful packages, is one of the main reasons for Node's success.

There are millions of packages installed using npm per day, but as a beginner, we often don't know, what is NPM, and how to use it? That's why I'm writing this tutorial.

What is NPM?

Using npm efficiently is a cornerstone of modern online development to increase developer productivity, whether it's solely for Node.js, as a package manager or building tools for the front-end, or as part of processes in other languages and platforms.

For a newbie, really grasping npm as a tool and understanding the underlying principles can be challenging - I spend a lot of time trying to figure out minute nuances that others would consider insignificant or take for granted.

NPM is divided into two parts:

1. Online repository for JavaScript packages.
2. CLI (command-line interface) application to install packages.

How NPM Dependencies are Delivered to Developers?

The npmjs.com fulfillment center employs an army of dedicated servers, which will be assigned as personal assistants to each npmjs.com customer to help with this process.

As a result, dependencies are supplied to JavaScript developers in the following format:

The procedure for publishing a package for your JS friends would be as follows:

That's why NPM delivers the desired packages to JavaScript developers quickly.

Guide to package.json

The package.json file is a manifest of your project that includes information about the packages and applications it depends on, as well as special metadata like as the project's name, description, and author.

The package.json file can be seen as a Passport with all the information about the user. This file is also send with the NPM package to the developer.

When npm init is used to start a JavaScript or Node.js project, package.json is also created with it.

Metadata of Package.json

Whether it's a web application, a Node.js module, or a simple JavaScript library, you'll nearly always discover metadata particular to the project inside a package.json.

Metadata aids in the identification of the project and serves as a starting point for users and contributors seeking information about it.

There are several types of metadata in package.json:

1. name: The name of the package choosed by author.
2. version: Version displays the version of the package you are using. Initially, it is displayed as 1.0.0.
3. description: Description contains the description of the package, written by the author.
4. license: The Project's License is stored on the license data of the package.

If you visit your package.json, you will see all the information about the package, this data is shown as:

{
  "name": "Developer Noon",
  "version": "1.0.0",
  "description": "#1 Programming Tutorials
  "main": "index.js"
  "license": "MIT"
}

How to edit package.json file?

To update your package.json file, you just need to go to the file in your code editor, preferably Visual Studio Code, and change the name, description, version, and license. After that, you can push your package.

dependencies and devDependencies in package.json

The —save and —save-dev flags on the npm install command are used to install dependencies. They're intended for use in both production and development & test environments.

Meanwhile, it's critical to comprehend the possible signs that precede the semantic versions:

• ^: the most recent minor release If the version 1.3.0 is the most recent minor version of the 1 major series, a ^1.0.4 specification might install it.
• ~: the most recent patch release ~1.0.4 specification may install version 1.0.7 if that is the most recent minor version of the 1.0 minor series, just as ^ does for minor releases.

Learning with examples is always a better way to learn. Let's hop on some of the examples of dependencies and devDependencies.

Here is an example of dependencies, that you will find on any Package:

{
  "dependencies": {
    "@actions/core": "^1.2.3",
    "@actions/github": "^2.1.1
}

That's why you will find dependencies on the package.json file.

Now, let's hop on what the devDependencies file looks like in your package:

{
  "devDependencies": {
     "@types/jest": "^25.1.4",
     "@types/node": "^13.9.0",
     "@typescript-eslint/parser": "^2.22.0",
     "@zeit/ncc": "^0.21.1",
     "eslint": "^6.8.0",
     "eslint-plugin-github": "^3.4.1",
     "eslint-plugin-jest": "^23.8.2",
     "jest": "^25.1.0",
     "jest-circus": "^25.1.0",
     "js-yaml": "^3.13.1",
     "prettier": "^1.19.1",
     "ts-jest": "^25.2.1",
     "typescript": "^3.8.3"
     }
}

There is a significant distinction between dependencies and the other common components of a package. The difference between Dependencies and package.json is that they're both objects with multiple key & value pairs.

Every value in both dependencies and devDependencies is the version range that's acceptable to install, and every key is the name of a package.

What is package-lock.json ?

The exact versions of the dependencies used in an npm-based JavaScript project are described in this file. Package-lock.json is an ingredient table, whereas package.json is a generic descriptive label.

Package-lock.json is similar to how we don't usually read the ingredient table of a product.

Developers are not supposed to read package-lock.json file line by line.

The npm install command generates package-lock.json, which is also read by our NPM CLI tool to ensure that build environments for the project are replicated with npm ci.

Introduction to basic NPM commands

There are tons of npm commands that are here to facilitate developers. Some of the most important, mainly npm install, npm ci, and npm audit to be specific:

1. npm install

npm install <package-name> will, by default, install the most recent version of the package with the version sign. In the context of an npm project, npm install will download packages into the project's node modules folder according to package.json specifications, upgrading package versions where possible based on and version matching.

If you want to install a package in the global context that you can use anywhere on your machine, you can use the global flag -g.

Because npm has made installing JavaScript packages so simple, this command is frequently misused.

2. npm ci

So, if npm install —production is best for a production environment, is there a command that is best for my local development and testing environment?

npm ci is the way to go.

Similar to how package-lock.json is generated whenever npm install is called if it doesn't already exist in the project, npm ci uses this file to download the exact version of each individual package that the project depends on.

This is how we ensure that the context of our project remains consistent across machines, whether they are our development laptops or CI build environments like GitHub Actions.

3. npm audit

NPM packages are vulnerable to bad authors with malicious intentions due to the large number of packages that have been published and can be easily installed.

The npm.js organization came up with the idea of npm audit after noticing a problem in the ecosystem. They keep track of security flaws that developers can check their dependencies for with the npm audit command.

npm audit informs developers about vulnerabilities and whether there are any versions with patches to install.

npm fund is one of the most important functions for developers, who publish their own npm package.

How to instantly initialize a npm Project?

You can use the --yes flag on the npm init command to automatically populate all options with the default npm init values if you want to get on with building your project and don't want to spend time answering the prompts from npm init.

You can simply use this command to instantly initialize your npm project:

npm init --yes

How to install modules with npm install?

When you're first getting started with npm, one of the most basic things you should learn is how to install modules from npm.

As you learn more about installing modules, you'll notice some differences, but here's the gist of what you need to know to install a standalone module into the current directory:

npm install <module>

Replace <module> with the name of the module you want to install in the above command.

Conclusion

This guide helps you with getting started with NPM, and some useful commands for beginners to know before getting started.

NPM helps you to take your JavaScript development up a notch, according to npmjs.com. You can look into the documentation for npm to learn more about new npm technologies.

Thanks for Reading! Subscribe to our newsletter.