Ant Design of React的安装、按需加载

蔚落 2022-11-06 09:57 416阅读 0赞

[官方文档][Link 1] 戳这里

Ant Design 是ui组件库，具体简介看官网。

antd需要在React项目内安装，意思就是需要先创建好项目，可以戳[查看如何创建项目][Link 2]，或者查看官网。在项目创建好之后，进行安装。

## Antd安装 ##

这里需要进行项目内安装，有三种方式。

第一种npm：

npm install antd --save

第二种cnpm：

cnpm install antd --save

第三种yarn：

yarn add antd

这三种方式，任选一种即可。

引入样式：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

实例（官网的例子）：

import { DatePicker } from 'antd';
    
    ReactDOM.render(<DatePicker />, mountNode);

上述的操作等于：全部引入antd组件。

而下面的写法是：只引入我们需要的插件，需要什么导入什么即可。

## 按需加载 ##

在Ant design内通过react-app-rewired配置按需加载，可以拓展webpack的配置，类似vue.config.js，因为在项目内打开配置文件需要运行  npm run eject  打开文件，才可以进行配置，但是这个过程是不可逆的，所以不能直接修改配置文件。

npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save

需要注意的是类似于config.js文件，需要在项目根目录下创建  config-overrides.js 文件，文件名称不可修改，名称是固定的。

### config-overrides.js ###

react-app-rewired启动的时候会先在 config-overrides.js 文件内读东西，读取你需要加载进来的东西，然后对webpack的默认文件进行一个整合，最后才会启动服务器。

config-overrides.js文件内的写法是NodeJs的 CommonJs的写法，不是ES6的写法。

看一下按需加载antd时，需要在config-overrides.js内配置，如下：

const {injectBabelPlugin} = require('react-app-rewired')
    
    module.exports = function override(config,env){
        //antd的按需加载的写法
        config = injectBabelPlugin([
            'import',
            {libraryName:'antd',libraryDirectory:'es',style:'css'}
        ],config);
        return config;
    }

简单理解一下：

这里先引入 react-app-rewired ，变量名为 injectBabelPlugin 。这里将这边写的东西作为模块module导出，同样，导出也是使用NodeJs的CommonJs的导出语法，这里要导出一个名叫 override的函数。传入两个参数，config和env：config是需要进行修改的对象。

具体修改：使用 injectBabelPlugin 进行babel插件的导入，在使用injectBabelPlugin时，需要传入两个参数，第一个是一个数组，第二个是config。这里呢，将webpack默认的配置作为第二个参数放到config内，将需要加载的配置放到第一项内，在injectBabelPlugin 内产生一个融合后的配置文件返回。 最重要的一点：合并完的config一定要return。

**作用**

是针对组件内的东西，按需导入，只把你要的组件和需要的css需要的导进来。

配置项的内容（数组内的内容）

先把配置部分的内容拿出来：

config = injectBabelPlugin([
        'import',
        {libraryName:'antd',libraryDirectory:'es',style:'css'}
    ],config);

可以看到内部数组的配置内容，这里的import 是作为刚才导入的   babel-plugin-import 插件的名称，libraryName指定导入哪个库的名称，这里导入的是antd，具体的位置是node\_modules下的antd。

![20210311000149737.png][]

![20210311000108600.png][]

同时要指明他从哪个目录去导，libraryDirectory 是es的意思是从es的目录去导。同时将css从style文件夹内一并导出。如果安装ant design 成功，会在node\_modules内出现这个文件，否则是未安装或者安装失败。

![20210311000914144.png][]

### package.json ###

上述配置完成之后，需要修改package.json文件的启动项，因为引入了react-app-rewired：

原来的启动：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

引入 react-app-rewired 后，需要将react-scripts替换为react-app-rewired，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1][]

现在配置修改完成后，具体组件的使用，如下例子，在组件内直接引用即可：

import {Button} from 'antd';
    
    <Button type="primary">button</Button>

在这里  \{Button\}  很容易被误解为解构，不是的。这里antd导出是具名导出的方式，而需要在导入的时候也进行具名导入（ES6内的具名导入导出）。

在修改完package.json文件后，必须要重启项目。

[Link 1]: https://ant.design/docs/react/introduce-cn
[Link 2]: https://blog.csdn.net/a18792627168/article/details/114108451
[20210311000149737.png]: /images/20221023/d98b17eb535444c0b36d1bf156f9683a.png
[20210311000108600.png]: /images/20221023/e99d33c89b544a99a67b9bbaa1c2d30a.png
[20210311000914144.png]: /images/20221023/00ad06b79ace46fa9f5feeb086339f37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221023/fc1729f2c5c14968aef5f6ccf5aa6150.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1]: /images/20221023/47fa3902ce934b88a79746dce5d5c917.png