react配置antd按需加載的使用
我目前使用的antd版本是2.13。現(xiàn)在最新的是3.0.1。
腳手架工具就是create-react-app。創(chuàng)建完成項(xiàng)目后，需添加配置，執(zhí)行yarn eject 也就是打開(kāi)配置的文檔。
然后安裝第三方依賴yarn add babel-plugin-import --save-dev
找到config文件夾。里面有2個(gè)配置文檔，
webpack.config.dev.js和webpack.config.prod.js
添加配置時(shí)一定要保持文檔的一致性。我就是犯了錯(cuò)誤，值配置了開(kāi)發(fā)的沒(méi)有配置正式文檔導(dǎo)致錯(cuò)誤。
首先打開(kāi)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)文章
詳解使用create-react-app快速構(gòu)建React開(kāi)發(fā)環(huán)境
這篇文章主要介紹了詳解使用create-react-app快速構(gòu)建React開(kāi)發(fā)環(huán)境,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
React中的Props類型校驗(yàn)和默認(rèn)值詳解
這篇文章主要為大家詳細(xì)介紹了React中的Props類型校驗(yàn)和默認(rèn)值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
本篇文章主要介紹了淺談React 服務(wù)器端渲染的使用，React是最受歡迎的客戶端 JavaScript 框架，在本教程中，我們將逐步向您介紹服務(wù)器端的渲染示例2018-05-05
這篇文章主要介紹了React之echarts-for-react源碼解讀,echarts-for-react的源碼非常精簡(jiǎn)，本文將針對(duì)主要邏輯分析介紹，需要的朋友可以參考下2022-10-10
React星星評(píng)分組件的實(shí)現(xiàn)
評(píng)分插件在購(gòu)物的應(yīng)用中經(jīng)?？梢钥吹玫?，但是用著別人的總是沒(méi)有自己寫(xiě)的順手，本文就使用React實(shí)現(xiàn)星星評(píng)分組件，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了React中的不可變值的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用react.js，感興趣的朋友可以了解下2021-04-04
React 數(shù)據(jù)獲取與性能優(yōu)化詳解
這篇文章主要為大家介紹了React 數(shù)據(jù)獲取與性能優(yōu)化方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了React JSX基礎(chǔ)語(yǔ)法教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
react組件封裝input框的防抖處理的項(xiàng)目實(shí)現(xiàn)
本文主要介紹了react組件封裝input框的防抖處理的項(xiàng)目實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了React中常見(jiàn)的三種路由處理方式該如何選擇,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01