Deciding whether to save to devDependencies or dependencies?

Question

I'm building a react/express app and want to make sure I'm setting up my package.json so that dev packages go under devDependencies, and production packages go under dependencies.

When downloading a new npm package, what's the quickest way to find out whether I can save it using --save or using --save-dev? For example, here is my current package.json:

  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.2",
    "eslint": "^4.6.0",
    "eslint-plugin-react": "^7.3.0",
    "jest": "^20.0.4"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "ejs": "^2.5.7",
    "express": "^4.15.4",
    "pm2": "^2.6.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.5.5"
  }

I had a hard time looking up which section each package should go on. I tried looking it up for each individual dependency but never got a really decisive answer so I don't know if I did so optimally.

What's the best way when downloading an npm package to find whether I can save it using --save-dev?

Answer 1

Generally, dependencies (--save) are for packages that are referenced by your application code: code that runs when someone uses your app. devDependencies (--save-dev) are for packages used by the developers of your app: compilation/build tooling and testing.

There is no strict restriction in npm or node that says package x must go into dependencies or devDependencies. You could install webpack in either but if we follow the logic above, the most appropriate section for it is devDependencies.

When you publish your package to npm, a user doing an npm install for your package can choose to install, along with your package's code, dependencies (the usual), devDependencies, or both. If they're not going to be modifying code in your package, they won't need anything from devDependencies. This is one reason to keep the two sections cleanly separated.

Answer 2

This is what I do. I'm curious to know if there is a better way:

Look up your package on the npmjs.com site and see how they recommend installing it.

If they recommend installing it with --save (or simple without any --save option), it belongs in dependencies.

If they recommend installing it with --save-dev (or --dev or -D), it usually belongs in devDependencies.

E.g.:

• https://www.npmjs.com/package/@babel/runtime
  • npm install --save @babel/runtime
  • put it into dependencies
• https://www.npmjs.com/package/@babel/core
  • npm install --save-dev @babel/core
  • put it into devDependencies

Exceptions:

I've noticed that this method is not always reliable. E.g. resize-observer-polyfill which recommends installing it with --save-dev but the project I'm working on uses it in production. Then again, if you're using webpack, it might bundle it in for you anyway :).