Understand package-lock.json File

Last updated on: by Digamber
package-lock.json file will be explored in detail here. When you install node packages, the package-lock.json file gets generated automatically. It’s time for us to learn what it is all about.package-lock.json file was introduced in npm 5.

We are going to uncover the mystery surrounding package-lock.json file in this article.

You might be already familiar with the package.json file. It has been around for a long time and quite popular too.

We use this file to keep track of the package versions. Why because you can reproduce it 100% even if packages get updated once in a while.

Well, that was the main problem with the package.json file. This file solves that problem. With the help of Angular app, you will be able to set which versions to be upgraded in package.json.

Let’s take a look at an example:

If you wish to update a patch release, you write like this ~4.0.0. You should not write 4.0.0.

In case if you write ^0.12.0, you are here to update minor patch releases. When you write 4.0.0, you will be going for the exact version.

Node_modules folder is vast in comparison. When you don’t commit to Git, and when you try to recreate the project on a different machine with the help of npm install command, the version that will be installed will be the one where ~ syntax and patch release number are specified. The same rule applies to the minor releases as well.

However, if you specify the exact version number, as in 0.13.0, you will not have to worry about this problem.

It could be the case of another person trying to initialize the project by running npm install command.

In the end, the newly initialized project and the original project are no longer the same. We are all aware of the fact that a bug can be a spoilsport in the version change game we play.

Thanks to the package-lock.json file, the version of each package will be recorded appropriately. Besides that, the appropriate version will be chosen when you try to run npm install.

Well, we can’t claim that it is a new concept. For instance, composer in PHP follows the same rules.

You must commit the package-lock.json file to your Git repository. This will be useful for others as everyone can access it. When you are working on a public project or a project with several team members, you can use Git to control the versions effectively.

Moreover, when you run npm update, the dependencies versions will be stored in the package-lock.json file as well.

An Example

Let’s assume that we run npm install to install a simple react app. This is how the structure of a package-lock.json file will look like:

{
  "name": "react app",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
    },
    "loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
      "requires": {
        "js-tokens": "^3.0.0 || ^4.0.0"
      }
    },
    "object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
    },
    "prop-types": {
      "version": "15.7.2",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
      "requires": {
        "loose-envify": "^1.4.0",
        "object-assign": "^4.1.1",
        "react-is": "^16.8.1"
      }
    },
    "react": {
      "version": "16.8.4",
      "resolved": "https://registry.npmjs.org/react/-/react-16.8.4.tgz",
      "integrity": "sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.2",
        "scheduler": "^0.13.4"
      }
    },
    "react-is": {
      "version": "16.8.4",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz",
      "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA=="
    },
    "scheduler": {
      "version": "0.13.4",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.4.tgz",
      "integrity": "sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1"
      }
    }
  }
}

We have just installed a simple react app project. Also included following dependencies depends on:

  • js-tokens
  • loose-envify
  • object-assign
  • prop-types

As you can see, each of these packages depends on other packages. The requires property will give you an overview. Each one of these come with fields named version and resolved. Here it will give you an idea about the location of the package. Moreover, using the integrity string, you will be able to verify the package as well.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.