Ant Design(React常用UI组件库)的按需引入及自定义主题配置

下面拓展一下Ant Design(UI组件库)的一下高级配置pa~~

链接参考：https://3x.ant.design/docs/react/use-with-create-react-app-cn

在create-react-app脚手架使用中，我们经常会全局引入一个组件库的样式

安装和初始化 一个项目

yarn create react-app antd-demo

自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry（要速度的同学可以配置个镜像哦）。

启动项目：

cd antd-demo
yarn start

此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

接下来我们进行安装antd

yarn add antd

接下来修改src/App.js中的文件

import React, {Component} from 'react';
import {Button} from "antd";
import 'antd/dist/antd.css';   // 此处是引入antd样式


class App extends Component {
    render() {
        return (
            <div>
                <Button type="primary">Primary Button</Button>
            </div>
        );
    }
}

export default App;

现在的你应该能看到页面上已经有了 antd 的蓝色按钮组件了。

按需引入：

但是，重点来了实际开发中还有一些优化的空间，比如无法进行主题配置，而且上面的例子加载了全部的 antd 组件的样式（gzipped 后一共大约 60kb）

此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。

yarn add react-app-rewired customize-cra

跟随着的就是打开你的package.json文件，找到以下代码片段对内容进行更改

"scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"   
}

 更改后：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"   //此处不用更改哦
},

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  return config;
};
（此处代码还什么都没有干哦）

使用 babel-plugin-import#

注意：antd 默认支持基于 ES module 的 tree shaking，js 代码部分不使用这个插件也会有按需加载的效果。

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理）

安装：

yarn add babel-plugin-import

修改 config-overrides.js 文件：

const { override, fixBabelImports } = require('customize-cra');


module.exports = override(
    fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
);

现在可以移除前面在 src/App.css 里添加的 ：

import 'antd/dist/antd.css'

最后重启 yarn start 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的警告信息。关于按需加载的原理和其他方式可以阅读这里。

自定义主题

按照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式

yarn add less less-loader

修改config-verrides.js如下：

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions:{
            javascriptEnabled: true,    // 允许使用js去修改less
            modifyVars: { '@primary-color': 'orange' },  //代表要修改那个变量
        }
    }),
);

修改完毕重启项目（yarn start），如果看到一个橙色的按钮就说明配置成功了。

如果启动项目有以下的错误

TypeError: this.getOptions is not a function的解决办法

 解决的方法如下：

npm：

npm uninstall less-loader

npm install less-loader@6.x

yarn：

yarn remove less-loader

yarn add less-loader@6.x

再次重启项目（yarn start），如果看到一个橙色的按钮就说明配置成功啦~~。

ps:(可能是版本过高导致，一般less-loader安装使用有报错的时候,大多数是版本导致的问题哦，大多数~)

[第一次写博客多多见谅，如有错误欢迎指正哦~~]，一枚刚进互联网圈子的前端实习生~~，接受各位大佬的指导。