在react中使用 antd 做按需加载以及遇到的错误

第一：下载 antd 的包

yarn add antd

常规操作是直接引入包然后使用：

import { Button } from 'antd'
import 'antd/dist/antd.css';

但是这样就把所有的样式都引用进去了，这就不完美了呀。

于是开始做按需加载的部分

首先，做按需加载配置：

下载包

yarn add react-app-rewired customize-cra babel-plugin-import

然后配置文件，在根目录下新建一个    config-overrides.js 

在里面配置内容：

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

module.exports = override(
  // 针对antd实现按需打包：根据import 来打包（使用babel-plugin-import）
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'   //自动打包相关的样式
  })
)

然后到 package.json 文件中把 scripts 里面的内容换成下面的：

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

然后要使用antd组件的时候，直接引用就可以，不用在引用样式。

但是，这时候问题来了

当我引用完以后，使用 npm start 开启项目的时候，出现了一个错误

Error: Cannot find module 'react-dev-utils/crossSpawn'

具体错误是这样的

 

最后发现，是react-scripts 的版本过低

重新下载这个包，问题解决

 yarn add react-scripts

借鉴：https://www.cnblogs.com/daixixi/p/11782831.html