在使用 "roadhog": "^2.5.0-beta.4" 作为前端打包工具时，引入ui库yarn add antd-mobile (今天版本是5.18.0) ，使用Form表单，在Input组件输入值时，触发校验后会报错。
经过多次分析， 结合多款react-ui库尝试后得知， 是 rc-field-form这个库版本太高导致的。具体情况见下方：
- antd-mobile@5.18.0 -> rc-field-form@1.27.0 校验报错见上图
- react-vant@1.4.4 -> rc-field-form@^1.21.2 校验成功见下方
- react-vant@1.4.4 -> rc-field-form@1.27.0 校验失败见下方
解决方案综上可知，降低版本rc-field-form可以解决问题。
- 直接用ui库： yarn add react-vant@1.4.4 （若先装了ant-mobile, yarn的缓存机制可能导致出错, 因为yarn.lock版本号没锁定,缘于^符号。参考2降低版本）
react-vant@1.4.4:
version "1.4.4"
resolved "https://registry.npmmirror.com/react-vant/-/react-vant-1.4.4.tgz#0b6eedc06c9cbef86eb0abf84f94985174bad207"
integrity sha512-kVONTSpgYwzxu82KdXwVA5zvvq7X0Y6dqGjLYt9wXmz8shzRiCg+YsE2yyHFnyV/i7d4vnrszjqa63EnGJmhUg==
dependencies:
"@react-spring/web" "^9.3.0"
"@use-gesture/react" "^10.1.1"
"@vant/icons" "^1.7.0"
"@vant/popperjs" "^1.1.0"
clsx "1.1.1"
rc-field-form "^1.21.2"
react-transition-group "^4.4.1"
swiper "^6.8.1"
- 未测试过，谁试过可以反馈下， 仍然使用antd-mobile@5时：
- yarn add rc-field-form@1.21.2
- 修改yarn.lock文件， 将rc-field-form降低版本
- 万一别人用了新版的特性，那这方法就GG了
rc-field-form@1.21.2, rc-field-form@^1.21.2:
version "1.21.2"
resolved "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.21.2.tgz#85bda1ee006ae9f1d146e1000337c69b4bb6d101"
integrity sha512-LR/bURt/Tf5g39mb0wtMtQuWn42d/7kEzpzlC5fNC7yaRVmLTtlPP4sBBlaViETM9uZQKLoaB0Pt9Mubhm9gow==
dependencies:
"@babel/runtime" "^7.8.4"
async-validator "^4.0.2"
rc-util "^5.8.0"
环境附加描述
node: 12.20.1
react: 17.0.0
react-dom: 17.0.0
- 使用5年前的打包器引入如今的新UI库时， 坑不经意就出来了。
- roadhog是基于webpack3搞得？
- pnpm6压根跑不起来这种老项目， yarn还能撑住。
- yarn的机制解释（其实应该叫yarn.lock文件存在的必要性–保持依赖目录结构不发生变化）：
若项目有A B两个依赖库， 同时拥有子依赖C， 且C版本不一样。 如下： A -> C@1.22.3 B -> C@^1.0
那么：
yarn add A yarn add B
之后：
因为^对版本号的规定， B的子依赖可能被指向C@1.22.3 ， 而C如果经历了不兼容的升级（break change似乎有这说法）, 那么项目运行嗝屁。
其次，如果yarn先安装B再安装A， 会导致node_modules目录结构变化。(这也算是yarn的不稳定性，pnpm不知道解决了么)
- yarn的铺平机制： yarn安装的依赖A有子依赖C。 那么项目可能会直接调用到C。
- pnpm6还真不比yarn快多少。。。
