当前位置：首页 > article >正文

vue之 package.json和package-lock.json

article 2024/9/23 3:24:08

一、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。