這篇文章主要介紹了React降級(jí)配置及Ant Design配置的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、靈璧ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的靈璧網(wǎng)站制作公司

React降級(jí)配置

1.使用create-react-app創(chuàng)建一個(gè)目錄

 

2.查看當(dāng)前目錄下的package.json文件中的配置

 

注意：

可以看到當(dāng)前的react-scripts是2.1.2版本，且只兼容IE11以上，所以為了更好地兼容IE瀏覽器，我們需要做降級(jí)配置

3.進(jìn)入目錄，在master分支下進(jìn)行配置（如果創(chuàng)建好的目錄中沒(méi)有.git文件，使用git init初始化目錄）

注意：

之所以要在master分支下進(jìn)行配置，是為了在下文中運(yùn)行 npm run eject

4.將原來(lái)的react-script刪除

 

5.重新安裝對(duì)應(yīng)版本(比如1.x的版本，比較穩(wěn)定的版本)

6.添加git庫(kù)（將以上做的修改添加到git庫(kù)，這也是為什么如果沒(méi)有.git文件，一定要先初始化）

7.運(yùn)行npm run eject（如果有報(bào)錯(cuò)，可以不用管，只要有ejected successfully就可以）

 

8.由于重新配置可以先刪除node-moduls，然后在 npm i重新安裝依賴

9.npm start,查看是否能運(yùn)行(可能會(huì)報(bào)錯(cuò)，解決方法再下面)

10.刪除package.json中的browserslist(因?yàn)檫@個(gè)配置是react-scripts2.x版本的，再降級(jí)以后，如果還存在，代碼運(yùn)行會(huì)報(bào)錯(cuò))

 

配置less

1.src中內(nèi)容可以都刪除，留下index.js

2.創(chuàng)建一個(gè)App.js（此時(shí)查看是否能運(yùn)行，顯示App.js的內(nèi)容）

 

3.創(chuàng)建App.less，并將文件引入到App.js中（import './App.less'）

 

4.安裝less包

 

5.進(jìn)行l(wèi)ess文件的配置，找到config中的dev文件

6.找到里面的css的配置，復(fù)制一份到css配置文件的下方，將loader中css換成less-loader以及options為以下內(nèi)容

 7.配置完選項(xiàng)，需要重啟項(xiàng)目才能生效

此時(shí)配置的less已經(jīng)生效

Ant Design 配置

1.安裝antd

2.安裝按需加載組件代碼和樣式的插件

3.在package.json的babel中配置（注意要在babel中進(jìn)行配置，不要寫(xiě)在babel外面去了）

4.測(cè)試引用button為例（先重啟）

5.配置ant中的樣式變量

以下是可以配置的樣式變量

6.除了第5條的配置的方法，還可以引入配置（新建配置文件color.js在config文件中）

7.在dev中引入colors.js，再調(diào)用

8.在prod中和dev中一樣修改less、引入默認(rèn)colors

9.最后npm run build檢查是否會(huì)出錯(cuò)

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“React降級(jí)配置及Ant Design配置的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

標(biāo)題名稱：React降級(jí)配置及AntDesign配置的示例分析
分享URL：http://chinadenli.net/article46/ihdgeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站內(nèi)鏈、網(wǎng)站制作、定制開(kāi)發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)