首先我们在仓库 test 中 npm init 一个 package.json,然后 npm install react@16.13.1,此时 . node_modules 的目录结构如下:
test
node_modules
| prop-types@15.6.2
| react@16.13.1
我们再安装一下 prop-types@15.5.0,此时的依赖图如下:
test
node_modules
| prop-types@15.5.0
| react@16.13.1
node_modules
| prop-types@15.6.2
我们会发现
1、由于 npm 会扁平化的安装依赖,所以 prop-types@15.5.0 会安装到顶级 node_modules中。
2、由于顶级 node_modules 已经有了 prop-types@15.5.0,所以 react 内部所依赖的 prop-types@15.6.2 会安装在 react 内部的 node_modules 中。
假如我们再安装一个 react-xxx@3.1.0,他依赖于 prop-types@15.5.0 和 react@16.12.0,所以,此时的 node_modules 结构图如下:
test
node_modules
| prop-types@15.5.0
| react@16.13.1
node_modules
| prop-types@15.6.2
| react-xxx@3.1.0
node_modules
| react@16.12.0
我们发现
1、npm 在安装依赖时,首先在顶级 node_modules 下安装了 react-xxx@3.1.0
由于 prop-types@15.5.0 和顶级 node_modules下 的 prop-types 版本相同,所以不再单独安装。
2、由于 react 和顶级 node_modules 下的 react 版本不一致,所以在自己 node_modules 内部单独安装 react@16.12.0。
如果有其他安装包,以此类推。。。。
注意,在 package.json 中指定一个特定版本依赖是不够的,因为你希望确保最终用户获得完全相同的依赖关系树,包括其所有子依赖关系。而 package.json 中的一个特定版本保证只会发生在顶层。
在 package.json 文件只能锁定大版本,也就是版本号的第一位,并不能锁定后面的小版本,你每次 npm install 都是拉取的该大版本下的最新的版本,为了稳定性考虑我们几乎是不敢随意升级依赖包的,这将导致多出来很多工作量,测试/适配等,所以 package-lock.json 文件出来了,当你每次安装一个依赖的时候就锁定在你安装的这个版本。
注意,当需要移除 package-lock 再生成一份的时候,或者直接执行 npm install,如果 npm 包发布了新的版本,这个时候 package-lock.json 就会发生改变,安装的依赖就自动被升级了。