前言

成都一家集口碑和實力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團隊和靠譜的建站技術(shù)，十多年企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗 ,為成都數(shù)千家客戶提供網(wǎng)頁設(shè)計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，成都品牌網(wǎng)站建設(shè)，同時也為不同行業(yè)的客戶提供成都網(wǎng)站建設(shè)、網(wǎng)站制作的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選創(chuàng)新互聯(lián)。

create-react-app是由React官方提供并推薦使用構(gòu)建新的React單頁面應(yīng)用程序的最佳方式,其構(gòu)建的項目默認(rèn)是不支持less的,需要我們手動集成

一、react腳手架搭建

1、先全局安裝create-react-app(提前需要安裝node)

npm install -g create-react-app

2、然后通過create-react-app創(chuàng)建項目my-app

create-react-app my-app

3、最后通過cd進入項目文件夾并啟動

cd my-app
yarn start

4、終端出現(xiàn)如下界面表示啟動成功，并在瀏覽器中輸入http://localhost:3000/即可看到react的初始頁面

二、目錄結(jié)構(gòu)

 ┌─node_modules           -依賴包
    ├─public              -全局文件
    ├─src                -項目文件
    ├─.gitignore            -提交被git忽略文件目錄
    ├─package.json           -項目配置文件
    ├─README.md             -README文件
    └─yarn.lock             -鎖定項目所需的各種配置版本

三、安裝less和less-loader(less編譯器)

yarn add less less-loader

安裝完成之后該怎么配置呢？這時需要通過webpack來配置less-loader，但是我們在上面的目錄結(jié)構(gòu)中似乎并沒有發(fā)現(xiàn)webpack.config.js文件，這是因為腳手架為了實現(xiàn)“零配置”，會默認(rèn)把一些通用的腳本和配置集成到 react-scripts，目的是讓我們專注于src目錄下的開發(fā)工作，不再操心環(huán)境配置。同時，被其集成的腳本和配置也會從程序目錄中消失 ，程序目錄也會變得干凈許多

接下來，我們就需要通過yarn eject將webpack配置暴露出來

四、暴露webpack配置

執(zhí)行yarn eject

提示：執(zhí)行該命令后會把已構(gòu)建依賴項、配置文件和腳本復(fù)制到程序目錄中。該操作是不可逆轉(zhuǎn)的，執(zhí)行完成后會刪除這個命令，也就是說只能執(zhí)行一次

配置完成之后，我們會發(fā)現(xiàn)我們的目錄結(jié)構(gòu)中會多出兩個文件夾：

其中config文件夾，有三個關(guān)于 webpack 的配置文件：

• webpack.config.dev.js 開發(fā)環(huán)境配置
• webpack.config.prod.js 生產(chǎn)環(huán)境配置
• webpackDevServer.config.js 開發(fā)服務(wù)器配置

五、修改webpack配置文件

第一步：到webpack.config.dev.js文件中找到如下代碼，在sassModuleRegex后面加上lessRegex和lessModuleRegex變量

第二步：在下面加上這兩段代碼

第三步：按照同樣的方法，把webpack.config.prod.js也配置上

六、測試

1、在src目錄中把App.css改為App.less文件，并在里面加上

@title-color:#f00;
.App-link {
 color:@title-color;
}

2、然后再App.js中把less文件導(dǎo)入

import './App.less';

3、回到頁面刷新，發(fā)現(xiàn)字體變紅，說明配置成功

七、集成Ant Design 并配置按需加載

antd：是螞蟻金服推出的一個很優(yōu)秀的react UI庫，其中包含了很多我們經(jīng)常使用的組件，對于小白學(xué)習(xí)react來說十分友好！

1、首先需要安裝antd

yarn add antd

2、安裝完成之后我們就可以直接在代碼里使用它的ui組件了

import {Button} from 'antd';
import 'antd/dist/antd.css';

這個方法的優(yōu)點是比較簡單，不需再次配置，直接加載即可，但是比較麻煩，每次載入一個新的組件都需要先載入組件，再加載組件的css文件，性能較差

3、使用 babel-plugin-import 來進行按需加載

yarn add babel-plugin-import --save-dev

4、安裝完成之后，在package.json中找到babel配置項，然后再里面加上plugins

注意： 這里babel配置項是需要通過yarn eject暴露出來才會有，原本的package.json是沒有這個配置項的

5、最后只需從antd引入模塊即可，無需單獨引入樣式, babel-plugin-import會幫助你加載 JS 和 CSS

import {Button} from 'antd';

6、關(guān)于antd的按需加載其實還有其他的方法，官方推薦使用react-app-rewired來實現(xiàn)antd的按需加載
詳見: https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

名稱欄目：react腳手架如何配置less和ant按需加載的方法步驟
標(biāo)題網(wǎng)址：http://www.chinadenli.net/article38/pecppp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站設(shè)計、Google、、外貿(mào)建站、自適應(yīng)網(wǎng)站

廣告

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