Ant-design-mobile: please fix official doc about using create-react-app

[roytan883]

Version

1.2.0

Environment

111

Reproduction link

https://github.com/ant-design/ant-design-mobile/issues/new

Steps to reproduce

111

What is expected?

111

What is actually happening?

222

---

在 create-react(-native)-app 中使用
中有些没有写对

1，按照官网那样配置完svg会不显示，原因是：除了配置svg-sprite-loader还需要在file-loader中排除svg，
应该是这样才对：

 exclude: [
        ...
        /\.less$/,
        /\.svg$/,
        ...
      ]

2，文档没有写依赖库的安装
yarn add --dev babel-plugin-import [email protected] less less-loader postcss-pxtorem

3，需要在webpack.config.dev.js中添加const pxtorem = require('postcss-pxtorem');

最后，官网文档根本跑不通，但是issue中的很多官方回答都是查看官网。。。。。。死循环了

[roytan883]

另外，文档关于在create-react-app使用import插件也没有写对，应该是在package.json中配置：

"babel": {
    "presets": [
      "react-app",
    ],
    "plugins": [
      [
        "import",
        [
          {
            "libraryName": "antd-mobile",
            "style": true
          }
        ]
      ]
    ]
  },

[paranoidjk]

@roytan883 can you open a pull request to help us fix it ?

[silentcloud]

@roytan883 webpack 里配置了，pkg.json 里是不用配的，而且这个也应该是要配在 webpack 里去的

https://github.com/ant-design/antd-mobile-samples/blob/master/create-react-app/config/webpack.config.dev.js#L168

[roytan883]

@silentcloud
import插件在pkg.json还是webpack里面都可以。重要的是前面写的，官网上还是没改怎么就close这个issue了呢？

另外，像这种通用插件，当然是配置到pkg.json里面去比较好，不用在dev和prod里面写两次

[paranoidjk]

@roytan883
并不赞同。配置应该收敛，分散到 pkg 和 config.json 里并不好

不用在dev和prod里面写两次

这是另一个问题，你写common就好了，自己解决复用

[roytan883]

@paranoidjk

1，按照官网那样配置完svg会不显示，原因是：除了配置svg-sprite-loader还需要在file-loader中排除svg，
应该是这样才对：

exclude: [
...
/.less$/,
/.svg$/,
...
]
2，文档没有写依赖库的安装
yarn add --dev babel-plugin-import [email protected] less less-loader postcss-pxtorem

3，需要在webpack.config.dev.js中添加const pxtorem = require('postcss-pxtorem');

这3个地方改了吗？

[paranoidjk]

file-loader是否是你自己添加的？svg不能被loader处理两遍，这个是个注意点

剩下两个问题，依赖安装和引用.... 文档也并不是按图索骥，如此一步一步事无巨细不一定有必要。

既然你发现了可以完善的，何不直接 PR 来帮忙补充呢？

[roytan883]

@paranoidjk

但是为什么react官方的create-react-app就是把公共配置都放pkg里面写呢？jest，babel和eslint都是在pkg里面配置的。

[paranoidjk]

我们并不强制要求。

文档只是介绍 how to，用户可以按自己喜欢的方式配置。

[roytan883]

@paranoidjk

file-loader是否是你自己添加的？svg不能被loader处理两遍，这个是个注意点

file-loader 是create-react-app生成就有的

剩下两个问题，依赖安装和引用.... 文档也并不是按图索骥，如此一步一步事无巨细不一定有必要。

好吧，按照官网guide文档跑不起还是用户的错了，这帖子我放这里。希望你永远不要改这个文档，看看有多少人吐槽在 create-react(-native)-app 中使用

既然你发现了可以完善的，何不直接 PR 来帮忙补充呢？

我可以发PR，只是不知道你们的PR流程是不是麻烦（之前有的项目PR一个要等很久，还要配套单元测试什么的），这里先发出来是如果你们改肯定最快，就是文档上几句的事情，早点改可以造福更多后面的新用户。

[roytan883]

@paranoidjk 你应该是没用按照在 create-react(-native)-app 中使用 一步一步操作过吧，普通人把引用包缺失错误这种小坑填完以后，知道最后的结果是什么吗？？？

是所有svg的icon都不显示，不管内置还是外部引用svg，但重点是完全没有任何warning或者error提示

@paranoidjk 你自己翻一翻issue，这种问题被几个人提了，但是你们的答案是叫别人看在 create-react(-native)-app 中使用 ，这不是坑人吗？
看看这些issue：

1320

1319

1391

新人能想到要在file-loader加一句exclude: [...,/.svg$/,....]吗？而且网页上也没写svg两次处理的问题，难道所有新人使用antd-mobile的人的正常使用流程是先逛一次issues吗？（而且还要逛issues才知道"svg-sprite-loader"必须用"0.3.1"）

[paranoidjk]

just click and see https://github.com/ant-design/ant-design-mobile/commit/28ad5ca249aec058f1db76a5f98a5cda9ef5c201 , all your problems have been fixed in doc.

[roytan883]

@silentcloud thanks

[zwjun]

@roytan883 按照你的配置好了之后，Icon可以正常显示。但是
import logo from './logo.svg';

img不显示图片了。

[silentcloud]

@zwjun 请参考 icon 使用文档 https://mobile.ant.design/components/icon/

[chuyinweilai]

@roytan883 你好，我想问下，引用包缺失这个是怎么解决的？
我只用antd-design开发过两个项目，但开发移动端，antd-mobile却一直引入不成功。因为英文很差，对于issue回答看的很吃力，官方文档也跑不通，现在的create-react-app生成的文件结构跟官方的也不一样。
每次使用

import {
  ...
} from 'antd-mobile'

引用都会报错：
'antd-mobile' does not contain an export named 'xxx'
一直没找到合适的方法，急需你的帮助……
谢谢了

[silentcloud]

现在的create-react-app生成的文件结构跟官方的也不一样

@chuyinweilai 这个原因是需要 运行一次 npm run eject 的

https://mobile.ant.design/docs/react/use-with-create-react-app-cn#使用-antd-mobile