サイト名変更・お引越しのお知らせ

【package.json】dependenciesとdevDependenciesの違いとnpmとyarnのコマンド解説

npmやyarnでパッケージをインストールすると、package.jsonにdependenciesとdevDependenciesが追加されます。

dependenciesとdevDependencies

これが、dependenciesとdevDependencies。

package.jsonの中にあります。

(一部省略しています)

何も考えずにインストールしていると、不要なものが増えてbundleサイズが大きくなりパフォーマンスに影響します。

本記事ではdependenciesとdevDependenciesの違いと、それぞれのコマンドを解説していきます。

違いを理解して、適切に使えるようになりましょう。

dependenciesとdevDependenciesの違いと分ける理由

それぞれの違いとなぜ分けるべきなのかを説明します。

違い

dependencies

本番環境でも利用するパッケージやその依存関係。

reactなど

devDependencies

開発環境やテスト環境で利用するパッケージやその依存関係。

本番用のビルドをするときに含まれない。

eslintやjestなど

補足

依存関係とは、パッケージを動作させるために必要なパッケージの関係性のことです。

手動でパッケージをインストールする場合は依存関係のあるパッケージも追加しないと動きませんが、npmやyarnがカバーしてくれています

なぜ分けるべきか

不要なパッケージを追加して本番や開発環境のパフォーマンスを下げたくないから。

メインの理由はこれだと思います。

本番はBundleされたファイルを読み込む時間を少しでも減らし、ユーザー体験を向上させたい(損ねたくない)ですし、開発もビルドの時間を減らして生産性をあげていく必要があります。

npmとyarnコマンド

npmとyarnそれぞれコマンドをまとめます。

<package-name>とオプションの順番はどちらでもOKです。

dependencies

npm

$ npm install <package-name> 

npm省略版

$ npm i <package-name> 

補足

--saveをつけるような記事とかもありますが、

npmのv5から不要になっています。

yarn

$ yarn add <package-name>

devDependencies

npm

$ npm install <package-name> --save-dev

npm省略版

$ npm i <package-name> -D 

yarn

$ yarn add <package-name> --dev

yarn省略版

$ yarn add <package-name> -D 

その他のdependencies

この2つがメインのdependenciesになるので、2つを使いこなせればOKですが、

他にも3つdependenciesがあります。

  1. peerDependencies
  2. optionalDependencies
  3. bundledDependencies

この記事では詳しくは触れませんので、気になる方はチェックしてみてください。

まとめ

dependenciesとdevDependenciesの違いと分ける理由について解説しました。

違いを理解しつつ使ってみてください!

dependencies

本番環境でも利用するパッケージやその依存関係。

devDependencies

開発環境やテスト環境で利用するパッケージやその依存関係。

本番用のビルドをするときに含まれない。