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

 官方文档 戳这里

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

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

 

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。

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

 

package.json

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

原来的启动：

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

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

import {Button} from 'antd';

<Button type="primary">button</Button>

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

 

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