React 使用 antd 实现按需加载
- 使用到的第三方库:
- craco
- babel-plugin-import
- 实现代码:
- 在craco安装成功后,在项目根目录下新建一个配置文件即 ‘craco.config.js’
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | const CracoLessPlugin = require( 'craco-less' ); module.exports = { babel:{ // 装饰器。 plugins:[ // 实现按需引入 [ 'import' , { 'libraryName' : 'antd' , 'libraryDirectory' : 'es' , 'style' : 'css' //因为设置为true变成了less, 故制定为css } ] ] }, plugins: [ // 更改主题色 { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { javascriptEnabled: true , modifyVars: { '@primary-color' : 'red' }, } } } }, ] }; |
- 直接使用antd中的组件即可。
如果在npm i @craco/craco 或者 npm i babel-plugin-import 时报错 Could not resolve dependency: peer ... 推荐使用 --legacy-peer-deps 进行修复
即 npm i --legacy-peer-deps @craco/craco,这种方式解决依赖冲突,不会覆盖已有的
使用 npm i --force @craco/craco 强制从remote更新,并覆盖
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix