⭐️ Why Does the Same package.json Install Different node_modules❓You Need to Understand package-lock.json❗️
Tags: npm, webdev, javascript, beginners
Published: 2023-10-17 08:11:15

If you're a JavaScript Developer, you've probably heard of npm (node package manger). It's a tool that helps us quickly include third-party libraries in our project. 

But do you understand two important file: package.json and package-lock.json? Do you really know all the package version you are installing? 


![npm for node package manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8bc7it3xtk26iffk53o.png)

## The Potential Issues With package.json

Inside the package.json, we specify which version of packages to install. However, using special version notation like "^0.2.3" (which installs a version greater than or equal to 0.2.3 but less than 0.3.0) can lead to different node_modules using the same package.json file due to timing differences. 

This increase the risk.


![same code lead to different result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sevxj8w93ct0j07zu6rt.png)

## How package-lock.json File Helps Lock Dependencies

When you make changes to package.json and run npm install, a file called package-lock.json is automatically generated.

Uploading package-lock.json to your source repository ensures other developers that clone your code will install the same package dependencies as you used during development.

This consistency is crucial during the continuous integration (CI) process, as dependencies won't vary due to different environments.

Other purposes of package-lock.json include:

- You can check package-lock.json to understand the previous state of node_modules.
- Make it easier to observe and detect changes when modifying or upgrading package versions.
- Allow npm to skip redundant metadata resolutions for faster package installation.

## Do You Understand package-lock.json?

Do you know what each section represents ? Here are the meanings and examples of common items : 


![example of package-lock.json file -1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wduf2xmmcqsfvurb969j.png)

**name:** The project name of the source repositories, matching the one in package.json.

**version:** The project version of the source repositories, consistent with package.json (you can update version numbers in package.json).

**lockfileVersion:** The format of package-lock.json changes with npm versions. You can determine which npm version created the file using lockfileVersion. 
For npm v5 and v6, it's lockfileVersion: 1; for npm v7 and v8, it's lockfileVersion: 2 (backwards compatible with v1 lockfiles); and for npm v9, it's lockfileVersion: 3 (backwards compatible with npm v7).


![example of package-lock.json file -2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uffl22s8q8ob9fy6jaww.png)

**packages**: This section indicates the relationships between packages and related informations.
- The information for the root project (your source repository) is listed under an empty string key ("").
- Third-party packages are listed under this section based on their relative paths to the project folder.


![example of package-lock.json file -3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kof25hx6hul1yt7nj8j1.png)

**Package descriptors** contain the following information:

- **version:** The versions of these packages.
- **resolved:** The location from which these packages were resolved.
- **integrity:** A string (sha512 or sha1) used to mark the unpacked artifact.
- **bin, license, engines, dependencies, optionalDependencies:** Information that corresponds to the package.json of each package.