梓潼網(wǎng)站建設(shè),電子商務(wù)網(wǎng)站運(yùn)營流程,網(wǎng)站開發(fā)工單,社群小程序搭建快速體驗(yàn) 打開 InsCode(快馬)平臺 https://www.inscode.net輸入框內(nèi)輸入如下內(nèi)容#xff1a; 創(chuàng)建一個(gè)適合新手的Monorepo教學(xué)項(xiàng)目#xff0c;使用pnpm workspace管理包含兩個(gè)簡單React應(yīng)用的代碼庫。要求提供分步指導(dǎo)#xff0c;包括初始化配置、共享組件開發(fā)、依賴安裝和…快速體驗(yàn)打開 InsCode(快馬)平臺 https://www.inscode.net輸入框內(nèi)輸入如下內(nèi)容創(chuàng)建一個(gè)適合新手的Monorepo教學(xué)項(xiàng)目使用pnpm workspace管理包含兩個(gè)簡單React應(yīng)用的代碼庫。要求提供分步指導(dǎo)包括初始化配置、共享組件開發(fā)、依賴安裝和腳本命令設(shè)置并附帶詳細(xì)注釋說明。點(diǎn)擊項(xiàng)目生成按鈕等待項(xiàng)目生成完整后預(yù)覽效果最近在研究前端工程化發(fā)現(xiàn)很多大廠項(xiàng)目都在用Monorepo管理代碼。作為一個(gè)剛接觸這個(gè)概念的新手我花了一周時(shí)間摸清了基本玩法今天就用最直白的語言分享從零搭建的過程適合像我一樣的小白快速上手。1. 什么是Monorepo簡單說就是把多個(gè)項(xiàng)目放在同一個(gè)代碼倉庫里管理。比如公司有官網(wǎng)、后臺、小程序三個(gè)前端項(xiàng)目傳統(tǒng)方式是開三個(gè)Git倉庫而Monorepo則放在同一個(gè)倉庫的不同目錄下。好處特別明顯共享代碼更方便比如統(tǒng)一的工具函數(shù)庫依賴包版本統(tǒng)一管理跨項(xiàng)目修改能一次性提交2. 準(zhǔn)備工作我用的是pnpmworkspace方案相比yarn/npm更節(jié)省磁盤空間。需要先安裝到官網(wǎng)下載安裝pnpm建議版本7.0新建空文件夾作為倉庫根目錄終端執(zhí)行pnpm init生成package.json3. 初始化Monorepo結(jié)構(gòu)關(guān)鍵步驟是配置workspace在根目錄創(chuàng)建pnpm-workspace.yaml文件指定子項(xiàng)目位置。比如我的結(jié)構(gòu)/packages/admin (后臺管理系統(tǒng))/packages/web (官網(wǎng)項(xiàng)目)/shared (公共組件庫)對應(yīng)的workspace配置只要寫packages: - packages/* - shared4. 創(chuàng)建React子項(xiàng)目以admin項(xiàng)目為例進(jìn)入packages目錄用vite快速初始化React項(xiàng)目pnpm create vite admin --template react-ts同樣步驟創(chuàng)建web項(xiàng)目這時(shí)候打開任意子項(xiàng)目的package.json會發(fā)現(xiàn)依賴都安裝在各自node_modules里。接下來我們要優(yōu)化這個(gè)情況。5. 提升公共依賴在根目錄執(zhí)行pnpm add react react-dom -w-w參數(shù)表示安裝到workspace根節(jié)點(diǎn)這樣所有子項(xiàng)目會共用同一份react代碼。可以通過pnpm list查看依賴樹驗(yàn)證。6. 開發(fā)共享組件在shared目錄新建Button組件初始化package.json注意設(shè)置name: shared/ui編寫React組件代碼在admin和web項(xiàng)目中通過pnpm add shared/ui -F admin安裝-F指定安裝到特定項(xiàng)目現(xiàn)在修改Button組件時(shí)兩個(gè)項(xiàng)目會實(shí)時(shí)同步更新不用手動復(fù)制粘貼。7. 配置統(tǒng)一腳本根目錄的package.json可以添加這些實(shí)用命令scripts: { dev: pnpm --parallel -r dev, build: pnpm -r build, lint: pnpm -r lint }解釋幾個(gè)參數(shù) - -r 在所有子項(xiàng)目運(yùn)行 - --parallel 并行執(zhí)行適合dev熱更新 現(xiàn)在執(zhí)行pnpm dev能同時(shí)啟動所有前端項(xiàng)目8. 調(diào)試技巧遇到最多的問題是依賴引用報(bào)錯分享兩個(gè)排查方法用pnpm why 包名查看依賴被哪些項(xiàng)目引用在vscode安裝Workspace插件能可視化查看項(xiàng)目關(guān)系9. 進(jìn)階優(yōu)化方向等熟悉基礎(chǔ)操作后可以繼續(xù)探索接入Changesets管理版本發(fā)布配置Turborepo加速構(gòu)建集成Storybook管理組件庫最近在InsCode(快馬)平臺看到有現(xiàn)成的Monorepo模板比自己配環(huán)境省心多了。他們的在線編輯器可以直接調(diào)試部署按鈕一點(diǎn)就能生成演示鏈接特別適合新手快速驗(yàn)證想法。像我這樣的小白第一次搭Monorepo用了三天現(xiàn)在用平臺半小時(shí)就能跑通全套流程建議大家都去試試看。快速體驗(yàn)打開 InsCode(快馬)平臺 https://www.inscode.net輸入框內(nèi)輸入如下內(nèi)容創(chuàng)建一個(gè)適合新手的Monorepo教學(xué)項(xiàng)目使用pnpm workspace管理包含兩個(gè)簡單React應(yīng)用的代碼庫。要求提供分步指導(dǎo)包括初始化配置、共享組件開發(fā)、依賴安裝和腳本命令設(shè)置并附帶詳細(xì)注釋說明。點(diǎn)擊項(xiàng)目生成按鈕等待項(xiàng)目生成完整后預(yù)覽效果創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考