A quick guide for package.json dependencies management

If you've just studied html, css and basic javascript and are starting with some framework that uses node, like react, you may have some doubts about managing dependencies.

So let's take a look at some useful commands and get rid of the fear of play with package.json!

let's start

First, let's create the package.json file using the following command in the terminal:

npm init -y

With this command, we generate a standard package.json file like this:

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

When working with node, some dependencies are used for development purposes and others will remain until the end. So we will have two fields:

"dependencies": {},
"devDependencies: {}"

Let's start by installing a normal dependency and then we'll pass it on to the development dependencies and understand how to manipulate their versions. Let's use express as example:

npm install express

"dependencies": {
    "express": "^4.17.1"
  }

Let's understand what this symbol and numbers represent:

"dependencies": {
    //          prefix
    "express": "^    4.     17.    1",
    //               major  minor  patch
  }

Patch: normally, when a bug is fixed, the patch value is updated.

Minor: when new features are added but compatibility is not broken, the minor value is updated.

Major: when new features are added and there is a break in compatibility with previous features, the major value is updated.

Prefix: some symbols used by the node to update dependencies using the npm update command, such as ^ or ~.

We can use them to install a dependency like: npm install express@~2.0.0

When we use the "^", we are saying that we only want to keep the "patch" and "minor" up to date.

When we use the "~", we are saying that we only want to keep the "minor" up to date.

Without the prefix we are looking for an exact version.

If we use "-E" like npm install express -E, there will be no prefix and the dependency will never be updated.

Now, what if we want to move express into the "devDependencies: {}"? For that we use the following command:

npm install express --save-dev

And with that our express will be inside "devDependencies: {}":

"devDependencies": {
    "express": "^4.17.1"
  }

To get our express back to production dependencies, we use the following command:

npm install express --save-prod

Finally, we can use npm install express@latest to get the latest version (may not be stable) and npm uninstall express to uninstall the dependency.

To list all our dependencies, we can use npm ls.

But sometimes our projects have a lot of dependencies, so if we just want to see the main ones we've installed, we can use a depth control like:

npm ls --depth=0 and keep increasing.

To check if any dependencies are out of date we can use npm outdated and we will be informed of updates according to the prefixes used.

I hope you have enjoyed!

And if you have any other command tips, leave it in the comments.