Laravelのpackage.lockとpackage.jsonの役割とintegrity
3 回閲覧されました
みなさんこんにちは、jonioです。
package.lockとpackage.jsonの役割が曖昧になっているので今回はアウトプットの記事になります。
目次
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
package.lockとは
node_modulesフォルダにインストールするフロントエンド(見た目や操作まわり)に関する情報を管理するファイルが何かを管理する為に存在します。
見た目や操作周りのファイルとはcssフレームワークのtailwindcssやjsを変換するviteのことです。
「npm install」をした時にpackage.lockの内容を元にnode_modulesにインストールします。
package.jsonとは
node_modulesフォルダにインストールするフロントエンド(見た目や操作まわり)に関する情報を管理するファイルを編集する為に存在します。
package.jsonを変更したらpackage.lockに記録しないと「npm install」をした時に変更したファイルがnode_modulesにインストールされないので必ず「npm update」をしないといけません。
package-lock.jsonは勝手に編集してはいけない
package.jsonを編集して「npm update」をするよりもいきなりpackage.lockを編集した方が早いですがやらない方がいいです。
なぜならpackage.jsonの中身を管理する値があるからです。
下記のコードで考えます。
{
"name": "laravel-taskdodesho",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"alpinejs": "^3.14.9",
"axios": "^1.11.0",
"lodash": "^4.17.21",
"vue": "^3.5.20",
"vue-router": "^4.5.1"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.10",
"@types/node": "^24.3.0",
"@vitejs/plugin-vue": "^5.2.4",
"autoprefixer": "^10.4.21",
"laravel-vite-plugin": "^1.3.0",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.17",
"typescript": "^5.9.2",
"vite": "^5.4.19",
"vue-tsc": "^3.0.6"
}
},
"node_modules/@alloc/quick-lru": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@babel/helper-string-parser": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
"engines": {
"node": ">=6.9.0"
}
},
・
・
・
・「node_modules/〜」の中に「integrity」の項目があり値が設定されているのを確認できます。
例えば「node_modules/@alloc/quick-lru」の場合は以下に設定されています。
sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==この値がpackage.jsonとpackage-lock.jsonを紐づけている値です。
integrityの値を勝手に編集するとpackage.jsonとpackage-lock.jsonが紐づかなくなるので「npm install」をした時に警告が出ます。
警告は出ますが「npm install」を実行されます。
個人開発ならintegrityの値を勝手に編集しても問題ないですがチーム開発だと差分が出たことについてメンバーから絶対に質問されるので勝手に編集しない方がいいです。
ここからはおまけです。
node_modulesのパスが複数ある
先程のサンプルコードは「node_modules/〜」が2つありましたがこれはインストールするファイルの保存先が違う為です。(サンプルコードは下記でした)
node_modules/@alloc/quick-lru
node_modules/@babel/helper-string-parser通常は膨大な数あります。
dependenciesとdevDependencies
サンプルコードの下記の部分です。
"dependencies": {
"alpinejs": "^3.14.9",
"axios": "^1.11.0",
"lodash": "^4.17.21",
"vue": "^3.5.20",
"vue-router": "^4.5.1"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.10",
"@types/node": "^24.3.0",
"@vitejs/plugin-vue": "^5.2.4",
"autoprefixer": "^10.4.21",
"laravel-vite-plugin": "^1.3.0",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.17",
"typescript": "^5.9.2",
"vite": "^5.4.19",
"vue-tsc": "^3.0.6"
}ローカルでは「dependencies」と「devDependencies」の内容がインストールされて本番では「dependencies」の内容がインストールされます。
本番とローカルの判断は「.env」の「APP_ENV」で行います。
下記のコードです。
APP_NAME=Laravel
APP_ENV=local //←これ
APP_KEY=base64:xr35SSX+O/X3Grf0Jr/tDVGP0K9Thr3ZdQZxYEkRVCk=
APP_DEBUG=true
APP_URL=http://localhost
DEBUGBAR_ENABLED=false今は「local」ですが本番の場合は「production」にすればいいです。