React項目中antd的按需引入與自定義主題

一.React中使用antd

1.下載antd包

   npm i antd -S

2.按需引入

//App.jsx文件
import {Button} from 'antd' //引入按鈕組件
import {WechatOutlined, ShoppingCartOutlined } from '@ant-design/icons'; //icon圖標庫需要另外引入
import 'antd/dist/antd.css' //引入antd的所有樣式

3.使用組件

export default class App extends Component {
    state = {
        size: 'large',
    };

    render() {
        return (
            <div>
                App...
                <Button type="primary">Primary Button</Button>
                <button>點我</button>
                <Button type="primary" icon="search">
                    Search
                </Button>
                <Button icon="search">Search</Button>
                <WechatOutlined />
                <Button type="primary" icon="download" size={this.state.size}>
                Download
                </Button>
                <ShoppingCartOutlined />
          </div>
        )
    }
}

4.效果

 

 

二.修改react默認配置

 打開一個react項目，我們看到的 create-react-app 生成的默認目錄結構如下

 

 沒有webpack.config.js配置文件，因為項目為了防止我們胡亂修改導致項目崩潰，幫我們隱藏了。如果我們想要修改webpack.config.js文件該如何呢？

方法一：

直接執行 npm run eject

但是這樣操作是不可逆的，對於熟悉webpack配置的人來說，可以隨意按照自己的需求修改配置，可以這樣操作，但是對於不了解webpack的小伙伴建議看第二種方法。

方法二：

1 下載react-app-rewired 和 customize-cra

yarn add react-app-rewired customize-cra
或者
npm i  react-app-rewired customize-cra

其中customize-cra 用於執行 config-overrides.js中的修改規則

 當customize-cra修改config-overrides.js中的規則時，需要react-app-rewired 用於使用新規則（react-app-rewired 替換 react-scripts）啟動腳手架，此時需要重新配置package.json文件（見第3步驟）

2.在項目根目錄創建一個 config-overrides.js 用於修改默認配置。

 

//config-overrides.js
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

 

在這個文件的方法中可以修改webpack配置，又不會破壞react項目的原有配置

3.修改package.json文件

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

4.重新啟動項目，配置即可生效

 

三.antd樣式的按需引入

1.原因：項目中只是使用了antd中的部分組件，但是卻加載了全部的 antd 組件的樣式（gzipped 后一共大約 60kb），這樣造成的結果是項目打包后體積過大，所以此時我們需要對 create-react-app 的默認配置進行自定義

2.按需引入操作：

說明：在基於上一節使用方法二修改webpack的基礎上進行配置

2.1 安裝babel-plugin-import ：是一個用於按需加載組件代碼和樣式的 babel 插件（原理），現在我們嘗試安裝它並修改 config-overrides.js 文件。

yarn add babel-plugin-import
或者
npm i  babel-plugin-import

2.2修改 config-overrides.js 文件

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


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

 

2.3 移除前面在 src/App.jsx 里全量添加的 @import 'antd/dist/antd.css'; 樣式代碼

2.4 最后重啟 yarn start 訪問頁面，antd 組件的 js 和 css 代碼都會按需加載，你在控制台也不會看到這樣的警告信息

這時你能發現沒有在頁面中手動引入樣式，但是組件樣式依然存在，正常顯示。

四.自定義主題

 按照 配置主題 的要求，自定義主題需要用到 less 變量覆蓋功能。我們可以引入 customize-cra 中提供的 less 相關的函數 addLessLoader 來幫助加載 less 樣式，同時修改 config-overrides.js 文件

1.下載安裝less  less-loader

yarn add less less-loader
或者
npm i  less less-loader

2.修改文件

//配置具體的修改規則 
//config-overrides.js
 const { override, fixBabelImports, addLessLoader  } = require('customize-cra');
 const themeColor = require('./theme-color-config') 

 module.exports = override(
    fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: true,
   }),
   addLessLoader({
    lessOptions:{
        javascriptEnabled: true,
        modifyVars: { ...themeColor },
    }
   }),
 );

其中 theme-color-config.js文件也是位於根目錄下的，主要用來配置具體的主題樣式

//主題顏色配置
//theme-color-config.js
module.exports = {
    '@primary-color': '#FF0000',
    '@table-bg': '#FFC0CB',
}

可以參考 配置主題 文檔配置。

3.最后npm run start重新啟動項目即可

 

 

 

 

 

參考：https://3x.ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE

         https://www.cnblogs.com/haimengqingyuan/p/13380508.html  

       

 

按需引入——20221/2/22補充

有時候我們的create-react-app項目已經執行 npm run eject暴露config文件，這時我們應該如何按需引入呢？

首先，依然按照官網中的方法進行配制

其次，修改package.json文件結果如下：

//package.json

{
  ...
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  ......
   "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ]
    ]
  },
......
}

最后，npm run start重啟項目即可

注意：重新啟動后可能會出現有些包找不到的情況，重新下載對應的包，再重新啟動即可

參考：https://blog.csdn.net/WangQing2508/article/details/109332958