Before we can describe what package-json.lock is, we need to get back to the beginning and describe how it is created and who created that file.

What the heck is the package manager?

In modern development, almost anyone has got in touch with the package manager, and current development cannot be imagined without this collection of software tools. The package manager is a programming language tool to create project environments and easily import external dependencies.
There are several package managers, most knows are COMPOSER, YARN, NUGGET, NPM, etc. We are going to focus on NPM.

What is a popular package manager NPM?

npm is the package manager for JavaScript. It is the world’s largest software repository. npm hosts extremely popular packages like jQuery, Bootstrap, React, Angular, etc. One of the slogans on their website https://www.npmjs.com/ is to build amazing things, and I will add completely free and fast. If you haven’t used npm for now, please try it will make your life much easier.

How to use NPM?

npm you can use from the command line, let’s say that you need to install Express module, it can be simply done with the command:

npm install express –save

This is the simples and fastest solution to import your dependencies in the project and not copy them manually, for more detailed NPM commands you can visit

https://docs.npmjs.com/cli-documentation/cli

What the heck is package.json?

package.json defines the required dependencies and their respective versions using semantic versioning. However, semantic versioning can be tricky. This file holds various metadata relevant to the project. It is used to give information to npm that allows it to identify the project as well as handle the project’s dependencies. It can also contain other metadata such as a project description, the version of the project, license information, even configuration data – all of which can be vital to both npm and to the end-users of the package.

What the heck are dependencies in package.json?

Sets a list of npm packages installed as dependencies. When you install a package using npm that package is automatically inserted in this list. But there are some rules that you can use that npm knows what version of the package to use.

You probably have seen the tilde (~) and caret (^) in the package.json. What is the difference between them?

When you do npm install moment –save, It saves the entry in the package.json with the caret (^) prefix.

The tilde (~)

In the simplest terms, the tilde (~) matches the most recent minor version (the middle number). ~1.2.3 will match all 1.2.x versions but will miss 1.3.0.

The caret (^)

The caret (^), on the other hand, is more relaxed. It will update you to the most recent major version (the first number). ^1.2.3 will match any 1.x.x release including 1.3.0 but will hold off on 2.0.0.

Here comes the reason why you are reading this blog, star of the evening “package-lock.json”

Starting from version 5, NPM introduces package-lock.json. It’s a very important improvement for npm: guarantee exact same version of every package.

How to make sure your project built with the same packages in different environments at different times? Let’s say, you may use ^1.2.3 in your package.json, or some of your dependencies are using that way, but how can u ensure each time npm install will pick up the same version in your dev machine and in the build server? package-lock.json will ensure that. npm install will re-generate the lock file, when on the build server or deployment server. One important thing to mention as well is the security improvement that comes with the package-lock file. Since it keeps all the hashes of the packages if someone would tamper with the public npm registry and change the source code of a package without even changing the version of the package itself it would be detected by the package-lock file.

What the heck should I do with package-lock.json?

The simple answer is nothing, it should be part of your source control; you should not update it manually. All dependencies in the file will be updated with the command.

npm update

Just sit back and relax, and let NPM take care of that for you, or maybe you prefer playing Playstation. Either way thanks for reading this simple blog post.

Miomir Dančević
Senior FrontEnd Developer