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