11
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

package.jsonとpackage-lock.jsonの違いについて

Last updated at Posted at 2022-09-06

package.jsonとは

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

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

dependenciesdevDependenciesの違い

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

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

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

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

package-lock.jsonとは

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

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

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

package.jsonの例
packageJson.png
package-lock.jsonの例
packageLock.png

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

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

11
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?