前端React系列八:ant-design-pro輔助開發(fā)命令

image.png

React 通過 JSX 提供靈活的組件化開發(fā),將 HTML 與 JavaScript 邏輯結(jié)合,使開發(fā)更直觀。其虛擬 DOM 和 Fiber 架構提升性能,通過高效的差異對比和異步渲染,使復雜應用更流暢。
React 擁有龐大的生態(tài)系統(tǒng)和社區(qū)支持,豐富的第三方庫和工具(如 Redux、React Router)以及廣泛的企業(yè)采用(如 Facebook、Netflix)推動其發(fā)展。Create React App 簡化項目初始化,內(nèi)置現(xiàn)代開發(fā)配置。React Developer Tools 提供強大調(diào)試功能,React Native 擴展技術棧到移動端,Hooks API 推動函數(shù)式編程,使代碼更簡潔和可重用。


React系列系列:
前端React系列一: React簡介
前端React系列二: Create-react-app簡介
前端React系列三: TypeScript簡介
前端React系列四:Ant Design簡介
前端React系列五:React+CRA+TS+Ant Design高效開發(fā)前端
前端React系列六:ant-design-pro簡介
前端React系列七:ant-design-pro架構
前端React系列八:ant-design-pro輔助開發(fā)命令
前端React系列九:Umi簡介
前端React系列十:Umi環(huán)境變量


前言

前文介紹了如何利用ant-design-pro作為腳手架,快速開發(fā)你的React應用,并解決了運行時的Uncaught Error

Uncaught Error: Absolute route path "/*" nested under path "/user" is not valid. 

成功在瀏覽器中運行。其中用到了start命令,它是ant-design-pro提供的輔助開發(fā)的命令的其中之一。

ant-design-pro還提供了哪些命令來輔助開發(fā)呢,本文將一一介紹。

start

運行這個腳本會啟動服務,自動打開默認瀏覽器展示你的頁面。當你重新編輯代碼后,頁面還會自動刷新。


start

build

運行這個腳本將會編譯你的項目,你可以在項目中的 dist 目錄中找到編譯后的文件用于部署。


build

如果你需要部署,可以查閱部署

analyze

analyze 腳本做的事情與 build 的相同,但是他會打開一個頁面來展示你的依賴信息。如果需要優(yōu)化性能和包大小,你需要它。

Analyze

lint

我們提供了一系列的 lint 腳本,包括 TypeScript,less,css,md 文件。你可以通過這個腳本來查看你的代碼有哪些問題。在 commit 中我們自動運行相關 lint。


lint

(⊙o⊙)… ant-design-pro的創(chuàng)建的項目代碼居然有error (⊙o⊙)… ,下面的命令嘗試修復它

lint:fix

與 lint 相同,但是會自動修復 lint 的錯誤。


lint:fix

提示已完成,不知道是否把之前l(fā)int發(fā)現(xiàn)的代碼問題修復了,再次執(zhí)行命令lint,發(fā)現(xiàn)沒有修復,o(╥﹏╥)o

總結(jié)

這里介紹了,協(xié)助我們開發(fā)常用的命令,其它不常用的命令暫不接受,如你需要了解可以到官網(wǎng)去了解。

lint:fix并沒有發(fā)揮它的價值,并沒有如期的自動修復發(fā)現(xiàn)的代碼問題,我們還是需要手動去修復。看來這命令也不靠譜呀,還是得靠人。

接下來,我們要深入這些命令的背后,看看他們都做了些什么。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容