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的组件,并且无需手动引入样式了。

    原文作者:xueyanLi
    原文地址: https://segmentfault.com/a/1190000019781597
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞