初次使用antd-mobile开发时踩的坑

Posted 2023-05-08

参考技术A

我只想开发移动web页面，为什么要我安装react-native模块？
原因是antd-mobile被设计为同时支持React Native应用开发和Web应用开发，所有的组件都暴露为2个模块文件： index.js（React Native开发）和 index.web.js （Web开发）。

第1个方法：开发web应用时最好指定引用组件的js和样式：

再配合 babel-plugin-import 插件支持组件按需加载，设置如下：

这样会减少打包后文件的体积。

第2个方法：配合webpack的resolve中设定 extensions 选项的值，并将 .web.js 放在 .js 之前，这样就会优先找.web.js后缀的js：

github issue: https://github.com/ant-design/ant-design-mobile/issues/66

明明webpack配置里已经使用了css-loader，为什么还是报错？

原来是在webpack loaders 配置的时候需要把 css 和 cssmodules 分开处理，并加上 exclude or include, 不去处理 antd-mobile引用的样式 。

记录使用git submodule时踩的坑

在使用git子模块的时候踩了一个坑
在使用git submodule updata --init --recursive命令，即递归更新子模块并初始化时碰到了一个问题：

经过一段不短时间的排查，发现问题源于之前的一次不成功的子模块换源行为。
.gitsubmodule中的url改动并未同步到git的config中，导致保存时子模块保存的实际是旧源commit hash值。在update的时候，git自动读取项目目录下的.gitsubmodule文件，从新源中检索该hash值的commit，由于两者版本历史不相同，失败了。