Aug 3rd, 2018 - written by Kimserey with .
Frontend libraries progress very rapidly. After just one month, a project can see all its packages needing an upgrade. Today we will see how we can figure which packages need to be updated and how to do it.
npm install will install packages which are found in
package.json but aren’t downloaded.
For example, we have a project where we installed
Primeng 6.0.0 with
npm install --save [email protected]. The semantic versioning rule placed in
package.json is as followed:
... some packages,
^ (caret) specifies that minor or patches upgrades are allowed for packages above 1.0.0. For 0.x.x changes, minor changes are considered major therefore only patches upgrades are allowed.
Here are examples of grammar available:
^1.2.3 := >=1.2.3 <2.0.0
~1.2.3 := >=1.2.3 <1.3.0
~1.2 := >=1.2.0 <1.3.0
Official documentation of the versioning can be found on npm site https://docs.npmjs.com/misc/semver.
If we run
npm ls primeng, we will see that
6.0.0 is installed:
[email protected] is out, and following the semantic, our project should be able to support it without breaking change. But running
npm install will only try to install packages that aren’t installed yet therefore will skip
primeng. What we need to do is to run
We can know see that a newer version is available by hovering over the
package.json dependency line in Visual studio code or we can run the following command:
$ npm view primeng version
npm view primeng would show the data of the package and
version allows to show a single property of it.
The version currently installed can be viewed in the
npm install will no longer try to install
show are aliases in NPM.
npm update will download the latest version of the package while honoring the versioning specified in
As we can see now we have installed
6.0.2. And if we look at our
package.json we will see that it has changed to
Now lets step back and downgrade to
5.0.0 by modifying
^5.0.0 and running
We can see that
5.2.7 was installed which make sense since
5.2.7 is the latest allowed for
^5.0.0. Now in this case, we wouldn’t be able to bump the major, therefore we would have to install the new version of
primeng by running:
npm install --save [email protected]
And we would be back to the latest version with the proper semantic rule in
package.json. But the problem with that is that we had to know that a newer version was released. And if we have multiple packages, it can be difficult. For that we can use
npm update will update the
package-lock.json to the latest version downloaded without changing the
update are aliases in NPM.
Finding which packages to upgrade can be difficult. In order to achieve that in a easy way, we can use
We start by installing it globally.
npm install -g npm-check-updates
This will give us access to the
ncu command, next we can move to the root of the repository where the
package.json file is and run
[..................] \ :
tslint ~5.9.0 → ~5.11.0
The following dependency is satisfied by its declared version range, but the installed version is behind. You can install the latest version without modifying your package file by using npm update. If you want to update the dependency in your package file anyway, run ncu -a.
primeng ^6.0.0 → ^6.0.2
Run ncu with -u to upgrade package.json
For example here,
tslint can’t be upgraded as the
~ (tilde) restrain to only patch updates. Therefore the version must be set manually. For
primeng, we can update without changing the
package.json and that is what the message tells us:
The following dependency is satisfied by its declared version range, but the installed version is behind is telling us that the constrain we have is honored and we can install the newest version
6.0.2. We have two choices from here, either upgrade all packages or just upgrade those that have a major change.
To update only the packages considered major we would do the following:
This will update
tslint and install
5.11.0 while it will not change
primeng. To upgrade all packages, we can run the following:
Which should be equivalent to:
$ ncu -u
$ npm install
$ npm update
And we should end up with all latest package.
npm-check-updates is a great tool allowing us to upgrade all packages at once without having to know prior hand what is the current lastest release.
Today we saw how the upgrade of package is managed for NPM. We saw the differences between
npm install and
npm update and saw how we could easily manage upgrades with
ncu -u and
ncu -a commands. Hope you liked this post, see you next time!