react项目中按需加载 ant design

一、安装babel插件：`babel-plugin-import``

• npm install babel-plugin-import --save -dev

二、安装 react-app-rewired

• npm install react-app-rewired --save -dev
• react-app-rewired是一个再配置的工具。安装完之后在根目录新建一个config-overrides.js的文件，在这个配置文件中新增加自己的自定义配置，可以实现在不eject的情况下自定义配置。

三、安装 customize-cra

• npm install customize-cra --save -dev
• 注意在安装 customize-cra 之前要要先安装react-app-rewired
• 在我们创建的 config-overrides.js的文件中添加如下代码

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

四、修改 package.json 文件

• 将项目 package.json 文件中原本scripts中的代码：

  "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 --env=jsdom",
      "eject": "react-scripts eject"
    },
  

五、安装 ant design

• npm install antd --save
• 在组件中直接导入ant design 中的组件，即可实现按需加载。