react配置antd按需加載的使用
我目前使用的antd版本是2.13。現(xiàn)在最新的是3.0.1。
腳手架工具就是create-react-app。創(chuàng)建完成項(xiàng)目后，需添加配置，執(zhí)行yarn eject 也就是打開配置的文檔。
然后安裝第三方依賴yarn add babel-plugin-import --save-dev
找到config文件夾。里面有2個(gè)配置文檔，
webpack.config.dev.js和webpack.config.prod.js
添加配置時(shí)一定要保持文檔的一致性。我就是犯了錯(cuò)誤，值配置了開發(fā)的沒有配置正式文檔導(dǎo)致錯(cuò)誤。
首先打開webpack.config.dev.js
在147行添加這段代碼
plugins: [
['import', [{ libraryName: "antd", style: 'css' }]],
],
同樣的配置在webpack.config.prod.js里面也需要添加。
這樣就真正實(shí)現(xiàn)了按需加載，就不會(huì)再報(bào)黃色的警告。
還有第二種簡(jiǎn)單的方式，就是在package.json里面直接添加這行代碼。當(dāng)然前提也是需要先安裝依賴：yarn add babel-plugin-import --save-dev
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了React Native懸浮按鈕組件的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2018-04-04
react16+antd4 RangePicker組件實(shí)現(xiàn)時(shí)間禁選示例
這篇文章主要為大家介紹了react16+antd4 RangePicker 時(shí)間禁選示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
react實(shí)現(xiàn)動(dòng)態(tài)增減表單項(xiàng)的示例代碼
在做項(xiàng)目的時(shí)候,甲方給的信息有限,網(wǎng)頁(yè)的備案信息寫成固定的,之后驗(yàn)收的時(shí)候,甲方要求把這個(gè)備案信息寫成動(dòng)態(tài)的,可以自增減,下面通過(guò)實(shí)例代碼給大家介紹react實(shí)現(xiàn)動(dòng)態(tài)增減表單項(xiàng)的示例,感興趣的朋友跟隨小編一起看看吧2024-05-05
React 作為當(dāng)下最為流行的前端開發(fā)框架之一，使用它可以快速構(gòu)建大型 Web 應(yīng)用，加上其出色的性能表現(xiàn)，使得眾多互聯(lián)網(wǎng)公司對(duì)它格外地青睞，這篇文章主要介紹了React運(yùn)行機(jī)制2022-11-11
react使用websocket實(shí)時(shí)通信方式
這篇文章主要介紹了react使用websocket實(shí)時(shí)通信方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫的核心算法, 真針Fiber的一個(gè)重要的核心概念Fiber Node,這次主要的研究對(duì)象是： 如何從使用者/學(xué)習(xí) 者角度 在js 代碼上 拿到fiber 樹結(jié)構(gòu)的信息,,需要的朋友可以參考下2024-04-04
在react中使用highlight.js將頁(yè)面上的代碼高亮的方法
本文通過(guò) highlight.js 庫(kù)實(shí)現(xiàn)對(duì)文章正文 HTML 中的代碼元素自動(dòng)添加語(yǔ)法高亮，具有一定的參考價(jià)值，感興趣的可以了解一下2022-01-01
React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法，主要發(fā)生在render階段，調(diào)和算法并不是一個(gè)特定的算法函數(shù)，而是指在調(diào)和過(guò)程中，為提高構(gòu)建workInProcess樹的性能，以及Dom樹更新的性能，而采用的一種策略，又稱diffing算法2021-12-12
這篇文章主要介紹了react 組件傳值的三種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04