Ant-design-mobile: Discussion about main field of antd-mobile

[afc163]

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

[afc163]

有其他方案也可以提出来。

[yiminghe]

当时不加main 是故意的，看来大家都不看文档， 这样搞：

main:'lib/warn.js'

component/WarnComponent.ios.tsx
component/WarnComponent.android.tsx
component/WarnComponent.tsx

component/warn.tsx

if(typeof window !== 'undefined'){
warn web

} else {
warn rn
}
module.exports = {
  Button: WarnComponent
}

component/index.web.tsx 是用来生成 d.ts

[afc163]

lib/warn.js 需要 export default 一个空的 {}，

import { Xxx } from 'antd-mobile'

否则 webpack 直接会报错，用户没机会看到 warning 。

[warmhug]

先确定一个方案搞下，发个 alpha 版本看看有没问题。 @yiminghe

[yiminghe]

分库不行，就是 warn.tsx 方案

[afc163]

那只能在文档显著位置里加上，『如果你遇到 Module not found: Error: Cannot resolve module 'react-native' 或 Uncaught Error: Cannot find module "antd-mobile" 的问题，请确保正确引入了 babel-plugin-import 或配置 resolve.extention』这样的说明并给出相关链接。现在这个易用性很差，答疑压力很大。

@warmhug 先把这个补上。

[silentcloud]

还是按照现有的方案走吧，加强文档，把各种情况的 demo （纯 H5，纯 RN，混合，独立 webpack 之类的） 都维护起来好了

[bang88]

建议把这个加到README.md里面.

[afc163]

来个 PR 如何？

[bang88]

这个还是你们写吧，还没怎么用这个项目。

[xpcode]

投 antd-mobile、antd-mobile-native 分开的好，理由：
1、对于用户，这两个如何实现无需关心，关心更多的是易用、可扩展、稳定、持续升级、功能齐全等；
2、web项目和native项目通常也不在一个项目里；
3、牵强点说，react和react-native不也分开了吗。

[TuangWang]

@xpcode 说的不错

[afc163]

warning 信息先加上，先按 @yiminghe 说的搞。

[afc163]

这个 warn.jsx 为啥到现在还没人加。@warmhug @silentcloud @pingan1927

[yeyuguo]

这个帖子靠谱，报错也解决。对于我这样的入门小白来说，知道了为什么出现这个问题，这issue 质量非常高，比心 @afc163

[bryht]

用这种方式也抛错

[silentcloud]

这个错误看起来像是依赖问题，跟 antd-mobile 没什么关系 @bryht

[yeyuguo]

你的react的版本和 ant-mobile 里react 依赖需要是同一个版本，我遇到不是同一个版本问题时候，就是一直说找不到包的问题，最好查查你的 react 版本。 npm ls react @bryht

[bryht]

多谢各位，应该就是版本不一致的问题，重新装了遍 react就好了。

[mineralres]

我用react-native init了一个项目，然后直接import {Button } from 'antd-mobile';

.babelrc 配置如下:
{
"presets": [
"react-native"
],
"plugins": [
[
"import",
{
"style": "css",
"libraryName": "antd-mobile"
}
]
]
}

最后npm start还是出现css找不到

[2017-01-20 08:16:28] Transforming files
(node:9380) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 10): UnableToResolveError: Unable to resolve module antd-mobile/lib/button/style/css from C:\develop\gant\myproject\index.android.js: Module does not exist in the module map or in these directories:
C:\develop\gant\myproject\node_modulesantd-mobile\lib\button\style
, C:\develop\node_modulesantd-mobile\lib\button\style

下面这种写法没有错误提示:
import Button from 'antd-mobile/lib/button';

antd-mobile的版本是0.9.14

[warmhug]

@mineralres "style": "css", 去掉。react-native 没有 css

[mineralres]

@warmhug 可以了。

[johnbian]

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

[nunnly]

在用 web项目打包发布的时候发现了这个问题，我改动了
node_module/antd-mobile/lib/wran.js 之后，可以正常使用

//原代码
exports["default"]={};
//修改至
exports["default"] = require('./index.web');

[afc163]

@nunnly 不要这么用，移动项目不应该引入所有模块，这样会导致体积过大。参照楼顶的解决方案。

[juicechu]

另外 npm start 还要加上 --reset-cache 参数，如果不是 .babelrc 修改不生效

[bang88]

可以去提Issue... 经常收到这里的邮件. 😢

[huyansheng3]

用的 fis 编译，不支持 webpack resolve.extention 这种配置，如何解决 require 时读取 js 而不是 web.js 的问题呢？还是期望后续能编译出两份库！ @afc163

[yyh1102]

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

[weijianfeng]

是不是只有入口的js文件引用 antd的时候，需要import Button from 'antd-mobile/lib/button'
其他页面正常做就行了？

[paranoidjk]

close because of https://github.com/ant-design/ant-design-mobile/issues/1235.

There will be no .web in antd-mobile 2.0

[ChaoyaoYe]

找不到 antd-mobile：接入 babel-plugin-import，解决没有 main 入口文件的问题。
或者不再推荐 import { Button } from 'antd-mobile'; 的写法，直接 import Button from 'antd-mobile/lib/button';
——————————————————————————————————————
一开始有个问题 按照上面你说的解决了 可是随之有个新问题
import Button from 'antd-mobile/lib/button';
这样之后 Button 组件式一个函数起作用了， 可是样式没被引入，需要加什么？
我们项目搭建用的是 gulp+webpack+react+ant design mobile（这个希望加进来）