A simple guide to

Upgrading npm modules

In this blog post, we look at how to quickly and easily update npm modules using npm-check-updates

Upgrading npm modules can be a bit of a chore. Particularly because we, as developers, tend to rely on a rather large number of them to run our projects.

And because we then rely on the maintainers of these modules to keep them updated as well, the upgrade chain can be extensive, time-consuming and difficult.

That's why upgrading npm modules manually can be a real chore. However, there is an easier way! Check out npm check updates (or ncu) on npmjs.com. This little package allows you to quickly and easily install upgrades for your npm modules from your terminal in a few short commands.

You can install this module globally with:

npm install -g npm-check-updates

Or you can run it directly using npx with:

npx npm-check-updates

The documentation for the npm package is really good, but I will break down how I like to perform the upgrades.

Start with a branch

We first need to create a branch to use for the upgrades. I would normally go for something like:

chore: upgrade dependencies

Or, with Conventional Commits in mind, something like the following would also suit:

build: upgrade dependencies

Check this branch out locally, and we're ready to go!

What should we update?

The first thing to do is to see which packages require an update. We can do this by running the following in our terminal:

ncu

This will give you a list of all of the packages that require an update. You'll see different colours depending on the upgrade path:

  • Red: major upgrade available
  • Blue: minor upgrade available
  • Green: patch upgrade available

You should see something like:

Begin the upgrade process

From here, there are many ways to perform the updates. I prefer to do them incrementally because it's easier to fix any issues that may arise if we take things a bit at a time.

Ncu has many options for performing upgrades. The way that I would normally do things is by starting with the patch updates; that is, the security and small fixes.

To do this with ncu we'll type the following into our terminal:

ncu -u -t patch

Let's break this down:

  • ncu is the shorthand for npm-check-updates
  • -u means that we want to perform the upgrade, which changes your package.json accordingly
  • -t means that we want to specify the type of upgrade to perform (latest, newest, greatest, minor, patch, semver, etc)
  • patch means we only want to upgrade patch dependencies

Once this has finished and your package.json has been updated, you can now run npm i to install the package changes.

Check your changes

At this point, it's a good idea to check that your project still runs and works as normal, and any tests, linters or anything else you use to check that nothing has broken are run successfully.

I would then commit these changes, as we know they haven't broken anything, and we can move on to the next stage.

Minor and major upgrades

The next step is to upgrade the minor changes. You can probably guess what the command for this is going to be, but here it anyway:

ncu -u -t minor

As before, this will update your package.json with any minor changes, after which you can run npm i to install these changes.

Again, it's worth checking that everything still runs correctly and there are no changes to make to the code before committing this change.

And finally, let's do the major upgrades. This tends to be where problems can occur because a major change presents breaking changes. Often, these are updates that remove support for older versions of Node, or npm, but either way it's always worth checking what has changed before installing major upgrades.

ncu -u -t major

Once again, after this has finished, you'll need to run npm i one final time to install the major upgrades. Again, check everything works and commit these changes too.

Other ways to upgrade

There are other ways to upgrade dependencies, and ncu has some great options to break things down. I'm not going to go through all of them here, as the documentation is great on the package page on npm. However, here are a couple of other options I like to use:

ncu -i

The -i parameter is short-hand for 'interactive' and allows you to pick and choose the packages you want to upgrade rather than upgrading them by type.

I use this when I have a problem with a breaking change, or with a downstream package that has introduced one you can't fix locally. You can use -i to upgrade everything else, but not that breaking package.

For an extra slice of luxury on top of interactive mode, you can add the --format flag along with the 'group' option, which also then separates the output in your terminal by upgrade type (patch, minor and major).

ncu -i --format group

On the same codebase as above, you would get something like:

Conclusion

Ncu is a great way to quickly and easily upgrade your npm packages with a bunch of handy options to make things easier.

Check the documentation on npmjs.com for all the options and features, and hopefully, this guide has helped you upgrade your dependencies a little more easily.

There are other ways to do this and other packages available, but I've found this one the easiest to use and the one with the most features and options.


author

Alex is a Principal Front End Engineer currently working at Choreograph - a WPP company. He has over 15 years of experience in the web development industry.