一:多个版本的时候,依赖版本怎么选择?
参考了这片文章:https://juejin.cn/post/6844903981668368392,启发,进一步探究如下:
去查看npm包依赖情况,输入命令:
yarn list
但是依赖太多,导致前面已经看不到了,所以将所有依赖输出到文件中
yarn list > echo
右侧为输出的echo
文件,可以看到antd-mobile使用的是2.3.4
版本,依赖的rc-checkbox版本是2.0.0
antd使用的是4.16.8
版本,依赖的rc-checkbox版本是2.3.0
和2.3.2
,左侧可以看到node_modules
结论:结合参考文章楼主的解释
为了保证依赖关系树中没有大量重复模块,yarn在安装时会做dedupe(去重)操作,它会遍历所有节点,逐个将模块放在根节点下面,也就是当前项目的 node-modules 中。当发现有相同的模块时,会判断当前模块指定的 semver 版本范围是否交集,如果有,则只保留兼容版本,如果没有则在当前的包的 node-modules 下安装。
和实际打印的依赖树情况
2.0.0版本是antd-mobile依赖的rc-checkbox版本;
2.3.2和2.3.0是antd依赖的版本
那么node_modules根目录下的版本2.0.3是基于上面版本的兼容版本;
二、webpack配置resolve.modules使用
modules: [
path.resolve(__dirname, "../src"),
path.resolve(__dirname, "../node_modules"),
"node_modules",
]
path.resolve(__dirname, "../node_modules")
与"node_modules
的区别是什么??
对于直接声明依赖名的模块,webpack 会类似 Node.js 一样进行路径搜索,搜索 node_modules 目录,这个目录就是使用resolve.modules
字段进行配置的,默认就是:
resolve: {
modules: ['node_modules'],
},
通常情况下,我们不会调整这个配置,但是如果可以确定项目内所有的第三方依赖模块都是在项目根目录下的 node_modules
中的话,那么可以在 node_modules
之前配置一个确定的绝对路径:
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'), // 指定当前目录下的 node_modules 优先查找
'node_modules',
],
},
这样配置在某种程度上可以简化模块的查找,提升构建速度。
结论
结合上面两点:
- 根据npm包依赖规则,node_modules根目录下最终保留的是rc-checkbox的2.0.3的版本,
- webpack打包配置使用
path.resolve(__dirname, 'node_modules')
导致优先查找node_modules根目录下的依赖版本,而不是antd目录下的2.3.0版本; - 版本兼容问题导致Table组件在使用
rowSelection
的时候报错; - 只保留
node_modules
使得antd依赖自己目录下的rc-checkbox的版本2.3.0