A short tutorial about how to update one package with NPM.
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.
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.
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.
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.
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. 📦🚀
➡️ I regularly deliver content about web development, personal growth as a developer, and my journey as an aspiring digital nomad and remote software engineer. If you don't want to miss them, I invite you to follow me on Twitter. 🚀