Came across Package.json and Package-lock.json and want to know the difference between them then you are at the right place because in this post we will discuss How package.json and package-lock.json files are different from each other.
What is the difference between Package.json and Package-lock.json?
The basic difference is, the Package.json file is a core of the project which contains all the dependencies or packages that are being used in your project. On the other hand, the Package-lock.json file locks the version, it contains all the dependencies with the exact version that was used to create the project.
Let’s dive into deep to understand more about the topic.
Package.json vs Package-lock.json- what are they?
What is a Package.json file?
Package.json is also known as the heart of any node project. Package.json contains metadata about the project, with script or functional properties, and dependencies of any project with their versions.
Below code is the Package.json file of React Project-
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"parcel": "^2.8.3",
"process": "^0.11.10"
},
"name": "vsdifference.com",
"version": "1.0.0",
"description": "this is first app",
"main": "App.js",
"scripts": {
"test": "jest"
},
"author": "vadifference",
"license": "ISC"
}
This is the Package.json file. It contains different information.
Related: What is the Difference between NPM and Yarn
What does the Package.json file contain?
Package.json file contains metadata about the project, script to run commands, and dependencies of our project.
Metadata:
Metadata about a project means its name, version, and author.
Script: Script is a very useful thing in Package.json. You can make your development environment easy using this by making easy your commands. Script can be used to perform different tasks efficiently.
For example, you are using the command
npx run parcel build index.html.It is the command to build and run a project with Parcel. Then you can go to package.json and add a command in the script tag shown below-
"scripts": {
"start": "parcel index.html"Now to execute the command you just need to type npm run start in your terminal rather than typing the whole command each time. This thing can save a lot of time for anyone.
Dependencies of the project:
Package.json file also contains dependencies of the project.
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"parcel": "^2.8.3",
"process": "^0.11.10"
},
Like this, it contains all the information regarding dependencies with their versions.
Ok, the Package.json file contains so many things then why do we need package-lock.json?
What is the Package-lock.json file?
Package-lock.json file holds the exact version of the dependencies. It locks the version of packages in node modules and all the packages that are being used in the project it tracks the exact version of the dependency.
Package.json file stores only dependencies that we are using while package-lock.json holds the exact version of dependencies.
Package-lock.json file is really helpful to avoid project errors. Suppose you created a project and upload on somewhere or Git maybe. If someone downloads that project and that time maybe a newer version of our dependencies with new features. NPM will automatically install the new versions but sometimes they don’t compatible with the older versions. To avoid these types of errors, package-lock.json is there.
It holds the exact version of dependencies that are used to create projects and avoid production errors.
What does the package-lock.json file contain-
{
"name": "vsdifference",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"parcel": "^2.8.3",
"process": "^0.11.10"
}
},
"node_modules/@babel/code-frame": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
"integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
"dev": true,
"dependencies": {
"@babel/highlight": "^7.18.6"
},
"engines": {
"node": ">=6.9.0"
}
Package-lock.json file tracks a lot of things. All the things are listed below-
Name and packages-
It tracks the project name and all the packages that are used in development. Some packages might have other packages, this file also contains that.
Node modules contain a lot of dependencies, package-lock.json file stores all of them
The version of Packages- As I said, it contains the exact version of all the packages that are used in development. As its name suggests it locks the version.
Integrity- A hash value. As its name suggests it maintains integrity on our side and the production side as well. All the previous versions will be here.
Dependencies: The package might have some dependencies, package-lock.json also contains them as well.
Is the Package-lock.json file needed when we have Package.json?
The answer is yes. Package.json file contains all the Packages with the version number that was available during the creation of the project.
In package. Now we will see
React: “^18.0.2”. The sign “^” means it will automatically update the package once there will be a newer version.
To check the exact version you need the package-lock.json file. NPM will check the exact version of dependencies and will install them accordingly to avoid project break.
Node modules will be installed with the same version at that time. So this is a very important file and you don’t need to edit the package-lock.json. NPM will automatically manage it.
To share code with someone, you can share the package-lock.json file so it will avoid errors so that’s why package-lock.json is so important.
Project when you try to run it without having Package-lock.json file after long time with new version of dependencies-
Key Differences between Package.json vs Package-lock.json
| Package.json | Package-lock.json |
| It holds info like metadata and dependencies list only | It holds all dependencies lists along with an actual version of dependencies. |
| It is a required file | It is automatically generated and also required to run the project without error. |
| It tracks basic info like metadata, author, license, and project description. | It tracks the version of packages, integrity, dev dependencies, and option. |
| It can be created using the npm init command | It will be automatically created whenever there will be a slight change in node modules or the package.json file |
| It holds information roughly | It tracks the exact tree of versions that were used to build the project |
Wrapup
Both Package.json and Package-lock.json files are important. The Package.json file is the heart of the node project which contains metadata along with dependencies. Package-lovk.json is the the saviour of project.
FAQs related to the topic:
Q.1: Do I need package.json and package-lock.json?
Yes, you definitely need them to track your dependencies and their exact version.
Q.2: Is it package.json and package-lock.json the same?
They are not completely the same. They are different. Package.json has metadata, packages, and script while package-lock.json contains integrity, version, dependencies, and much more.
