paint-brush
The Developer's Guide to Updating npm Packagesby@alexandrunastase
284 reads

The Developer's Guide to Updating npm Packages

by Alexandru Nastase
Alexandru Nastase HackerNoon profile picture

Alexandru Nastase

@alexandrunastase

Sr. Software Engineer ∙ Open Source Enthusiast ∙ Lifelong Learner

February 28th, 2023
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

npm comes with the tools to upgrade your packages out of the box. We can update individual packages by running `npm update {package-name}`. 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.
featured image - The Developer's Guide to Updating npm Packages
1x
Read by Dr. One voice-avatar

Listen to this story

Alexandru Nastase HackerNoon profile picture
Alexandru Nastase

Alexandru Nastase

@alexandrunastase

Sr. Software Engineer ∙ Open Source Enthusiast ∙ Lifelong Learner

Learn More
LEARN MORE ABOUT @ALEXANDRUNASTASE'S
EXPERTISE AND PLACE ON THE INTERNET.


The simplest way to update npm packages 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:

image


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.


image


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:

image


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:

image


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:


image


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


Also published here.

L O A D I N G
. . . comments & more!

About Author

Alexandru Nastase HackerNoon profile picture
Alexandru Nastase@alexandrunastase
Sr. Software Engineer ∙ Open Source Enthusiast ∙ Lifelong Learner

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Also published here
Coffee-web
Hashnode
Learnrepo
X REMOVE AD