NPM Semantic Versioning Syntax

If you are here to read this post, you must be a JavaScript programmer. If you are, you are welcome and even if you are not, that's okay. There are other articles to interest you on this site. So, moving on, this post is all about today's client-side frameworks, be it react or angular.
If you have used any of these two in your development, you must be aware of npm's packages. We will learn about how the version is maintained for these npm packages. The first term you need to be familiar is Semantic Versioning or SemVer, let's take a look at what it is:

What Is Semantic Versioning?

It is a versioning convention which has become very popular over time and this convention is used for versioning the npm packages. It consists of 3 parts, depicting a version A(major version), B(minor version) and C(patch version)
So version appears like this _._._ or for example 1.0.0

The numbering is increased as per the changes:
Major version: When we have a breaking change or a major upgrade
Minor version: When there are new features but are backward compatible with previous stable versions
Patch version: It is increased only in case of minor bug fixes

It can increase by any means but the parts remain the same. For example, 5.12.3 has major version 5, minor 12 and patch version 3.

How SemVer Is Applicable To NPM Packages?

In case of npm packages, you can either be a publisher which provides the package or you could be a consumer which installs the package into their application. In both cases we need versioning. So while publishing a package onto npm library we use semantic versioning. The version published is then consumed by the consumer.

SemVer actually keeps versioning simple and understandable and it can help in explaining the developers about the changes that have taken place and the possible updates.  

How To Consume NPM Package in React Or Angular?

In our client-side frameworks, you must have seen a file named as package.json which keep a record of all the installed packages for that particular application. Have a look at the below screenshot:

It's a screen grab from package.json file wherein three packages are installed and there is version specified in front of them. These are versions of the published npm packages.

One thing to notice here is that there are few special characters in front of the package version like '~', '^'. These are helpful in installing specific package versions.

When we install an npm package with npm install command, the package.json file updates it with '^' (caret symbol) followed by the latest version if not explicitly specified. The meaning of caret sign appended in front of the version is that it takes the latest minor and patch of the package keeping the major version same.

For ex: if the package in package.json file is ^2.3.0, and the published versions are following

2.3.0

2.3.1

2.3.3

2.4.0

2.4.1

3.0.0

Then 2.4.1 will be picked and installed as caret symbol states that keep major version fixed and pick the latest minor and patch version available. So, in the above case, the latest version was 3.0.0 but latest for major version 2 is 2.4.1, thus it was picked.

Similarly, there's another symbol which is '~' (tilde), the condition for this is it keeps major and minor version fix and pick the latest patch version. So, in the above example for ~2.3.0, version 2.3.3 would be picked.

These symbols are used so that we need not change the version of our packages again and again as we will not be checking the latest version on npm every time we install. So, if we are sure about the publisher, we take the latest version just by mentioning ~ or ^. 

These two are the most commonly used symbols.

npm outdated

There's an npm command by using which you can check the latest version of the installed packages published on npm. Also, it tells you the version on which the package would be automatically upgraded depending on the symbols used in package.json. It shows up the currently installed, wanted and the latest published version of the mentioned packages. Refer below screenshot

So this is it about the versioning of npm packages, if you are familiar with Hindi language we have a small descriptive video about this topic that you can have a look at:

Let us know if you face any problem, we would be happy to help you, do share your feedback in comments. And yes, do check out our JavaScript posts, we have some interesting posts for you.

Happy Learning!!!