Run npm outdated to check old packages

There are things we might skip while learning web development from scratch.

Knowing the ins and outs of npm while learning HTML, CSS, JavaScript, and a framework is probably not a good idea.

And that's normal.

We should focus on the 20% that produces 80% of the outcome rather than spending time on everything else. If you are not familiar with this concept, check out Pareto's priciple.

However, here is a quick tip that could speed up your work when you need to check and update the npm dependencies in a project... that stuff in package.json.

Here is a quick tip to quickly check and update the npm dependencies in our project... that stuff in package.json.

Check for outdated packages

Here is the tip: run npm outdated from the terminal in your project folder to see if the installed packages are outdated.

npm outdated is a built-in npm command and you don't have to install any additional packages for it.

You'll get something like this:

I run npm outdated on some code that I am using for an Angular tutorial, so the outcome for your project might be very different.

However, let's understand the color-coding because it will be the same disregarding the framework you will use.

npm outdated color coding in simple words

Long story short:

• Red: you should update now.
• Yellow: there is a newer update

Short story long:
Despite the outcome of npm outdated you may want to postpone the update. Often, the choice is not black or white, especially in big and complex apps with other priorities.

Also, the npm documentation is a bit more specific on the colors:

• Red means there's a newer version matching your semver requirements, so you should update now.
• Yellow indicates that there's a newer version above your semver requirements (usually new major, or new 0.x minor) so proceed with caution.

Wait, what's a semver???

Semver stands for semantic versioning.

According to semver.org:
Given a version number MAJOR.MINOR.PATCH, the:

• MAJOR version has incompatible changes,
• MINOR version has new backward-compatible features
• PATCH version includes backward-compatible bug fixes

Quick Example:
Version number: 3.10.3.

If there is a new version available and the first number in the version number is different e.g. 4.10.3 I would expect possible incompatibilities.

If the second or third number in the new version number is different e.g. 3.10.6 I don't expect big problems. If anything, it could be a bug fix.

This is all beautiful and nice however you might be surprised by the number of issues you might encounter "for only a small update" in more complex apps.

Update outdated packages

If you are looking for an easy way, here you go: npm update.

Should you use it? It depends!

Wild approach

Small apps updated frequently can benefit from npm update. You might not get any issues and you are done.

Be aware that npm update doesn't update to MAJOR versions.

Check the tips at the end of the post to see how to update all dependencies, including MAJOR version changes, with a single command.

Stepped approach

If you are working on bigger apps that didn't get updated recently, you may want to be careful.
Let's use a stepped approach starting from:

1. We check the package column and find the first package in red. In my case, it is @types/jasmine.
2. Under the "Current" column, we see that the current version of @types/jasmine is 3.10.3.
3. Under the "Wanted" column we see that the wanted version is 3.10.6.
4. Under the "Latest" column we have 4.0.3.

What do "wanted" and "latest" mean?

• Wanted: the highest version of the package that can be fetched according to what you declared in package.json.
• Latest: the latest version available on the npm’s registry.

Let's have a look at my package.json:

Notice the ~ symbol before the version number of @types/jasmine on line 29:

"@types/jasmine": "~3.10.0",

The tilde (~) symbol indicates that

• if we run an update
• or install the packages (e.g. when you run npm install after you cloned a repository),

npm will look for the latest PATCH version (the third number in the version number e.g. 3.10.6) available in the npm registry and install it.

Basically, the tilde declares that "the max npm can update or install is the third number, e.g. the PATCH version". Npm must ignore any minor or major upgrades, respectively the second and the first number.

We know that the latest version of this package is 4.0.3 but that is a major version upgrade and the tilde specifies that npm will ignore that.

Let's proceed and update only @types/jasmine to the wanted version.
The command to update a single dependency is:

npm update package-name

in my case:

npm update @types/jasmine

the outcome:

and if I run npm outdated again:

we see that the current version of @types/jasmine corresponds to the wanted version. Good.

Let's have another example with the tslib package.
This time, package.json shows:

Line 22 shows:

"tslib": "^2.3.0",

The caret (^) symbol indicates that

• if we run an update
• or install the packages (e.g. when you run npm install after you cloned a repository),

npm will look for the latest MINOR and PATCH version (the second and third numbers in the version number e.g. 2.4.0) available in the npm registry and install it.

Basically, the caret (^) declares that "the max npm can update or install is the second and third number, e.g. the MINOR and PATCH version". Npm must ignore any major upgrades, the first number.

In other words, since the version in package.json is “^2.3.1“, it can update until version “2.x.x“, where x is the highest minor and patch version available.

The Major version number remains the same.

The command to install a new MINOR or MAJOR version of a single dependency is:

npm install package-name

in my case:

npm install tslib

Since the current version of the tslib package is the same as the wanted and the latest, we won't see this package in the list anymore.

The last thing you need to know is that if the version number has no prefix e.g. "zone.js": "0.11.4" it means that you are declaring the specific version number you want and nothing else.

Summary

• npm outdated shows the outdated packages
• npm update update everything
• npm update package-name update a specific package to the latest PATCH version
• npm install package-name update a specific package to the latest version. This could even be the latest MAJOR version
• the tilde (~) declares an update to the latest PATCH
• the caret (^) declares an update to the latest MINOR version or PATCH

Tip 1

You may want to check out a tool called npm-check-updates.

From the documentation on GitHub: "npm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions".

Tip 2

List of npm commands