create-react-app 项目中使用antd-mobile（按需打包引入 组件JS / CSS）

在使用 create-react-app 创建项目使用 antd-mobile 按需引入组件js 和对应的 css样式，有两种方式：

1. 利用 babel-plugin-import ，这个需要你利用 .babelrc 文件，配置babel插件；[https://mobile.ant.design/docs/react/introduce-cn] ；官网【按需引入】这里有此方法的配置
2. 第二种，是需要修改 package.json文件 和 config-overrides.js文件 ；我就是用这种方法配置的；[https://mobile.ant.design/docs/react/use-with-create-react-app-cn]

1、安装 antd-mobile 运行依赖

cnpm install antd-mobile -S

---

2、安装 react-app-rewired / customize-cra / babel-plugin-import 开发依赖

cnpm i react-app-rewired customize-cra babel-plugin-import -D

由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra；
而且 config-overrides.js文件 文件的配置也不同；

---

3、在项目根目录创建一个 config-overrides.js 文件并进行如下配置

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

---

4、修改 package.json 文件中的 scripts 如下：

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  }

---

5、组件中引入方式

就 不再需要 引用关于 Ant Design Mobile 中所有或者组件的样式，用哪个组件直接引入就行，例如；

//例如：想引用 Button 组件及样式
import { Buttom } from 'antd-mobile'