create-react-app中按需加載antd

使用create-react-app腳手架建立出來的react項目，他的配置項是隱藏的，若是想要修改原始的配置項，須要npm run eject,可是這個操做是不可逆的，通常狀況下咱們不會去直接修改他的原始配置項。

那麼若是我想在用create-react-app腳手架建立的項目中使用antd design 官方推薦的按需加載要怎麼添加本身的配置項呢？此時咱們能夠用 react-app-rewired 來實現。

第一步：安裝antd按需加載的插件babel-plugin-import

npm install babel-plugin-import --save-dev

第二步：安裝react-app-rewired

$ npm install react-app-rewired --save-dev

react-app-rewired是一個再配置的工具。安裝完以後在根目錄新建一個config-overrides.js的文件，在這個配置文件中新增長本身的自定義配置，能夠實如今不eject的狀況下自定義配置。

第三步：安裝customize-cra

npm install customize-cra --save-dev

使用customize-cra要確保先安裝了react-app-rewired。
接下來就能夠來配置按需加載了。
首先在項目的根目錄下新建一個config-overrides.js文件，接下來在這個文件中寫咱們本身的配置

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

以後在組件中測試

import React, { Component } from 'react';
import { Button } from 'antd';
class Test extends Component {
    render() {
        return (
            <div>
                <Button type="primary">點擊</Button>
            </div>
        )
    }
}
export default Test;

這樣就能夠實現按需加載antd的組件，而且無需手動引入樣式了。