As a computer, it’s essential to keep your project dependencies up to date. It’s needed to get the latest security fixes, bugs fixes, improvements, and features.
How to know if an NPM package is outdated
Before going further in the update process, you’ll need to figure out if your NPM package is outdated or not.
To know about that, there are two possibilities:
- keep yourself updated about the package news and changelog (ex: read about a React major update)
- use the
npm outdatedcommand in your project root repository
Let’s use the
npm outdated command in the project of your choice. If there are packages to update, the output should look as below:
Package Current Wanted Latest Location Depended by react-i18next 11.15.3 11.15.5 11.15.5 node_modules/react-i18next my-repo tailwindcss 3.0.12 3.0.23 3.0.23 node_modules/tailwindcss my-repo [...]
If you don’t see anything, good news! It means that your project is up to date.
How to update one package with NPM
Now that you know more about which package needs to be updated in your project. Let’s pick one of them and update it.
Based on the list in the previous part, I’ll pick
tailwindcss because I noticed that the current version in my project is 3.0.12, but the wanted is the
To do so, NPM is providing an update command that works as follows:
npm update [package_name].
As an example, in my case, I would do:
npm update tailwindcss
Note: When running the
npm updatecommand, the package will update to the "Wanted" version (ref. output of
npm outdated). This security is here to avoid breaking your code with major releases.
If you want to discover more, here is another article about how to remove a package using NPM.
Update package to the latest version
This part will teach you to update your package to its latest version and major release. It’s a typical case when you need one new feature available in the above version.
Let’s imagine you have an output that looks like this:
Package Current Wanted Latest Location Depended by tailwindcss 2.2.19 2.2.19 3.0.23 node_modules/tailwindcss my-repo [...]
As you can notice, the current version of
2.2.19, but there is a major update
To update the NPM package to the latest version, you must type
npm install tailwindcss@latest.
Note: Doing a major NPM update may break your code due to significant changes in the corresponding library. I recommend you check your package website. They provide an upgrade guide or helpful information to update your code most of the time. For example, TailwindCSS provided an upgrade guide from V2 to V3.
Wrapping up and recommendation
I hope this article helped you to update one package of your project!
One last recommendation for your project health, don’t forget to test your website and/or run your test suite if you have one. It’s essential to check if everything is still working after a package update. 📦🚀
Thanks for reading. Let’s connect!
➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒