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