Discussion about main field of antd-mobile

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

---

社区遇到巨量 import { Xxx } from 'antd-mobile' 找不到模块（找不到 antd-mobile 或 react-native）的问题，根本原因是由于 antd-mobile 同时用于 web 和 native 两种使用场景，以不同的后缀 *.web.js 和 *.js 作为区分，所以项目没有设置统一的入口文件，需要直接引用模块文件。

没有 main 文件也会导致 eslint 报 import/no-unresolved 规则的错误。

目前主要解决方案如下：

1. 找不到 antd-mobile：接入 babel-plugin-import，解决没有 main 入口文件的问题。

   或者不再推荐 import { Button } from 'antd-mobile'; 的写法，直接 import Button from 'antd-mobile/lib/button';

2. 找不到 react-native：增加 [resolve.extention] 配置(https://github.com/ant-tool/atool-build/blob/e4bd2959689b6a95cb5c1c854a5db8c98676bdb3/src/getWebpackCommonConfig.js#L78)，解决 web 和 native 模块路由的问题。

上面两个方案比较影响易用性，很多用户搞不定这个。

---

建议：

antd-mobile antd-mobile-native 分开，npm run pub 时同时发布两个包，这样两个包可以各自指定 main 入口，而且不再需要配置 resolve.extention。

相关讨论：https://github.com/ant-design/ant-design-mobile/commit/f561b6eb4f577eea502065df93166a88d443e4d9#commitcomment-20043061

[johnbian]

但是我的 babel-plugin-import 已经install过了。。package里面也有了。。 这个是什么原因呢。。 .babelrc文件配置 { “presets”: [“react-native”], “plugins”: [[“import”, { “libraryName”: “antd-mobile” }]] }

[yyh1102]

最新的antd-mobile版本，按官方文档配置babel-plugin-import 仍然报无法找到"antd-mobile"。我的RN版本是0.43