dependencies? devDependencies? 🤔

How to differentiate them

The basic criteria is whether a package is only needed for development or not.

• dependencies: Packages required to execute the application
• devDependencies: Packages required for development/testing

Examples

dependencies

• react, react-dom
• next

devDependencies

• eslint
• husky
• prettier
• typescript
• jest

What's good about differentiating them

• A developer can easily distinguish what packages needed for development or production
• When production build, faster installation time, less disk usage => $ npm install --production

Commands

Add a package to dependencies

npm
$ npm install <package-name>
Short: $ npm i <package-name>

yarn
$ yarn add <package-name>.

Add a package to devDependencies

npm
$ npm install <package-name> --save-dev
Short: $ npm i <package-name> -D

yarn
$ yarn add <package-name> --dev
Short: $ yarn add <package-name> -D

Reference

EN

• Specifying dependencies and devDependencies in a package.json file | npm Docs

JP

• 【いまさらですが】package.jsonのdependenciesとdevDependencies - Qiita
• 【package.json】dependenciesとdevDependenciesの違いとnpmとyarnのコマンド解説 | モグモグ
• 【package.json】dependencies, devDependencies の使い分けを考える - Qiita