我們首先來看一下package.json文件里的內容

{"name": "xxxx","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve --port 8081","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"ant-design-vue": "^1.3.10","axios": "^0.19.0","core-js": "^3.4.3","crypto-js": "^3.1.9-1","moment": "^2.24.0","nprogress": "^0.2.0","vue": "^2.6.10","vue-router": "^3.0.3","vuex": "^3.0.1"},"devDependencies": {"@vue/cli-plugin-babel": "^4.1.1","@vue/cli-plugin-eslint": "^4.1.1","@vue/cli-service": "^4.1.1","@vue/eslint-config-standard": "^4.0.0","babel-eslint": "^10.0.1","babel-plugin-import": "^1.12.0","eslint": "^5.16.0","eslint-plugin-babel": "^5.3.0","eslint-plugin-vue": "^5.0.0","less": "^3.0.4","less-loader": "^4.1.0","lint-staged": "^9.4.3","vue-template-compiler": "^2.6.10","webpack-bundle-analyzer": "^3.4.1"},"gitHooks": {"pre-commit": "lint-staged"},"lint-staged": {"*.{js,vue}": ["vue-cli-service lint","git add"]},"repository": {"type": "git","url": "xxxxxxx"} }

再看下package-lock文件里的內容

{"name": "oss-frontend","version": "0.1.0","lockfileVersion": 1,"requires": true,"dependencies": {"@ant-design/icons": {"version": "1.1.16","resolved": "http://registry.npm.baidu-int.com/@ant-design%2ficons/-/icons-1.1.16.tgz","integrity": "sha1-rGQmIWk04/S8EI8vSPku1meJI14="},"@ant-design/icons-vue": {"version": "1.0.1","resolved": "http://registry.npm.baidu-int.com/@ant-design%2ficons-vue/-/icons-vue-1.0.1.tgz","integrity": "sha1-NDV5IZwEGQgxyco4Jq7HNhu4tNQ=","requires": {"ant-design-palettes": "^1.1.3","babel-runtime": "^6.26.0"}},"@babel/code-frame": {"version": "7.0.0","resolved": "http://registry.npm.baidu-int.com/@babel%2fcode-frame/-/code-frame-7.0.0.tgz","integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==","dev": true,"requires": {"@babel/highlight": "^7.0.0"}},"@babel/core": {"version": "7.7.5","resolved": "http://registry.npm.baidu-int.com/@babel%2fcore/-/core-7.7.5.tgz","integrity": "sha1-rhMjzQNbUWApMwf1BkfoP4umL34=","dev": true,"requires": {"@babel/code-frame": "^7.5.5","@babel/generator": "^7.7.4","@babel/helpers": "^7.7.4","@babel/parser": "^7.7.5","@babel/template": "^7.7.4","@babel/traverse": "^7.7.4","@babel/types": "^7.7.4","convert-source-map": "^1.7.0","debug": "^4.1.0","json5": "^2.1.0","lodash": "^4.17.13","resolve": "^1.3.2","semver": "^5.4.1","source-map": "^0.5.0"},"dependencies": {"@babel/code-frame": {"version": "7.5.5","resolved": "http://registry.npm.baidu-int.com/@babel%2fcode-frame/-/code-frame-7.5.5.tgz","integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==","dev": true,"requires": {"@babel/highlight": "^7.0.0"}}}} }

package.json文件記錄你項目中所需要的所有模塊。當你執行npm install的時候，node會先從package.json文件中讀取所有dependencies信息，然后根據dependencies中的信息與node_modules中的模塊進行對比，沒有的直接下載，已有的檢查更新（最新版本的nodejs不會更新，因為有package-lock.json文件，下面再說）。另外，package.json文件只記錄你通過npm install方式安裝的模塊信息，而這些模塊所依賴的其他子模塊的信息不會記錄。

package-lock.json文件鎖定所有模塊的版本號，包括主模塊和所有依賴子模塊。當你執行npm install的時候，node從package.json文件讀取模塊名稱，從package-lock.json文件中獲取版本號，然后進行下載或者更新。因此，正因為有了package-lock.json文件鎖定版本號，所以當你執行npm install的時候，node不會自動更新package.json文件中的模塊，必須用npm install packagename（自動更新小版本號）或者npm install packagename@x.x.x（指定版本號）來進行安裝才會更新，package-lock.json文件中的版本號也會隨著更新。

附：當package.json與package-lock.json都不存在，執行"npm install"時，node會重新生成package-lock.json文件，然后把node_modules中的模塊信息全部記入package-lock.json文件，但不會生成package.json文件，此時，你可以通過"npm init --yes"來初始化生成package.json文件。

總結：

項目中引入的包版本號之前經常會加^號，每次在執行npm install之后，下載的包都會發生變化，為了系統的穩定性考慮，每次執行完npm install之后會創建或者更新package-lock文件。該文件記錄了上一次安裝的具體的版本號，相當于是提供了一個參考，在出現版本兼容性問題的時候，就可以參考這個文件來修改版本號即可。

總結

以上是生活随笔為你收集整理的package 与 package-lock文件的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。