monorepo工程化

monorepo项目示例

2小时带你掌握“Monorepo”
vue-vben-admin GitHub
ts-monorepo GitHub
expo-monorepo-example GitHub

创建pnpm workspace

touch pnpm-workspace.yaml
vim pnpm-workspace.yaml
packages:
    - 'apps/*'
    - 'packages/*'
:wq
mkdir -p apps/demo1/src
mkdir -p apps/demo2/src
mkdir -p apps/web-app/src

mkdir -p packages/ui/src
mkdir -p packages/api/src
mkdir -p packages/store/src
mkdir -p packages/utils/src

pnpm add -w -D vite @vitejs/plugin-vue  # -w 是根目录workspace下面
pnpm add -w vue

# 本地包的配置
cd packages/ui
pnpm init
vim package.json
{
    "name": "@demo-vite/ui",
    "exports": {
        ".": {
            "types": "./src/index.ts",
            "default": "./src/index.ts"
        }
    },
}
:wq
# touch index.html  # vite入口文件
mkdir src && touch src/index.ts

# 应用包的配置
cd apps/demo1
pnpm init
vim package.json
{
    "name": "@demo-vite/demo1",
    "type": "module",
    "scripts": {
        "dev": "vite"
    },
}
:wq
touch index.html  # vite入口文件
touch src/main.ts
touch src/App.vue


pnpm add @demo-vite/ui --workspace  # 引入本地公共库

vim package.json
{
    "scripts": {
        "dev:demo1": "pnpm run --filter @demo-vite/demo1 dev"
    }
}

pnpm run dev:demo1

vben项目模板

vben项目模板

git clone https://github.com/vbenjs/vue-vben-admin.git
cd vue-vben-admin
npm i -g corepack
pnpm install
pnpm build
pnpm dev

turbo