react使用Ant Design

官网针对 webpack 和按需加载配置的说明：https://mobile.ant.design/docs/react/use-with-create-react-app-cn

---

安装

1. npx create-react-app
2. npm install antd-mobile --save
3. npm install react-app-rewired customize-cra --save-dev
4. 组件引入实例：import { Button } from 'antd-mobile'
   （如果组件内使用后只有结构没有样式，可以直接在index.js中引入css文件）

---

React 官方脚手架工具 Create-react-app 用于快速创建 React 应用，但依旧有局限性，我们根据项目需求需要对 Create-react-app 的配置进行修改。这里针对引入 Antd 的两种配置方式进行配置。

react-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案)

1. yarn add react-app-rewired
2. 由于新的 react-app-rewired@2.x 版本的关系，还需 yarn add customize-cra
3. (如果不用 2.0 ，不安装 customize-cra，可以降版本 yarn add react-app-rewired@2.0.2-next.0)
4. 修改 package.json

/* package.json */
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test --env=jsdom",
}

5. npm install babel-plugin-import --save-dev
6. 根目录创建 config-overrides.js ，用于修改 webpack 配置和按需加载

config-overrides.js

如果想要更多 webpack 配置修改：https://github.com/arackaf/customize-cra

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const path = require('path')

module.exports = override(
  // 每一个参数就是一个插件

  // fixBabelImports 用来配置组件
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
  
  // 路径别名
  addWebpackAlias({
    ['@']: path.join(__dirname, 'src'),
    ['pages']: path.join(__dirname, 'src/component/pages'),
    ['common']: path.join(__dirname, 'src/component/common'),
    ['store']: path.join(__dirname, 'src/store'),
    ['utils']: path.join(__dirname, 'src/utils'),
    ['assets']: path.join(__dirname, 'src/assets'),
  })
)