Why package.json? | npm basics

As a JavaScript developer, understanding the basics of package.json is one of the important pieces that makes your development experience better. So, without further adieu let’s dive right into the basics.

Introduction

npm is a package manager for JavaScript with huge listing of reusable code modules and packages. Let’s see what a package manager does:

You have a problem to solve in a project. You address it by writing some code. You start working on another project and face the same problem. So you decide to reuse the code. How would you do that?

Copy and pasting is a not a good way of reusing code as it is neither scalable nor maintainable. Package managers like npm helps in such cases. They let us create/use/version modules that can be reused over and over again.

npm lets us do so much with the help of package.json file.

package.json

This file can contain a lot of meta-data about your project. But mostly it will be used for two things:

  • Managing dependencies of your project
  • Scripts, that helps in generating builds, running tests and other stuff in regards to your project

Creating a package.json file

Run the command npm init and it will ask you some information about your project and will create a basic package.json in that directory.

The initial content of that file would look something like this:

What’s inside a package.json?

Identifier Metadata

These metadata describes the project: what it’s called, what is it’s purpose, version and other things.

A package.json file must have a name and a version property. These two properties uniquely identifies your project in npm repository.

name
The name of the project/module that this package.json file is describing

version
Denotes the current version of your module.

Some other optional meta properties are license, description and keywords.

license
Describes the license of your project. Some common recognised licenses are: MIT, ISC, GPL-3.0

description
Contains a human readable description about the project.

keywords
A collection of keywords that helps identifying the project. These are similar to tags.

Functional Metadata

These properties help in coordinating with npm to perform certain tasks related to execution, build process and other stuff.

main
It describes the entry point to the application. When you run this application, or require it as a module in another application, the file described by this property will be included.

"main": "index.js",

repository
It defines where the source for this application/module is located. Mostly it will be github in case of open source projects. Specify the type of repository it is: git or svn or anything else, followed by the url to the repository.

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

scripts
The scripts properties takes a list of key-value pairs. Each key specifies the name of the tasks the script will perform and the value will contain the command to invoke the task. The scripts can be invoked by npm run <task-name>. Scripts are mostly used for testing, building and defining some of the commands to work with your module/application.

"scripts": {
"build": "node index.js",
"test": "node index.test.js"
}

dependencies
A list of modules that this project depends upon are defined here.

"dependencies": {
"react": "16.2.0",
"react-dom": "16.2.0",
"react-redux": "5.0.7",
"axios": "0.17.1"
}

devDependencies
The modules that assist you in creating a build, testing your code, deploying your code and other development level modules.

"devDependencies": {
"webpack": "4.1.1",
"babel": "v7.0.0-beta.40",
"jest": "22.4.2"
}

The final version of our package.json file looks like this:

Wrap Up

There are many other attributes that you can specify in the package.json file. If you want to read more about those attributes and go more in depth of the package.json file, do take some time out to go through the npm documentation about package.json

I hope this gives you a start to explore the Node.js and it’s packaging ecosystem npm.

Feel free to drop in any feedback or additional piece of information on the topic in the comments below.

Thank you.