Creating development dependencies with npm install -D command

Sometimes, you may see the npm install command paired with -D or --save-dev flag as follows:

npm install --save-dev jest
npm install -D karma

The -d flag will record the npm package you just installed to your project as a development dependency under the devDependencies property in your package.json file:

{
  "devDependencies": {
    "jest": "^27.0.6"
  }
}

The difference between dependencies and devDependencies is that packages listed under dependencies are required for running the project without any error, while packages registered as devDependencies are needed for developing the project further.

For example, when you install the axios package to your project, the package follow-redirects will also be installed in your node_modules/ folder because it’s recorded as a dependency in Axios’s dependencies property:

"dependencies": {
  "follow-redirects": "^1.14.0"
},

When you open Axios’ package.json file, you will also see a many packages recorded under the devDependencies property:

"devDependencies": {
  "coveralls": "^3.0.0",
  "es6-promise": "^4.2.4",
  "grunt": "^1.3.0",
  "grunt-banner": "^0.6.0",
  "grunt-cli": "^1.2.0",
  "grunt-contrib-clean": "^1.1.0",
  "grunt-contrib-watch": "^1.0.0",
  "grunt-eslint": "^23.0.0",
  "grunt-karma": "^4.0.0",
  "grunt-mocha-test": "^0.13.3",
  "grunt-ts": "^6.0.0-beta.19",
  "grunt-webpack": "^4.0.2",
  // rest omitted for brevity...
},

But you won’t find these packages installed inside the node_modules/ folder. This is because the packages are only required for development.

The packages listed under devDependencies will only be installed when you clone the project and run npm install for that project.

To conclude, the --save-dev or -D flag is used to install a package as a development dependency. You need to make sure that the dependency is not required for running the project seamlessly.

Packages added as devDependencies are usually task runners like Grunt or Gulp, test frameworks like Jest or Karma, or build tools like Rollup or Webpack.

Take your skills to the next level ⚡️

I'm sending out an occasional email with the latest tutorials on programming, web development, and statistics. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.