Skip to main content

How to Upgrade Dependencies in Your package.json

Npm (Node Package Manager) is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js.

A project keeps its package dependency list in package.json. For each installed package, a version is assigned. Typically, a version is made up of three parts: major.minor.patch.

  • Major is for the incompatible API changes.
  • Minor is for the backward-compatible functionality.
  • Patch is for the backward-compatible bug fixes.

By default, npm installs the latest version, and prepends a caret, such as “^15.2.0”. The caret dependency suggests that minimally, 15.2.0 should be installed.

When a higher major version exists, it would be used. If the highest major version at the time being is 15.6.2, this particular version, 15.6.2, will be upgraded to.

If you want to be a little conservative, the tilde dependency, “~15.2.0”, would suggest only a higher patch version would be used. Of course, the plain “15.2.0” would guarantee that only the exact version is used. The details of semantic versioning are defined by SemVer.

So far, so good.

The Problem

As time goes on, the dependencies in your package.json have evolved. You may want to upgrade all packages to catch up with new features or fix vulnerabilities. What should you do?

First, you need to identify what the latest versions are. Here is an example on GitHub.

If you have installed Version Lens on Visual Studio Code, it shows the latest versions for all packages.

Alternatively, you can use the npm command-line interface: npm outdated.

  • Current is the currently installed version.
  • Wanted is the maximum version of the package that satisfies the SemVer range specified in package.json.
  • Latest is the version of the package tagged as latest in the registry.
  • Location is where in the dependency tree the package is located.

The package color in the CLI output is an indication regarding the outdated level. Red means there is a newer version matching the SemVer requirements defined in package.json. Yellow means that there is a newer version above the SemVer requirements.

In our example, Lodash is not outdated. Therefore, it is not listed. Meanwhile, Prettieris behind the minor version, and React is behind the major version.

If the dependencies are modified to the following:

The red flags will be flashing for Lodash and Prettier.

The Solution

After identifying the outdated packages, we fix the version specifications in package.json accordingly. Then we can run npm install or npm update to upgrade.

  • npm install installs a package and any packages that it depends on. If the package has a package-lock or shrinkwrap file, the installation of dependencies will be driven by that, with an npm-shrinkwrap.jsontaking precedence if both files exist.
  • npm update updates all the packages listed to the latest specified version. It also installs missing packages.

What are the differences between npm install or npm update?

  • npm install ignores an already-installed module with fuzzy versioning whereas npm update updates it.

Also, devDependencies are handled differently:

  • npm install installs or updates devDependencies unless the --production flag is added.
  • npm update will ignore devDependencies unless the -- dev flag is added.

Is it too conceptual? Let’s see an example. In our case, we change Prettier’s version from “1.18.0” to “~1.18.0”:

If we run npm install, Prettier’s version is fuzzy enough to be kept as the original “1.18.0” in package-lock.json.

You can also view it using npm ls.

However, if we run npm update, Prettier’s version is upgraded to “1.8.2” in package-lock.json.

npm ls output is updated too.

In addition, Prettier’s tilde dependency is changed to a caret dependency!

The Powerful Solution

As we have observed, npm update will not upgrade to the latest major version. It makes sense since major releases frequently introduce breaking changes, and it needs to be handled with caution.

Then, how can we upgrade the major versions?

Using Version Lens’ hints in Visual Studio Code, we can manually upgrade packages to major versions. In addition, there is a powerful tool, npm-check-updates, to do it automatically. The npm tool can be installed globally:

npm install -g npm-check-updates

Then, we run this powerful command: ncu -u.

Now, the dependencies in package.jsonare upgraded to the latest ones, including major versions:

The rest is trivial. Run npm install or npm update to accomplish the upgrade.

Just be careful with npm-check-updates: With great power comes great responsibility.

Comments

Post a Comment

Popular posts from this blog

4 Ways to Communicate Across Browser Tabs in Realtime

1. Local Storage Events You might have already used LocalStorage, which is accessible across Tabs within the same application origin. But do you know that it also supports events? You can use this feature to communicate across Browser Tabs, where other Tabs will receive the event once the storage is updated. For example, let’s say in one Tab, we execute the following JavaScript code. window.localStorage.setItem("loggedIn", "true"); The other Tabs which listen to the event will receive it, as shown below. window.addEventListener('storage', (event) => { if (event.storageArea != localStorage) return; if (event.key === 'loggedIn') { // Do something with event.newValue } }); 2. Broadcast Channel API The Broadcast Channel API allows communication between Tabs, Windows, Frames, Iframes, and  Web Workers . One Tab can create and post to a channel as follows. const channel = new BroadcastChannel('app-data'); channel.postMessage(data); And oth...
Post a Comment
Read more

Certbot SSL configuration in ubuntu

  Introduction Let’s Encrypt is a Certificate Authority (CA) that provides an easy way to obtain and install free  TLS/SSL certificates , thereby enabling encrypted HTTPS on web servers. It simplifies the process by providing a software client, Certbot, that attempts to automate most (if not all) of the required steps. Currently, the entire process of obtaining and installing a certificate is fully automated on both Apache and Nginx. In this tutorial, you will use Certbot to obtain a free SSL certificate for Apache on Ubuntu 18.04 and set up your certificate to renew automatically. This tutorial will use a separate Apache virtual host file instead of the default configuration file.  We recommend  creating new Apache virtual host files for each domain because it helps to avoid common mistakes and maintains the default files as a fallback configuration. Prerequisites To follow this tutorial, you will need: One Ubuntu 18.04 server set up by following this  initial ...
Post a Comment
Read more

Working with Node.js streams

  Introduction Streams are one of the major features that most Node.js applications rely on, especially when handling HTTP requests, reading/writing files, and making socket communications. Streams are very predictable since we can always expect data, error, and end events when using streams. This article will teach Node developers how to use streams to efficiently handle large amounts of data. This is a typical real-world challenge faced by Node developers when they have to deal with a large data source, and it may not be feasible to process this data all at once. This article will cover the following topics: Types of streams When to adopt Node.js streams Batching Composing streams in Node.js Transforming data with transform streams Piping streams Error handling Node.js streams Types of streams The following are four main types of streams in Node.js: Readable streams: The readable stream is responsible for reading data from a source file Writable streams: The writable stream is re...
Post a Comment
Read more