缘由

• 若不配置它的话，项目打包时会将整个antd库打包
• 如何实现打包时按需从antd中引入组件以及样式 ？
  • antd3.x官方配置方法
  • 执行流程
    • 1 . react-app-rewired start
    • 2 . 执行config-overrides.js，它通过babel-plugin-import去覆盖底层的webpack配置，从而达到按需打包（不用主动引入样式了）的功能
• 如何自定义主题颜色？
  • antd4.x官方配置方法
• 但是react官网没有两个结合的例子，然后笔者不太懂webpack的配置，经过查阅资料和博客后终于通过craco将按需打包和自定义主题颜色结合配置成功了
  • 强烈推荐此文章：使用 craco 配置基于 create-react-app 的开发环境
• 下面是笔者记录配置过程的笔记

配置步骤

 1. yarn add antd -S | yarn add antd
 2. yarn add @craco/craco craco-less babel-plugin-import -D 
 3. react-app的根目录创建craco.config.js

const CracoLessPlugin = require('craco-less')
const path = require('path')

const pathResolve = pathUrl => path.join(__dirname, pathUrl)

module.exports = {
  webpack: {
  // 配置webpack的路径别名，如：@代表src文件夹
    alias: {
      '@@': pathResolve('.'),
      '@': pathResolve('src'),
      '@assets': pathResolve('src/assets'),
      '@common': pathResolve('src/common'),
      '@components': pathResolve('src/components'),
      '@hooks': pathResolve('src/hooks'),
      '@pages': pathResolve('src/pages'),
      '@store': pathResolve('src/store'),
      '@utils': pathResolve('src/utils')
    }
  },
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', style: true }],
    ]
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
      	// 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {'@primary-color':'orange'},
            javascriptEnabled: true
          }
        }
      }
    }
  ]
}

4. 修改package.json的配置
	改用5000端口，打包时不生成map文件

  "scripts": {
      "start": "set PORT=5000 && craco start",
      "build": "set GENERATE_SOURCEMAP=false && craco build",
      "test": "craco test",
      "eject": "react-scripts eject"
    }

5. 配置vscode的路径补全，在根目录创建jsconfig.json并填写如下内容（可选）

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@@/*": ["./*"],
      "@/*": ["src/*"],
      "@assets/*": ["src/assets/*"],
      "@common/*": ["src/common/*"],
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      "@store/*": ["src/store/*"],
      "@utils/*": ["src/utils/*"]
    },
    "experimentalDecorators": true
  },
  "exclude": ["node_modules", "build"]
}

5. 直接在App.jsx中测试

import React, { Component } from 'react'
import { Button } from 'antd'


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

6. yarn start（注意每次修改配置后，需要重新yarn start运行）

• 最后再次感谢此文章的作者，让我解决了问题：使用 craco 配置基于 create-react-app 的开发环境

2021年3月3更新

"dependencies": {
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
  "antd": "^4.13.0",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-scripts": "4.0.3",
  "web-vitals": "^1.0.1"
},
"devDependencies": {
  "@craco/craco": "^6.1.1",
  "babel-plugin-import": "^1.13.3",
  "craco-less": "^1.17.1"
}

• 上述是笔者使用的环境