一、package.json
定义了当前项目所需要引用的各个模块,可以手工修改配置,也可以删除后,使用npm init命令重新自动生成。
但是该文件只锁定大版本号,也就是版本号的第一位,所以你会发现两个文件中同一个包的版本号不一致,但是第一位一定是一致的。
1、锁定小版本
如需锁定小版本,修改配置文件,去掉版本号前面的小尖尖即可。
"dependencies": {"axios": "^0.21.1","element-ui": "2.15.1",
},
例如:
此处的axios,若执行npm install,会下载当前大版本下的最新版本。
而此处的element-ui,若执行npm install,会锁定下载2.15.1版本。
2、开发环境和生产环境
有些包是开发过程中需要使用,打包部署到线上无需使用的。
在安装的时候注意使用安装命令:
npm install --save -dev即npm install -D
仅在开发环境时,安装使用。
而npm install默认是安装在开发和生产环境的。
查看package.json文件有:
"dependencies": {"axios": "^0.21.1","echarts": "^5.3.1"……
},
"devDependencies": {"@vue/cli-plugin-babel": "^4.5.10","@vue/cli-plugin-eslint": "^4.5.10","@vue/cli-service": "^4.5.10","@vue/eslint-config-standard": "^5.1.2","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-import": "^2.20.2","eslint-plugin-node": "^11.1.0","eslint-plugin-promise": "^4.2.1","eslint-plugin-standard": "^4.0.0","eslint-plugin-vue": "^6.2.2","sass": "^1.26.5","sass-loader": "^8.0.2","vue-template-compiler": "^2.6.11"
},
像axios、echarts等在生产环境需要使用的,就默认安装至dependencies(开发和生产环境);
像eslint、sass等只在开发的过程中使用的,打包以后无需再用,就使用-D命令,仅安装至devDependencies(开发环境)。
但是!!
经过测试我发现,将所有的包都放到devDependencies下,删掉node_modules里面的包。
然后重新执行npm install,再执行npm run build,发现打包出来的dist大小完全不变,且部署到线上环境能正常运行。
那我怀疑npm install是同时安装在了开发和生产环境,于是执行npm install -D命令,效果一样,打包大小不变,部署线上正常运行。
奇了怪了见了鬼了,那这个dependencies和devDependencies的意义何在呢?只是为了规范???
二、package-lock.json
是在npm install时生成的,用来记录当前状态下实际安装的各个包的具体来源和版本号。
三、node_mouduls
我以为:
- 执行npm
install时,根据package.json生成package-lock.json,对应下载相应版本的第三方包至node_mouduls。
现象是: - 只删掉package-lock.json文件,执行npm
install时,生成package-lock.json文件会根据node_mouduls已有的包来。 - 只删掉node_mouduls文件夹,执行npm
install时,会根据package-lock.json文件去下载相应的包至node_mouduls。 - 同时删掉package-lock.json文件、node_mouduls文件夹,执行npm
install时,生成package-lock.json文件才是最新的根据package.json来的,然后会去下载最新的包至node_mouduls。
四、补充
1、安装指定版本参考文档
https://blog.csdn.net/xuaner8786/article/details/81630445