探究:Antd table组件用rowSelection时报shiftKey undefined

本文探讨了如何在npm包依赖版本选择中避免重复,并通过实例解析了webpack resolve.modules配置的作用,重点在于理解为何node_modules中的版本选择与实际冲突相关,以及如何优化以解决Table组件的rowSelection报错问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一:多个版本的时候,依赖版本怎么选择?

参考了这片文章: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.02.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',
  ],
},

这样配置在某种程度上可以简化模块的查找,提升构建速度。

结论

结合上面两点:

  1. 根据npm包依赖规则,node_modules根目录下最终保留的是rc-checkbox的2.0.3的版本,
  2. webpack打包配置使用path.resolve(__dirname, 'node_modules')导致优先查找node_modules根目录下的依赖版本,而不是antd目录下的2.3.0版本;
  3. 版本兼容问题导致Table组件在使用rowSelection的时候报错;
  4. 只保留node_modules使得antd依赖自己目录下的rc-checkbox的版本2.3.0
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值