react腳手架如何配置less和ant按需載入
前言
create-react-app是由React官方提供並推薦使用構建新的React單頁面應用程式的最佳方式,其構建的專案預設是不支援less的,需要我們手動整合
一、react腳手架搭建
1、先全域性安裝create-react-app(提前需要安裝node)
npm install -g create-react-app
2、然後通過create-react-app建立專案my-app
create-react-app my-app
3、最後通過cd進入專案資料夾並啟動
cd my-app
yarn start
4、終端出現如下介面表示啟動成功,並在瀏覽器中輸入http://localhost
二、目錄結構
┌─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,但是我們在上面的目錄結構中似乎並沒有發現webpack.config.js檔案,這是因為腳手架為了實現“零配置”,會預設把一些通用的指令碼和配置整合到 react-scripts,目的是讓我們專注於src目錄下的開發工作,不再操心環境配置。同時,被其整合的指令碼和配置也會從程式目錄中消失 ,程式目錄也會變得乾淨許多
接下來,我們就需要通過yarn eject將webpack配置暴露出來
四、暴露webpack配置
執行yarn eject
提示:執行該命令後會把已構建依賴項、配置檔案和指令碼複製到程式目錄中。該操作是不可逆轉的,執行完成後會刪除這個命令,也就是說只能執行一次
配置完成之後,我們會發現我們的目錄結構中會多出兩個資料夾:
其中config資料夾,有三個關於 webpack 的配置檔案:
webpack.config.dev.js 開發環境配置
webpack.config.prod.js 生產環境配置
webpackDevServer.config.js 開發伺服器配置
五、修改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檔案匯入
import './App.less';
3、回到頁面重新整理,發現字型變紅,說明配置成功
七、整合Ant Design 並配置按需載入
antd:是螞蟻金服推出的一個很優秀的react UI庫,其中包含了很多我們經常使用的元件,對於小白學習react來說十分友好!
1、首先需要安裝antd
yarn add antd
2、安裝完成之後我們就可以直接在程式碼裡使用它的ui元件了
import {Button} from 'antd';
import 'antd/dist/antd.css';
這個方法的優點是比較簡單,不需再次配置,直接載入即可,但是比較麻煩,每次載入一個新的元件都需要先載入元件,再載入元件的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、關於antd的按需載入其實還有其他的方法,官方推薦使用react-app-rewired來實現antd的按需載入
詳見: https://ant.design/docs/react...