Thursday, May 21, 2020

npm package-lock.json

The package-lock.json is a new file introduces in npm v 5.*. The goal of introducing this new file is to resolve issue due to installing different versions of packages.

In the previous post we saw about the semantic versioning for npm and the various wild cards associated with this versioning. We saw that the package.json by default uses the carot (^) wildcard for package versioning, this allows for auto upgrade of the minor and patch versions.

Let us say we have the following entry in our package.json file for react
"react": "^16.8.3"

When someone else gets this project and runs the npm install at a later point in time, they will get the latest available version (minor & patch) of react which could be 16.9.5, this is where the problem starts, each user will have different versions of packages.

This issue does not stop with just the packages mentioned in the package.json file, it also affects the dependent packages. As a result we end up with different combinations of package and dependent package versions for each user.

This version inconsistency might cause the Application works differently for each user and might as well end up in breaking the application in some cases.  The package-lock.json file was introduced to resolve this issue. The package-lock.json file specifies the exact version of the packages and its dependent packages.

Notice that the package-lock.json file is way too bigger than the package.json file, this is because it mentions the version specification for each of the dependent package in the package.json file.

Below is the comparison of the specification for the react package in package.json and package-lock.json files.

package.json
"react": "^16.8.6"

package-lock.json
    "react": {
      "version": "16.8.6",
      "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
      "integrity": "sha512-pC0uMkhLaHm11ixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.2",
        "scheduler": "^0.13.6"
      }
    }


Search Flipkart Products:
Flipkart.com

No comments: