react-app-rewire-antd-starter-config

An override-config for using react-app-rewired 2.0+ with Antd, react-hot-loader, PostCSS and more

基于 react-app-rewired 2.0+ 的 antd 项目初始化配置

⚠️ This config can NOT fit the version of create-react-app lower than 2.0

Motivation

After rewiring a create-react-app project, we have to ovrride much config to meet our customized needs. Painfully, the same work is repeated every time when you initialize a rewired project. Thus, why not importing a ready-to-go config directly?

Features

• support react-hot-loader
• support CSS Modules(enable CSS modules without any special extension)
• support all features of postcss-preset-env(stage: 0)
• add support for Antd and Lodash to import components on demand by default
• add support for using .eslintrc.json file to customize eslint by default
• add support for using '@' as root directory by default

Preparation

1 ) Install create-react-app 2.x / 3.x

2 ) Install react-app-rewired 2.x

3 ) Install react-app-rewire-hot-loader

1yarn add -D react-app-rewire-hot-loader
2
3# If you don't already, you also need
4yarn add react-hot-laoder

Install

1yarn add -D react-app-rewire-antd-starter-config

Usage

In the config-overrides.js of the root of your project you created for react-app-rewired add this code:

1const rewireDefaultConfig = require('react-app-rewire-antd-starter-config')
2
3module.exports = (config, env) => {
4  // ...other rewires
5  return rewireDefaultConfig(config, env)
6}

E.g.

1// CSS modules without extension
2import * as styles from './example.css'
3
4// import on demand
5import { Button, Table } from 'antd'
6import { cloneDeep, pickBy } from 'lodash'
7// use '@' as root directory
8import Example from '@/Components/Example'
9
10const TestComponent = () => (
11  <div>
12    <span className={styles.title}>Title</span>
13    /* ... */
14  </div>
15)

Enjoy coding!

LICENSE

MIT