1、在項目monorepo下執(zhí)行

pnpm init：得到初始化package.json

2、創(chuàng)建pnpm-workspace.yaml配置：

packages:?

????- 'packages/*'?????# 排除公共組代碼

????- 'apps/*' ? ? ? ? ? ?# 排除子包代碼

????- '!** /node_modules'? ? ?#排除指定的目錄

3、在monorepo下執(zhí)行創(chuàng)建子項目：

pnpm create vite

4、配置package.json,啟動子項目apps/h5-main和apps/web-main

private: true? ? ? ? ?//注冊組件的主要步驟

"scripts": {? ?

????"dev:h5": "pnpm run -C apps/h5-main dev",? ?

????"dev:web": "pnpm run -C apps/web-main dev",? ?

????"build:h5": "pnpm run -C apps/h5-main build",? ?

????"build:web": "pnpm run -C apps/web-main build"?

},

5、配置子項目

package.js

name:"h5-main"? ? ?//子項目名稱

type:"module"? ? ? ? //指定子項目類型module

vite.config.js:正常啟動但是打開瀏覽器無法

server: {? ? port: 8081,? ? host: '0.0.0.0',? ? open: true,? },

6、安裝依賴包? ?安裝指令?-w

pnpm add lodash -w //安裝依賴到monorepo根目錄

創(chuàng)建公共組件和模塊/ui：monorepo目錄下創(chuàng)建packages/libs-shared、packages/ui-components

進入到libs-shared目錄下執(zhí)行pnpm init，打開package.json修改屬性如下

"name":"@libs/shared"，

"main"："src/index.js"

pnpm add @libs/shared@workspace:* -w

concurrently 使用

pnpm add?concurrently -w? ? //monorepo根目錄的package.json需要使用-w標(biāo)識

"dev:all": "concurrently \"pnpm run -C apps/h5-main dev\" \"pnpm run -C apps/web-main dev\""? ? ?//啟動多個子項目