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 中的組件，即可實現按需加載。