package.jsonとは

現在のプロジェクトの情報を保存するファイル。
package.jsonはプロジェクトのルートディレクトリに保存され、アプリケーションの依存性などを記録する。

package.jsonファイルの各情報はkey-valueと保存される。（jsonオブジェクト）
プロジェクトのnameとversionは必須として記載しなければならなく、インストールすべきパッケージのリストを、dependenciesまたはdevDependenciesに明示しなければならない。

`dependencies`と`devDependencies`の違い

devDependenciesは開発環境時にのみ必要なパッケージを追加するところ。
例えば、jestやstyle-loaderなどは、主に開発環境でしか使わないパッケージであるため、devDependenciesに記載して別途管理する。

しかし、axiosやvue-routerなど、本番環境でも利用するパッケージに関しては、dependenciesに記載して別途管理する。

ここでdependenciesとdevDependenciesに分けて記載するためにはnpmでインストールする際にオプションを与えることで分けて記載することができる。

npm install < パッケージ名 >　->　dependenciesに記載される。
npm install < パッケージ名 > --save-dev　->　devDependenciesに記載される。

package-lock.jsonとは

依存関係のパッケージのバージョンの詳細を記載したファイル
package-lock.jsonはnode_modulesの構造やpackage.jsonが修正または生成される際の依存性を正確かつ具体的な情報を記載する。

npm install < パッケージ名 >でインストールすると、package.jsonにはインストールしたパッケージの大まかなバージョンが記載されると同時にnode_modulsが生成・追加される。
しかし、時間が経過して新しいバージョンのパッケージが配布されてからpackage.jsonをもって再度npm installを行うと、新しいパッケージパッケージがインストールされる。
つまり、インストールした時点によってバージョンが異なるので、アプリケーションの動作の保証ができない問題があり、それで生まれたのがpackage-lock.jsonである。

実際のファイルの中身の違い

package.jsonの例

package-lock.jsonの例

package-lock.jsonがあるときの`npm install`の動き

package-lock.jsonがあるとnpm installの動きはちょっと変わる。
具体的には、package.jsonを利用してnode_modulesを生成しないで、package-lock.jsonを利用してnode-modulesを生成する。

package.jsonとは

dependenciesとdevDependenciesの違い

package-lock.jsonとは

実際のファイルの中身の違い

package-lock.jsonがあるときのnpm installの動き

`dependencies`と`devDependencies`の違い

package-lock.jsonがあるときの`npm install`の動き