react腳手架如何配置less和ant按需加載的方法步驟
這篇文章主要介紹了react腳手架如何配置less和ant按需加載的方法步驟，小編覺(jué)得挺不錯(cuò)的时甚，現(xiàn)在分享給大家，也給大家做個(gè)參考营袜。一起跟隨小編過(guò)來(lái)看看吧
前言
create-react-app是由React官方提供并推薦使用構(gòu)建新的React單頁(yè)面應(yīng)用程序的最佳方式,其構(gòu)建的項(xiàng)目默認(rèn)是不支持less的,需要我們手動(dòng)集成
一路捧、react腳手架搭建
1关霸、先全局安裝create-react-app(提前需要安裝node)
npm install -g create-react-app
2、然后通過(guò)create-react-app創(chuàng)建項(xiàng)目my-app
create-react-app my-app
3鬓长、最后通過(guò)cd進(jìn)入項(xiàng)目文件夾并啟動(dòng)
cd my-app
yarn start 或者 ``
4谒拴、終端出現(xiàn)如下界面表示啟動(dòng)成功，并在瀏覽器中輸入http://localhost:3000/即可看到react的初始頁(yè)面
[圖片上傳失敗...(image-eec089-1584752838969)]
二涉波、目錄結(jié)構(gòu)
|
1
2
3
4
5
6
7
|
┌─node_modules -依賴包
├─public -全局文件
├─src -項(xiàng)目文件
├─.gitignore -提交被git忽略文件目錄
├─package.json -項(xiàng)目配置文件
├─README.md -README文件
└─yarn.lock -鎖定項(xiàng)目所需的各種配置版本
|
三英上、安裝less和less-loader(less編譯器)
yarn add less less``-loader
安裝完成之后該怎么配置呢？這時(shí)需要通過(guò)webpack來(lái)配置less-loader啤覆，但是我們?cè)谏厦娴哪夸浗Y(jié)構(gòu)中似乎并沒(méi)有發(fā)現(xiàn)webpack.config.js文件苍日，這是因?yàn)槟_手架為了實(shí)現(xiàn)“零配置”，會(huì)默認(rèn)把一些通用的腳本和配置集成到 react-scripts窗声，目的是讓我們專注于src目錄下的開(kāi)發(fā)工作相恃，不再操心環(huán)境配置。同時(shí)笨觅，被其集成的腳本和配置也會(huì)從程序目錄中消失 拦耐，程序目錄也會(huì)變得干凈許多
接下來(lái)，我們就需要通過(guò)yarn eject將webpack配置暴露出來(lái)
四见剩、暴露webpack配置
執(zhí)行yarn eject
提示：執(zhí)行該命令后會(huì)把已構(gòu)建依賴項(xiàng)杀糯、配置文件和腳本復(fù)制到程序目錄中。該操作是不可逆轉(zhuǎn)的苍苞，執(zhí)行完成后會(huì)刪除這個(gè)命令固翰，也就是說(shuō)只能執(zhí)行一次
配置完成之后，我們會(huì)發(fā)現(xiàn)我們的目錄結(jié)構(gòu)中會(huì)多出兩個(gè)文件夾：
其中config文件夾羹呵，有三個(gè)關(guān)于 webpack 的配置文件：
- webpack.config.dev.js 開(kāi)發(fā)環(huán)境配置
- webpack.config.prod.js 生產(chǎn)環(huán)境配置
- webpackDevServer.config.js 開(kāi)發(fā)服務(wù)器配置
- 當(dāng) 使用 16.0 的版本之后就config 名字改了
五骂际、修改webpack配置文件*
第一步：到webpack.config.js文件中找到如下代碼，在sassModuleRegex后面加上lessRegex和lessModuleRegex變量
第二步：在下面加上這兩段代碼
六冈欢、集成Ant Design 并配置按需加載
antd：是螞蟻金服推出的一個(gè)很優(yōu)秀的react UI庫(kù)歉铝，其中包含了很多我們經(jīng)常使用的組件，對(duì)于小白學(xué)習(xí)react來(lái)說(shuō)十分友好凑耻！
1犯戏、首先需要安裝antd
yarn add antd
2、安裝完成之后我們就可以直接在代碼里使用它的ui組件了
import {Button} from 'antd'``;
import 'antd/dist/antd.css'``;
這個(gè)方法的優(yōu)點(diǎn)是比較簡(jiǎn)單拳话，不需再次配置先匪，直接加載即可，但是比較麻煩弃衍，每次載入一個(gè)新的組件都需要先載入組件呀非，再加載組件的css文件，性能較差
3、使用 babel-plugin-import 來(lái)進(jìn)行按需加載
yarn add babel-plugin-import --save-dev
4岸裙、安裝完成之后猖败，在package.json中找到babel配置項(xiàng)，然后再里面加上plugins
注意： 這里babel配置項(xiàng)是需要通過(guò)yarn eject暴露出來(lái)才會(huì)有降允，原本的package.json是沒(méi)有這個(gè)配置項(xiàng)的
5恩闻、最后只需從antd引入模塊即可，無(wú)需單獨(dú)引入樣式, babel-plugin-import會(huì)幫助你加載 JS 和 CSS
import {Button} from 'antd'``;
6剧董、關(guān)于antd的按需加載其實(shí)還有其他的方法幢尚，官方推薦使用react-app-rewired來(lái)實(shí)現(xiàn)antd的按需加載
詳見(jiàn): https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE
**七 . 樣式作用域
只需要 創(chuàng)建一個(gè) index.module.less 在里面寫樣式 在需要的地方引入
