One of the many responsibilities of developers is ensuring the security of the applications and tools we build, there's many ways and methods of doing this but a good starting point is ensuring you have no outdated NPM packages, and if you do ensuring you update them.
Finding outdated packages isn't a long process, there's a nice one liner you can use:
What this command will do is look in your local package.json file and compare the versions you have installed with the newest available versions to see if any are out of date and if so what is the newest version.
Here's an example:
Package Current Wanted Latest eslint 5.16.0 5.16.0 7.0.0
So after running npm outdated this is what is returned to us, as you can see it returns a bit of information:
- Package: This is the name of the package that is outdated.
- Current: This is the current version number of the outdated package.
- Wanted: This is the highest version allowed by the semver range defined in your package.json file.
- Latest: This is the newest version of the package that is tagged inside the npm repository.
You might also notice the colours of the text are either red or yellow for your packages, that means something to:
- Red: If a package is coloured in red it means that there is a newer version available that meets the semver range defined for that package. If you look at the 'Wanted' column you'll see that there is a newer version available and you should update as soon as possible.
- Yellow: If it's in yellow this means that there is a newer version available but it doesn't meet your semver requirements, this normally indicated a new major version of the package. E.g. V5 to V6.Normally these version changes include breaking changes and you should proceed with caution before updating them.
- semver: For the unaware, semver is Semantic Versioning which is the method of versioning your package, software, tool or just about anything. You can read more here.
It's all well and good knowing how to find outdated packages but what would be more helpful is knowing how to update them to either the 'Wanted' or 'Latest' versions.
Updating to the wanted version of a package is simple, you need to do one of two things:
- Delete your 'node_modules' folder and reinstall it will npm install, this will download the newest versions meeting your semver range, simply put it'll download the 'Wanted' version. Or,
- run the npm update command from the terminal to update all your packages to the 'Wanted' version.
At the end of the day it doesn't matter which method you choose, I personally choose to go with the npm update command as it's less involved but the decision is yours.
Now, before getting into this I want to reiterate the warning from earlier.
Upgrading to the latest version could possibly include breaking changes that could break parts or all of your application. Proceed with caution.
With the warning out of the way, let's look at how to upgrade your npm packages to their latest versions.
To upgrade to a new major version of a package, I've found the best way it to use the package npm-check-updates.
You can install this globally by running the command:
npm i -g npm-check-updates
Then you just need to run the package by using the command:
This command will upgrade all of the version hints in the package.json to accept the latest version, essentially it removes the lock on the package keeping it within the same major version.Therefore, allowing you to install the latest version of the package by running the command:
Now you should have all of the latest packages in your project and if you downloaded the project without the node_modules folder make sure to run npm install before running to download all of the said new packages before giving them a test run.
If you have any questions or just want to chat you can find me over on Twitter @MrConerMurphy.