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-updatesOr 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:
ncuThis 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 patchLet's break this down:
ncuis the shorthand fornpm-check-updates-umeans that we want to perform the upgrade, which changes your package.json accordingly-tmeans that we want to specify the type of upgrade to perform (latest, newest, greatest, minor, patch, semver, etc)patchmeans 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 minorAs 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 majorOnce 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 -iThe -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 groupOn 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.
Alex Hall
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.