ant design 配置按需加載

使用

create-react-app

建立一個 react 項目，并安裝

antd

。根據文檔需要下載下傳下面幾個插件

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

。

1. 安裝插件

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

2. 更改

   package.json

   檔案

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

   也就是說，把

   "script"

   下的

   react-scripts

   全部改成

   react-app-rewired

3. 在項目根目錄建立一個

   config-overrides.js

   用于修改預設配置

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

   把上面代碼拷貝到該檔案即可。
4. 重新啟動項目

   npm run start

5. 使用

   import { Button } from 'antd'
   
   <div>
   	<Button>Button</Button>
   </div>