【NPM】package.jsonの中のdependenciesとdevDependenciesの違い

package.jsonの中のdependenciesとdevDependenciesの違いについて。

目次

1. dependenciesとdevDependenciesの違い
2. package.jsonの役割
3. dependenciesに追加する方法
4. devDependenciesに追加する方法
5. npm installとは？
6. npm installとnpm updateの違い
7. どっちを使うべきか？
8. （補足）dependenciesのみに追加する方法

## package.jsonの例

package.json

{
  "name": "twitter",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

dependenciesとdevDependenciesの違い

本番環境で使うパッケージか、開発環境で使うパッケージかの違い。

通常、開発環境は変更内容の即時コンパイルやテスト機能など、本番では不要な処理を実行することが多い。

本番にも適用すると重くなってしまうため、本番と開発環境で必要な機能を分けている。

・dependencies

本番環境で使うパッケージ。

・devDependencies

開発環境でのみ使うパッケージ。ユニットテストやJSの縮小やコンパイルなど。

## package.jsonの役割 package.jsonに記述してあるパッケージは、実際に**インストールしたものではない**。

package.jsonはどのパッケージのどのバージョンをインストールするかを指定した買い物リスト。

実際にインストールしたパッケージは、package-lock.jsonに記載される。（自動記載のため編集不要）

インストールの流れ

package.json　（買い物リスト）
 ↓
npm install　（インストール）
 ↓
package-lock.json　（買ったもの）

## dependenciesに追加する方法 `npm install <パッケージ名>`を実行すると、package.jsonとpackage-lock.jsonのdependenciesの２つに追記される。

devDependenciesに追加したい場合は--save-devオプションをつける。

devDependenciesに追加する方法

オプションで--save-devをつける。

npm install --save-dev <パッケージ名>を実行すると、package.jsonとpackage-lock.jsonのdevDependenciesの２つに追記される。

## npm installとは？ npm installを実施すると、package.jsonに記述されたパッケージがインストールされる。

dependenciesもdevDependenciesもどちらもインストールされる。

npm installとnpm updateの違い

・npm install
package.jsonに記載してあるパッケージをインストールする。package-lock.jsonやyarn.lockに記載されている依存関係のあるパッケージもインストールする。

・npm update
package.jsonに記載されている最新のパッケージをインストールする。依存関係で不足しているパッケージがあればそれらも新たにインストールする。

https://docs.npmjs.com/cli/v7/commands/npm-install
https://docs.npmjs.com/cli/v6/commands/npm-update

どっちを使うべきか？

npm updateがおすすめ。不足しているパッケージもインストールしてくれる。

### （補足）dependenciesのみに追加する方法 オプションで`--production`をつける。

・$npm install --production