Introduction

In the last article, we started looking at the evolution of web development, and how package managing tools came about. In this article, we would take a look at npm - Node Package Manager, and how it manages packages.

Overview of npm

npm stands for Node Package Manager, it is a registry of tools and 3rd party libraries that we(developers) use to build stuff. npm is first a package manager (a software system) that allows for downloading and updating 3rd party libraries in our products.

It's just like building a robot. Instead of wanting to mine the ore for the arms and make the nuts and bolts yourself, you just buy the parts you need and assemble the robot. That's what npm does for us.

npm packages can range from small packages that help us see dates to larger ones like TailwindCSS which help us style websites.

Using npm

Install NodeJS

Check out to install node on this Guide. You should have Node and npm installed after following the linked guide.

Initialize npm

npm init will allow you to create a package.json file. Now when node sees a package.json file in your project, node knows that this is a node-based project.

Run the command below. This command creates a package.json file that functions as an id card for the details of your project. The updating and managing of packages are done with this file.

npm init -y

The main need for the package.json file is to help in project sharing and management. If you want to clone someone else's project, you don't need to download all the node modules again from scratch and go through versioning and updating. Node will look at the package.json file, check what info is available on it, and then set up your project in the same way as the cloned project.

Install packages

Depending on the project you are building. You can install packages both locally and globally.

To install a package locally, go into the project directory and install a package.

npm install package.

To install a package globally, npm install -g package

 npm install -g package

WTF just happened to my project?

When you ran the command above, a lot of things happened, but let's pick out the important two.

First is that you got the node-module folder which is a download of the node module you are trying to install.

When you install npm, you get other additional stuff like package.json which is used to track all packages in your project as a dependency.

A dependency means that the project is dependent on this package, without it something breaks when your code is live.

If you are worried about why there are other packages in the node-module folder, don't be. The packages you requested for DEPENDS on other packages, so they get installed locally on your device.

Image showing node module folders

Then you got an automatically generated package-lock.json file. The difference between package.json and package-lock.json is that the former is used for defining the details of the module, its characteristics, security, and all that nerdy stuff, think of it like an ID card.

Meanwhile, the latter is used to denote or lock down the exact version of that module used in the project. So even if you download the module again on another system, it will use that exact version specified in the package-lock.json file.

package.json

package-lock.json

Looking up packages

To list all the packages and package dependencies you have installed in your folder. Go into your project folder and run

npm list

Using a module

You could link the module folder in your HTML, if you used hundreds of folders, how hard would it be to upload your products to sites like GitHub? Or rather how many lines of HTML would you have to write? Exhausting right?

To escape this you can simply use the node modules in your javascript. All you have to do is call a require() method and NodeJS would check the package.json and automatically find the module for you, run it with javascript, and make it compatible with the browser. That is it, served on a plate, just how you like it.

The require() method just requires you to assign the require() method to a variable.

const variableName = require(locationOfFile);

Versioning

npm is one massive amazing mumbo jumbo of tools dependent on each other to work but updated and maintained by independent authors. Hence, whenever a package is updated, there is a potential bug in store for you.

You can check the versions of an npm version using

npm view <package> version

npm manages versions through semantic versioning: This denotes major, minor, and patch(bug-fixed) versions.

Semantic versioning is a management system to track and give meaning to your software assets.

5.75.0 means that the package webpack is in major version 5, minor version 75, and patch version 0. A major version upgrade has features that are not compatible with any other version. A minor version upgrade is a sizeable addition or removal of a feature that can work with any other major version. A patch version upgrade is mostly a bug fix.

 "webpack": "^5.75.0"

Package-lock.json helps to mark the exact versions of the packages used in your project so that any other time that project is cloned it will ensure compatibility by downloading the exact packages.

Updating

Since updates break a lot, I say we pay a little more attention to updating packages.

The caret in front of major version 5 tells the project to keep using the major version but install the latest minor and patch versions.
```
   "webpack": "^5.75.0" // What is the caret?
```
So when you want to update a package, it will only download the minor and patch versions.
To run a general update, go into the project folder and run
```
  npm update
```
To override the major version, run
```
  npm install package@2.2.4
```
To install the latest patch version, run
```
  npm install package@~2.2
```

Dependencies and Dev dependencies

First of all Run time is the execution phase of a project, the finished website or app. Production is the building and compilation of your code. Check your package.json file to see which packages are dependencies and dev dependencies.

Dependencies are packages that are part of the project at run time, they could also be used in production too.

DevDependecies, yes you are right, are packages needed during production and not necessary for run time.

"devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }

Conclusion

npm is much more than this, but in this article, we have looked at an overview of the features that make npm able to identify, manage, update, and version node-based packages.

For the next article in this series, we will take a deeper look at how npm modules can interact with the browser using webpack.

Bis bald.

Xylophone