create-react-app 按需引入 antd-design

1. 安装和初始化

$ npm install -g create-react-app

# 注意：工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖
$ npx create-react-app my-app

$ cd my-app
$ npm start

打开 http://localhost:3000/ 访问你的应用。

2. 安装 antd

$ npm install --save antd

3. 按需加载

引入CSS形式，实际上是加载了全部的antd组件样式，再使用其中的部分组件样式，比较消耗性能。对create-react-app的默认配置进行自定义，使antd按需加载。

3.1

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

$ npm install react-app-rewired customize-cra --save-dev

/* package.json */
"scripts": {
     
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test --env=jsdom",
}

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

// 按需加载组件代码和样式的babel插件
$ npm install babel-plugin-import --save-dev

/* config-overrides.js */
const {
      override, fixBabelImports } = require("customize-cra");
module.exports = override(
  fixBabelImports("import", {
     
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css"
  })
);

3.3 引入antd的按钮组件：

import {
      Button } from 'antd-mobile'

4. antd-mobile

如果你按需引用的是antd-mobile(移动端)，需要做如下修改

1. 安装

$ npm install antd-mobile --save

2. 修改config-overrides.js

/* config-overrides.js */
const {
      override, fixBabelImports } = require('customize-cra');
module.exports = override(
   fixBabelImports('import', {
     
     libraryName: 'antd-mobile',
     style: 'css',
   }),
 );

5.官网

Ant Design： https://ant.design/docs/react/introduce-cn
Ant Design Mobile ：https://mobile.ant.design/docs/react/introduce-cn