关于Antd的全局安装和按需加载

2021-10-14

Antd 使用

官方网站
全局安装
- 安装命令：npm install antd --save
- 引入css/less文件：import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'（我一般是在index.js里面引入，这样就不用每个文件都重新引入了）
- 在文件开头引入所需要的组件，例如：
  
  import { Form, Input, Button} from 'antd';
按需加载
- 手动按需加载
  - 不用在index.js文件引入css/less
  - 在文件内直接引入所需的组件和对应的css/less，例如：
  import Button from 'antd/es/button'; import 'antd/es/button/style/css';
- 通过配置文件按需加载
  - 执行命令npm run eject ：拉取react配置文件,完成后会发现多了config和script文件夹
  - 执行命令npm install babel-plugin-import --save-dev
  - 打开根目录下package.json文件，找到"babel"，修改代码：
    
    "babel":{ "presets":[ "react-app", ], "plugins":[ "import", { "libraryName":"antd", "libraryDirectory":"es", "style":"css" } ] }
  - 在文件内只需要引入需要的组件即可，例如：
    
    import {Button,Input} from 'antd';
【关于Antd的全局安装和按需加载】遇到的问题
- 如果文件被修改了，无法运行npm run eject命令
解决方案
- 去文件目录下把隐藏的git文件删除，重新执行命令

推荐阅读

上一篇：如何通过云效Projex让项目协作任务不再千篇一律

下一篇：程序员反卷指南 - 打工人也需要生活