What you need to know about package.json

In a previous project, I faced many problems and errors that makes me like 👆. And I needed to know more about "package.json" and I found that:

Package.json is the heart of any node project. It has the metadata of the project, and it is a fundamental part of understanding and working with Node.js, npm, and modern javascript.

So I will talk about it in this article.

The Importance Of Package.json

It determines the packages your project depends on
It determines the versions of the packages your project depends on
It is very useful for team working because it is easy to install the packages that your developer's team works with, to be aligned with them by the "npm install" command

The Basics Properties Of Package.json

name

"name": "project-name"

The "name" property is simply the name of the module that the JSON file is describing and it has some rules like (Maximum length of 214, URL-friendly characters and No uppercase letters)

version

"version": "1.2.3"

The "version" property with the "name" property is the core of your package.json files. it sets like 0.0.0 and You are not required to use SemVer. It is the version of the soft where that package.json is describing. For an unpublished package, this property is not required.

license

 "license": "MIT"

the "license' property limits the use of your software by other developers or organizations. It is an important property but it is often overlooked. There are some complex ways to use it, but the most used is to use the SPDX license identifier.

description

"description": "This Package is created to describe package.json to you"

the "description" property is a string that describes the module package.json is describing. It is used to describe the package in the npm search results.

keywords

"keywords": [
"package.json",
 "adham package",
 "describe package.json"
]

the "keywords" property is an array that has a collection of keywords to describe the package. It Is used (like "description") to describe the package in the npm search results.

main

"main": "Adham.js"

the "main" property is a functional property that defines the entry point to the module. If a user installs a package called "hello" and does "require('hello')" then the main module's exports object will be returned.

repository

"repository": { 
  "type": "git", 
  "url": "https://github.com/adham/adham.git" 
}

the "repository" property is a functional property that Specifies the place where your code lives. It is an object that has "type" and "url". "type" property is the type of version control system it uses, and "url" is publicly available and it is not just url of the repository that can be accessed from, but it is the version control can be accessed from.

Scripts

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  }

the "scripts" property is functional, it is an object that has:

key: This is the script name that will be run in the command line.

value: This is the user-defined command that will run at this point.

If you start a Vue project you will note that 👆. serve is the npm command: npm run serve, it will serve your project depending on this command: "vue-cli-service serve"

dependencies

  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },

the "dependencies" property is an object with a key and value. It has all the packages you use in your project.

key: This is the package you use in your project.

value: This is the version of the package you use in your project.

"^" and "~" are the notations for the version range

devDependencies

  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^8.0.3"
}

the "devDependencies" property is the same as the "dependencies" property, but "dependencies" is the packages your project use in production. "devDependencies" is the packages your project use in development. these packages will be installed if you run "npm install", and to install a specific package run "npm install --save-dev <package>".

Tips to use it well

You can create your package.json by "npm init" command to make sure it's a valid JSON.

You can update your package.json manually in your text editor, but it is not recommended, using "npm install", "npm uninstall" and "npm update" is more recommended to avoid errors, and to keep package.json and node modules in sync.

that is what I discover in my research.

I hope you enjoyed it 😊.

Thanks for reading.

Adham