create-react-app 安装使用 antd（按需加载）

create-react-app 安装使用 antd（按需加载）

官网的安装教程：antd安装教程
虽然按需加载有点复杂，但是在真正的开发中是为了优化性能，提升加载速度都是有必要的。
我的是 antd 前一个版本的写法，与现在官网的写法有所不同。

• 创建项目。我用的是 npx create-react-app 项目名称
• 安装 antd yarn add antd --save（此处我采用的是 yarn 安装，你们也可以用 npm、cnpm）
• 安装相关依赖 yarn add react-app-rewired customize-cra babel-plugin-import --save
• 接着还需要安装 less 执行命令 yarn add less less-loader --save
• 在项目下，与 src 文件夹同级（与 package.json 同级）创建一个 config.overrides.js 文件，在文件内敲入以下代码。

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

module.exports = override(
  fixBabelImports("antd", {
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true
    },
  })
);

• 打开 package.json 文件，找到 scripts 对象，修改代码。（将 start 、 build、test 的值 react-scripts 修改为 react-app-rewired 。具体如下

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

• 接下来就是如何使用按需加载了。
• 在 src 文件夹下，App.js 文件内输入以下代码

import React from 'react';
import {
  Button,
  Input
} from 'antd'

function App() {
  return (
    <div className="AppLess">
      <Input placeholder="请输入" />
      <Button>按钮</Button>
    </div>
  );
}

export default App;

运行结果：

出现 antd 的样式了。成功了。

• 由于安装了 less 和 less-loader 还有 config.overrides.js 的配置。这样已经可以使用 less 了。
• 在 App.js 同级下新建 App.less 。输入以下代码

.AppLess {
  width: 50%;
  height: auto;
  margin: 0 auto;
}

• 接着在 App.js 文件内，加入以下代码，导入 App.less 样式

import './App.less'

查看结果：