create-react-app 项目中使用antd-mobile（按需引入）react-app-rewired2.*

1.安装antd-mobile

yarn add antd-mobile

2.入口页面（index.html）设置

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>react</title>
    <script src="%PUBLIC_URL%/common/fastclick.js"></script>//我把fastclick放到了本地项目里
    <script>
      if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded',function () {
            FastClick.attach(document.body)
          },false)
      }
      if (!window.Promise) {//es6-promise.min.js我也放在里本地项目里
        document.writeln('<script src="%PUBLIC_URL%/common/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

3.index.js里引入样式

import 'antd-mobile/dist/antd-mobile.css'

4.按需引入

安装以下依赖： yarn add react-app-rewired customize-cra babel-plugin-import --dev

react-app-rewired2.* 以后，不支持injectBabelPlugin的方式，所以需要安装customize-cra。

5.在项目根目录创建config-overrides.js文件并写入以下代码：

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
    }),
);

6.修改package.json文件中的scripts：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"
  }

7.组件中使用：

import { Button } from 'antd-mobile'

项目重新启动就可看到效果了。