How to update npm dependencies
How to update npm dependencies
npm-update
Table of contents
This command will update all the packages listed to the latest version (specified by the tag config), respecting the semver constraints of both your package and its dependencies (if they also require the same package).
It will also install missing packages.
If no package name is specified, all packages in the specified location (global or local) will be updated.
If app ‘s package.json contains:
However, if app ‘s package.json contains:
Caret Dependencies below 1.0.0
If the dependence were on ^0.4.0 :
Suppose your app now also has a dependency on dep2
and dep2 itself depends on this limited range of dep1
Updating Globally-Installed Packages
Operates in «global» mode, so that packages are installed into the prefix folder instead of the current working directory. See folders for more on the differences in behavior.
Causes npm to install the package such that versions of npm prior to 1.4, such as the one included with node 0.8, can install the package. This eliminates all automatic deduping. If used with global-style this option will be preferred.
By default, conflicting peerDependencies deep in the dependency graph will be resolved using the nearest non-peer dependency specification, even if doing so will result in some packages receiving a peer dependency outside the range set in their package’s peerDependencies object.
If set to false, then ignore package-lock.json files when installing. This will also prevent writing package-lock.json if save is true.
Dependency types to omit from the installation tree on disk.
Note that these dependencies are still resolved and added to the package-lock.json or npm-shrinkwrap.json file. They are just not physically installed on disk.
If true, npm does not run scripts specified in package.json files.
When «true» submit audit reports alongside the current npm command to the default registry and all registries configured for scopes. See the documentation for npm audit for details on what is submitted.
Set to false to have it not do this. This can be used to work around the fact that some file systems don’t support symlinks, even on ostensibly Unix systems.
When «true» displays the message at the end of each npm install acknowledging the number of dependencies looking for funding. See npm fund for details.
Enable running a command in the context of the configured workspaces of the current project while filtering by running only the workspaces defined by this configuration option.
Valid values for the workspace config are either:
When set for the npm init command, this may be set to the folder of a workspace which does not yet exist, to create the folder and set it up as a brand new workspace within the project.
This value is not exported to the environment for child processes.
Enable running a command in the context of all the configured workspaces.
This value is not exported to the environment for child processes.
How to Update NPM Dependencies
The Node Package Manager (npm) provides various features to help you install and maintain your project’s dependencies.
Dependencies can become outdated over time due to bug fixes, new features, and other updates. The more project dependencies you have, the harder it is to keep up with these updates.
Outdated packages can pose a threat to security and can have negative effects on performance. Up-to-date packages prevent vulnerabilities. This means that periodic dependency checks and updates are important.
How to Keep Dependencies Up-To-Date
Now, you could go through each individual package in package.json one by one to change the version and run npm install
@latest to get the latest version. But this isn’t going to be the most efficient method.
Imagine if you had 20 or more packages that could use a version bump. Instead, you should develop a workflow to periodically check for new versions before the number of outdated dependencies grows and it becomes increasingly harder to upgrade.
Here’s a workflow that helps me stay on top of updates: first, discover which packages need to be updated and how far behind the versions are. Next, choose to update packages individually or together in a batch. Always test out the updates to ensure breaking changes haven’t occurred.
I prefer to perform major version updates individually. With major updates, you’re likely to encounter breaking changes. It’s much easier to undo or address code changes in relation to one package compared to many.
In this article, I will go over methods to inspect and upgrade dependencies in detail.
How to Use the npm outdated Command
This command will check every installed dependency and compare the current version with the latest version in the npm registry. It is printed out into a table outlining available versions.
It is built into npm so there are no additional packages required to download. npm outdated is a good place to start for an overview of the number of dependency updates required.
With this method, to install updates for every package, you just need to run:
Keep in mind that with npm update it will never update to a major breaking-changes version. It updates the dependencies in package.json and package-lock.json. It will use the «wanted» version.
How to Use npm-check-updates
To get started, install the npm-check-updates package globally:
Then, run ncu to display packages to upgrade. Similar to npm outdated it will not apply any changes.
To upgrade dependencies, you just need to run:
This updates dependencies in only the package.json file and will select the latest version even if it includes a breaking change. With this method, npm install is not run automatically so be sure to run that afterward to update package-lock.json.
How to Use Interactive Mode with npm-check-updates
Interactive mode allows you to select specific packages to update. By default, all packages are selected.
Navigate down through each package and use space to deselect, and enter when you are ready to upgrade all of the selected packages.
Resource: npm-check-updates
There are several ways to elevate the interactive npm-check-updates experience.
This command groups and organizes packages into major, minor and patch releases.
Resource: npm-check-updates
npm-check-updates provides other useful tools such as doctor mode which installs upgrades and runs tests to check for breaking changes.
I highly suggest taking a look at the documentation overall to learn more about all this package has to offer. The project is well-maintained along with a climbing weekly download rate of
294,467 at the time of writing this article.
Summary
Getting in the habit of regularly updating your dependencies will help your apps’ security and performance.
Both npm oudated and npm-check-updates are useful tools to check for packages that could use a version bump.
I suggest trying both of these out to see which provides a better developer experience.
I hope these methods help along the path of updating!
UX Engineer at D2iQ. Excited about CSS, React, JavaScript, TypeScript, Design Systems, UX, and UI Design.
If you read this far, tweet to the author to show them you care. Tweet a thanks
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)
Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.
4 safe steps to update NPM packages [Cheat Sheet]
Have you ever tried to update a npm package and then realized that it breaks all other packages in your Javascript project?
This is a common problem for web developers, luckily there are some easy steps to take before updating a module.
In this blog post, I will show you how to update npm packages without breaking your project by following 4 simple steps:
Step 1: Understand npm package versioning
Versioning is an important part of npm and how to use updates safely when developing web applications.
Most npm packages follow semantic versioning guidelines.
Semantic versioning means that developers should compose a package version of three numbers separated by periods (e.g., «0.12.31»).
MAJOR.MINOR.PATCH versioning format
The first number, called the major version, indicates how significant a release this is in relation to other releases with the same minor and patch levels. Major version number indicates incompatible API changes.
The second number, called the minor version, indicates how much new functionality has been introduced since the last significant release; for instance, if this change was only small fixes or enhancements to existing features and no behavior changes were made then it would result in a higher value. Minor releases are not as risky as major version because they typically introduce new features, but they are not as risky as major updates because no API changes were made.
The third number is called the patch version and it indicates how much bug fixes or enhancements have been introduced since the last minor release; for instance, if this change was only small fixes or enhancements to existing features and no behavior changes were added.
What do the caret (^) and tilde (
In package.json, a version can have a ^ in front (e.g. ^0.12.31 ), meaning the latest minor release may be safely installed.
0.12.31 ) means the latest patch release is safe to install.
package.json
is a file that keeps track of all the packages your app needs to run properly, as well as settings for how it should behave when running on different platforms and environments.
Step 2: Audit installed npm packages
Before you update npm packages, figure out if you have a good reason to.
It is better to stick with the package version that works. That way you will not have a risk of something breaking.
Primary reasons for upgrading npm packages are:
Couple of npm commands that will help you audit your packages before upgrading:
Listing packages at the top level is enough most of the time. Top-level dependencies usually take care of their inner dependencies.
npm audit
npm audit will run a security vulnerability check against your project and report any found issues. It is not perfect, but it helps to find potential problems if you are using npm packages that have security vulnerabilities. It’s not perfect because not all vulnerabilities are reported to npm.
npm outdated
npm outdated will report any out-of-date packages in your project.
It shows current, wanted and latest versions compared to versions specified in package.json file.
Note: npm outdated command only shows the direct dependencies of the root project. But if you want to see other dependencies also, then use «—all.»
Check for breaking changes before you update
Some npm packages will introduce breaking changes, which may cause errors when using the module.
Before making a breaking change, package developers often add «Breaking Changes» messages to the console output. It means that the module will change in future versions and developers need to keep an eye out for it.
To see if there are any breaking changes, you can also look at the «Breaking Changes» section of the package’s readme file.
You can usually find package’s readme file in:
Step 3: Update only one package at time
When updating, we need to be careful to only update packages we want. There is no need to update all of your modules at the same time.
Start by making updates in small batches and test each batch for any issues that might arise. This will allow you to find out how it’s affecting your project, and it will let you isolate any errors.
npm update
Changing the package version in package.json file and running npm install will most likely not do anything because already installed package version satisfies the versioning in the package.json file.
To update a specific npm package, run the following in console:
How to revert npm package updates?
If there are any bugs, you can easily undo the changes with these two commands:
The @version should be the same version that you had installed previously.
Step 4: Test your code after installing new packages
In order to make sure your code still works after updating npm packages, it’s important that you test the functionality before deploying. This is because a package update may cause errors in your application if you are not careful. To avoid these issues, I recommend running all tests on server and client side as well as manually checking for any JavaScript error messages throughout the site.
These 3 simple steps can help you avoid breaking your project by carefully installing new npm packages.
What are some of the other ways that people have broken their projects? Let us know in the comments below, and we’ll write a blog post on them!
Bonus Tip: Clear npm cache
Sometimes npm doesn’t pull the latest version of the package because it has an older version stored in cache. As of npm@5, cache issues should not be happening. But they still do sometimes.
It does not remove any dependencies from package.json, but it may help resolve a dependency issue if there is an outdated version in the cache and you can’t find which one it is by looking through the packages list.
Cheat Sheet: 6 Commands To Help You Update npm Packages
This cheat sheet will make it easy to safely update npm packages in your node application. It includes a list of commands that will help you keep up with the latest updates and avoid breaking changes.
npm-update
Table of contents
This command will update all the packages listed to the latest version (specified by the tag config), respecting the semver constraints of both your package and its dependencies (if they also require the same package).
It will also install missing packages.
If no package name is specified, all packages in the specified location (global or local) will be updated.
If app ‘s package.json contains:
However, if app ‘s package.json contains:
Caret Dependencies below 1.0.0
If the dependence were on ^0.4.0 :
Suppose your app now also has a dependency on dep2
and dep2 itself depends on this limited range of dep1
Updating Globally-Installed Packages
Save installed packages to a package.json file as dependencies.
Operates in «global» mode, so that packages are installed into the prefix folder instead of the current working directory. See folders for more on the differences in behavior.
Causes npm to install the package such that versions of npm prior to 1.4, such as the one included with node 0.8, can install the package. This eliminates all automatic deduping. If used with global-style this option will be preferred.
Dependency types to omit from the installation tree on disk.
Note that these dependencies are still resolved and added to the package-lock.json or npm-shrinkwrap.json file. They are just not physically installed on disk.
By default, conflicting peerDependencies deep in the dependency graph will be resolved using the nearest non-peer dependency specification, even if doing so will result in some packages receiving a peer dependency outside the range set in their package’s peerDependencies object.
If set to false, then ignore package-lock.json files when installing. This will also prevent writing package-lock.json if save is true.
Note that this will generally make installs run slower, and be much noisier, but can be useful for debugging.
If true, npm does not run scripts specified in package.json files.
When «true» submit audit reports alongside the current npm command to the default registry and all registries configured for scopes. See the documentation for npm audit for details on what is submitted.
Set to false to have it not do this. This can be used to work around the fact that some file systems don’t support symlinks, even on ostensibly Unix systems.
When «true» displays the message at the end of each npm install acknowledging the number of dependencies looking for funding. See npm fund for details.
Enable running a command in the context of the configured workspaces of the current project while filtering by running only the workspaces defined by this configuration option.
Valid values for the workspace config are either:
When set for the npm init command, this may be set to the folder of a workspace which does not yet exist, to create the folder and set it up as a brand new workspace within the project.
This value is not exported to the environment for child processes.
Set to true to run the command in the context of all configured workspaces.
Explicitly setting this to false will cause commands like install to ignore workspaces altogether. When not set explicitly:
This value is not exported to the environment for child processes.
Include the workspace root when workspaces are enabled for a command.
When false, specifying individual workspaces via the workspace config, or all workspaces via the workspaces flag, will cause npm to operate only on the specified workspaces, and not on the root project.
This value is not exported to the environment for child processes.
When set file: protocol dependencies that exist outside of the project root will be packed and installed as regular dependencies instead of creating a symlink. This option has no effect on workspaces.
Building SPAs
How can we safely upgrade the npm dependencies in our project? What do the funny ^ and
characters mean in front of the dependency package versions? How can we do a major version upgrade on an npm dependency in our project? We’ll find out in this post.
Version parts
What does the ^ and
Sometimes a version has a
in front of it (e.g.
So, npm install installs the latest safe version of the dependencies?
If the packages have already been installed into the node_modules folder, then npm install won’t update any packages.
npm install will install the latest safe version of the dependencies if they don’t exist in the node_modules folder and, there is no package-lock.json file. However, you may think the latest safe version hasn’t been installed because package.json is unchanged, but if you check the packages in the node_modules folder, the latest safe version will have been installed.
So, how do I safely update all the dependencies?
Firstly, the dependencies that are out of date can be discovered by running the following command:
The dependencies will be listed out:
The wanted version is the latest safe version that can be taken (according to the semantic version and the ^ or
prefix). The latest version is the latest version available in the npm registry.
All the dependencies can be safely updated to the wanted version by using the following command:
As well as updating the packages in the node_modules folder, the package.json and package-lock.json files will be updated.
If we don’t want to update all of the packages, then the package names can be specified at the end of the command:
React is updated in the above example.
Updating all dependencies with major changes
So, how do we upgrade dependencies when there has been a major version change?
Perhaps the safest way is as follows:
Is there a quicker way of just updating all the dependencies, including major version changes? So, like npm update but for major version updates as well?
Yes, there is a tool called npm-check-updates that will do this. Just run the following command:
This will update the dependencies to the latest versions (including major version changes) in the package.json file. If we are happy to go ahead with the upgrades we need to run the following command:
This will then upgrade the packages in the node_modules folder, and the package-lock.json file will be updated as well.