浅析package.json 和 package-lock.json的区别

一 package.json 中的版本符号

{
  "react"："^18.2.0",
  "react-dom"："~18.2.0"
  "react-refresh": "0.11.0",
}

插入符号 ^18.2.0 ：匹配 18.X.X 的最新版本。
波浪符号 ~18.2.0 ：匹配 18.2.X 的最新版本。
固定版本 0.11.0 ： 匹配 0.11.0， 不会更新版本。

二 package-lock.json 的由来

一般一种的东西的由来都是为了解决某个问题，pakage-lock.json的由来 为了解决 package.json 的弊端
在npm@5以前都没有package-lock.json, 出现的问题

• package.json 中版本不统一，更新困难。比如package.json中的某个包 为插入符号或者波浪符号，当包存在更新时，执行npm install 都会去安装最新的包，可能导致兼容性问题以及项目不同成员间开发依赖不稳定性。不利于开发的统一性。
• 我们依据package.json去安装包的时候，由于安装的包可能还依赖其他包，又会去安装包的package.json 中去查询和下载其依赖包，导致安装包速度拉跨

三 package-lock.json 解决的问题

• package-lock.json 实现一个版本锁定的功能，当我们执行npm install 时候，会先判断package-lock.json 的版本和package.json 的版本是否兼容，如果兼容则按照package-lock.json 来安装，如果不兼容则按照package.json 来安装，并且安装完将package-lock.json更新。
• package-lock.json 扁平化包含了项目中所有依赖，能提升下载速度

执行 npm install 后发生了什么？

如图，引用自掘金