1.背景與原因
最近在使用vue3+ts+antdv開發項目，並且在驗收及測試階段項目都可以正常運行，但直到上線前的下午，項目突然報錯且功能無法使用導致頁面卡死（此時請讓我瘋狂吐槽一波antdv，畫面自行腦補。。。。）。找了半天原因，是因為服務器在部署的時候偷偷將antdv的版本升到了最新，新版本不允許之前的寫法。而我本地還是用的之前的，但是我去antdv官網看了下，神奇的事情發生了，剛開始最新版本從2.2.3變成了2.2.5，沒過多久再次刷新竟然變成了2.2.6。（難道antdv發版日和我們一樣？）你說這么大個庫，更新就更新吧，你好歹兼容一下之前的寫法啊，此時心中一萬只草泥馬奔騰而過......所以此時兩個重要的名詞package.json和package-lock.json文件登場了。
2.package.json和package-lock.json的區別
我們先來看一下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.json文件的內容
{
"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文件。該文件記錄了上一次安裝的具體的版本號，相當於是提供了一個參考，在出現版本兼容性問題的時候，就可以參考這個文件來修改版本號即可。
原文鏈接：https://www.jianshu.com/p/ad5cd035116f