DEV Community

Cover image for The Developer's Guide to Updating npm Packages
Alexandru Năstase
Alexandru Năstase

Posted on • Updated on • Originally published at alexandrunastase.com

The Developer's Guide to Updating npm Packages

#npm #javascript #productivity #tutorial

TLDR: How to upgrade npm packages?

The simplest way is to install npm-check-updates, run npx ncu, followed by npx ncu -u to update the package.json followed by npm install to update packages in package.lock and node_modules.

Vanilla npm approach

npm comes with the tools to upgrade your packages out of the box. When running npm outdated you can get a list of packages that have available updates:

npm outdated result

We can update individual packages by running npm update {package-name}. Let's try it for the last package on the list:

npm update sass
Enter fullscreen mode Exit fullscreen mode

Now if we run npm outdated again we can (as seen in the image below) that the package was indeed updated. One thing to note is that while package.lock was updated package.json remains untouched.

npm outdated after upgrade

Now we could do the same for all the packages and if you have a production-critical application, you probably want to pay close attention to the packages that you upgrade and the implications that an upgrade could have.

Upgrades using npm-check-updates

Another option, that I find slightly more convenient, especially for more low-risk projects is using the npm-check-updates package. To install it simply run:

npm install -g npm-check-updates
Enter fullscreen mode Exit fullscreen mode

After it's installed we can check for updates by running:

npx ncu
Enter fullscreen mode Exit fullscreen mode

Similar to npm outdated this gives us a list of all available updates:

npm-check-updates list of updates

In order to update one single package we can run:

npx ncu -uf sass
Enter fullscreen mode Exit fullscreen mode

followed by:

npm install
Enter fullscreen mode Exit fullscreen mode

Now if we run npx ncu again we see the sass package was updated:

npm-check-updates list after sass update

What is nice about the npm-check-updates package is that we can also update all of the packages if we choose so by running:

npx ncu -u
Enter fullscreen mode Exit fullscreen mode

followed again by

npm install
Enter fullscreen mode Exit fullscreen mode

Now if we run npx ncu again we get:

npm-check-updates list after all updates

Now both package.json and package.lock were updated, so this makes it clearer what version of the packages we have without the need to look into the package.lock file.

Conclusion

If you want to easily upgrade all your packages you can use the npm-check-updates npm package with the commands shown above, otherwise, you can also use npm's built-in commands npm outdated and npm update.

References:

Cross-posted from my blog: The joy of implementing strategy pattern in Symfony

Latest comments (0)

Read next

amankumarsingh01 profile image

React native and the JavaScript bridge.

A -

dillonheadley profile image

HTMZ inspired form subission

Dillon Headley -

developeralamin profile image

Deep Linking for Andriod and Apple in Next.js

Al-Amin Islam -

tapuchandramojumder profile image

Understanding valueOf() and toString() in JavaScript

tapuchandramojumder -