How to update npm dependencies to latest version

The versioning system

Consider React version 16.8.3. Have you ever wondered what are these numbers? Are they some random numbers or do they have any meaning?

NPM uses semantic versioning to version the packages. Here's what the three numbers (from left to right) indicate:

• Major version: The first number indicates a major release, which potentially can include breaking changes.
• Minor version: The second number indicates a minor release, which contains enhancements and does not contain any breaking changes.
• Patch version: The last number indicates a patch release, which is mainly done for fixing bugs.

So if we are migrating to a newer major version, then it can be called as an upgrade and if it involves only a minor or a patch version, we can call it an update.

What are ! and ~

Have you seen packages named as react@^16.8.3, axios@~0.27.2 in package.json? and wanted to know what the symbols ~ and ^ indicate.

• ~ represents that while updating the package, the latest patch version can be safely installed. That is, for axios@~0.27.2, we can safely install v0.27.X.
• ^ represents that while updating the package, the latest minor version can be safely installed, That is, for react@^16.8.3, we can safely install v16.X.X.

Which version does the npm install install?

There are 2 scenarios:

• When the package-lock.json exists: It will install the exact same version mentioned in package-lock.json.
• When the package-lock.json doesn't exist: It will install the latest safe version of the respective package.

Listing outdated packages

To know which all packages are outdated and need to be updated, you can run the following command in your project:

1npm outdated

In the output, Wanted indicates the version to which we can safely update. The latest shows the latest version available in the registry.

Updating packages

If you need to update the packages that can be safely updated, then you can run the following command to update them.

1npm update

If you want to update individual packages then specify their name next to the command:

1npm update react react-dom

Updating the package to the latest available version

To update to the latest version, you can run:

1npm i <package>@latest

Eg: npm i react@latest

If you want to update all the packages to their latest available version in one go, then you can use the package npm-check-updates as follows:

1npx npm-check-updates -u

The above command will update the package.json with the latest versions of the packages.

Now running npm install will update the packages to the latest version

It is always recommended not to upgrade the packages in one go since most probably you might end up breaking the application and will spend a lot of time fixing it. So, always upgrade one package, test the app, then upgrade the next.

Do follow me on twitter where I post developer insights more often!