npm を使うときに、まず初めに知っておいたほうが良い概念が、インストールするパッケージの保存場所についてです。
保存場所
- dependencies
- devDependencies
- グローバル
厳密には他にもあるのですが、まず上記の3種類の概念が重要です。
グローバル
npm install -g <name>
-g、あるいは --global を指定してパッケージをインストールすると、パッケージはプロジェクトの外側のユーザー単位でインストールされます。私の環境では C:\Users\<username>\AppData\Roaming\npm にインストールされています。プロジェクトの外側にインストールしているので、インストールされたパッケージは、そのユーザーの環境内であればすべてのプロジェクトから利用できます。この性質から「グローバル」という名前になっているようです。
基本的にグローバルにインストールする機会は稀です。プロジェクトは開発者のグローバルに何がインストールされているかに依存すべきではないですし、プロジェクトが開発者のグローバルに何かをインストールすることを求めるのは避けるべきです。開発者のグローバルに何をインストールするかは、完全に開発者の自由であるべきです。
グローバルにインストールしたパッケージは、プロジェクトの package.json には記録されません。したがって、プロジェクトをリポジトリから取得した開発者にはインストールされません。
グローバルにインストールするパッケージは、グローバルにインストールされることを前提としたパッケージだけにしましょう。
dependencies
npm install -P <name>
-P、あるいは --save-prod を指定してパッケージをインストールすると、
- パッケージはプロジェクトの中の node_modules にインストールされます
- パッケージは package.json の dependencies に記載されます
devDependencies
npm install -D <name>
-D、あるいは --save-dev を指定してパッケージをインストールすると、
- パッケージはプロジェクトの中の node_modules にインストールされます
- パッケージは package.json の devDependencies に記載されます
dependencies の devDependencies の使い分け
dependencies にインストールすべきパッケージ
製品が直接利用しているパッケージは、dependencies にインストールします。つまり、そのパッケージがないと製品として成り立たないものが dependencies になります。ソースコードから import しているようなパッケージは、間違いなく dependencies です。ES Lint などを導入していると、devDependencies にインストールした状態でソースコードから import すると警告が出ます。
devDependencies にインストールすべきパッケージ
製品は直接利用していないけど、開発時に使用するようなパッケージは devDependencies にインストールします。つまり、開発時には使うけど、製品としてそのパッケージがなくても問題ないものが devDependencies です。Jest 等のテストツールや、ES Lint などの検証ツール、webpack などのモジュールバンドは、開発時にしか使わないものなので、devDependencies です。
使い分けるメリットは？
正直なところ dependencies と devDependencies のどちらにインストールしても大して違いはありません。 しいて言えば、インストールしているパッケージが、製品に必要なパッケージなのか、開発に必要なパッケージなのかを、開発者が明確に認識できるメリットがあります。
プロジェクトを取得して依存パッケージをインストールするときに、npm install --production とすると、dependencies のパッケージのみがインストールされるので、ちょっとパッケージをインストールするだけで何百MBにもなる node_modules の要領を節約することはできます。対して、npm install とすると package.json の全てのパッケージがインストールされます。開発者は、基本的に npm install しか使わないので、あまり実利はないかもしれません。
