版本介绍
在react中使用antd,相关版本如下:
"react": "^18.2.0",
"antd": "^4.23.5",
"babel-plugin-import": "^1.13.5",
"css-loader": "^6.5.1",
"webpack": "^5.64.4",
如果版本不一致,相关配置可能失效或者报错。
使用antd
这部分可以直接按照antd官方文档的步骤完成
https://ant.design/docs/react/use-with-create-react-app-cn
指令和相关配置列举如下:
npm i antd
在/src/index.js
中引入antd的全局样式:
import 'antd/dist/antd.less';
继续安装插件:
npm i @craco/craco
npm i craco-less
在根目录下创建craco.config.js
文件,该文件是对react
做一些自定义配置,
还可以自定义antd样式主题。
当前配置如下:
/**
* craco的作用是 在不用eject暴露react配置的情况下,对react进行各种配置。
* 用于替代eject的暴露文件,作用和eject暴露的配置文件相同。
* 使用了craco后,即使使用了eject暴露文件进行配置,也是无效的
* 因为craco的配置,会覆盖react原有配置,也会覆盖eject中的配置。
*/
const CracoLessPlugin = require('craco-less');
process.env.PORT = 3001; // 设置启动时的端口为3001
process.env.BROWSER = "none"; // npm start时禁止自动启动浏览器
process.env.GENERATE_SOURCEMAP = false; // npm run build打包时,不再生成mapsource文件
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1890ff' }, // 全局默认颜色
javascriptEnabled: true,
},
},
},
},
]
修改package.json
文件:
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
此时,引入antd的组件,就可以用了。
// App.js
import React from 'react';
import { Button } from 'antd';
const App = () => {
return <>
<Button type="primary">Button</Button>
</>
}
export default App;
按需加载
按需加载分为js的按需加载和css样式的按需引入。
js按需加载
js这块,默认就是按需加载的,不需要特殊处理,官方文档有明确说明。
想用哪个组件,直接import
引入使用即可。
css按需引入
以上操作,需要在/src/index.js
中引入antd的less样式,才会让组件样式生效。
import 'antd/dist/antd.less';
但是,这样引入的是antd的全部样式,不管你需不需要,所有样式都会被引入。
这样会导致加载变慢,打包时也会产生不必要的css代码。
所以,就需要按需引入样式。
此处有至少5种方法,这里我列举出一种最常用、最简单的配置。
安装:
npm i babel-plugin-import
修改craco.config.js
配置为:
/**
* craco的作用是 在不用eject暴露react配置的情况下,对react进行各种配置。
* 用于替代eject的暴露文件,作用和eject暴露的配置文件相同。
* 使用了craco后,即使使用了eject暴露文件进行配置,也是无效的
* 因为craco的配置,会覆盖react原有配置,也会覆盖eject中的配置。
*/
const CracoLessPlugin = require('craco-less');
process.env.PORT = 3001; // 设置启动时的端口为3001
process.env.BROWSER = "none"; // npm start时禁止自动启动浏览器
process.env.GENERATE_SOURCEMAP = false; // npm run build打包时,不再生成mapsource文件
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1890ff' },
javascriptEnabled: true,
},
},
},
},
],
babel: {
plugins: [
[
"import",
{
"libraryName": "antd", // 表示要做antd的按需引入
"libraryDirectory": "es",// antd用es的模块化规范
"style": true //设置为true即是less
}
]
]
}
};
此时就不需要引入antd样式了,把引入的样式注释或者删除即可:
重新启动npm start
。不出意外,就可以正常使用了。