My Monorepo

基于 pnpm + Turborepo 的移动端 H5 Monorepo 项目。

目录结构

my-monorepo/
├── apps/                   # 应用目录
│   ├── admin/             # 管理后台
│   ├── testweb/           # 测试项目（模板）
│   ├── mobile/            # 移动端项目
│   ├── web/               # Web 项目
│   └── api/               # API 服务
├── packages/              # 共享包目录
│   ├── bridge/            # 原生桥接包
│   ├── request/           # 请求封装包
│   ├── utils/             # 工具函数包
│   ├── ui/                # UI 组件包
│   ├── vconsole/          # 调试控制台包
│   └── sensors/           # 神策埋点包
├── scripts/               # 脚本目录
│   └── create-app.js      # 创建新项目脚本
├── postcss.config.js      # PostCSS 配置（px 转 rem）
├── turbo.json             # Turborepo 配置
├── pnpm-workspace.yaml    # pnpm 工作空间配置
└── package.json           # 根 package.json

技术栈

构建工具

• pnpm - 快速的包管理器，支持 workspace
• Turborepo - 构建系统，提供缓存和并行执行
• Vite - 快速的前端构建工具

前端框架

• Vue 3 - 渐进式 JavaScript 框架
• Vue Router 5 - Vue 官方路由
• Pinia - Vue 官方状态管理

移动端适配

• amfe-flexible - 可伸缩布局方案
• postcss-pxtorem - px 自动转 rem

网络请求

• axios - HTTP 客户端

代码规范

• JSX 支持 - 通过 @vitejs/plugin-vue-jsx

开发工具

• vconsole - 移动端调试工具
• sensors - 神策数据分析

快速开始

创建项目

npx create-csch5-monorepo create 你的项目名称

安装依赖

cd 到项目根目录
pnpm install

启动所有项目

# 开发环境
pnpm dev

# 预发布环境
pnpm staging

# 单独启动某个项目
pnpm --filter testweb dev

构建项目

# 生产环境构建
pnpm build:prod

# 预发布环境构建
pnpm build:staging

新增子项目

使用项目自带脚本创建新的移动端 H5 项目：

pnpm new <项目名> [端口]

示例

# 创建名为 myapp 的项目，使用默认端口 3000
pnpm new myapp

# 创建名为 shop 的项目，指定端口 3010
pnpm new shop 3010
# 创建成功后 cd 进入项目目录
cd .\apps\shop
pnpm install

生成的项目包含

| 文件/目录 | 说明 | |----------|------| | package.json | 项目依赖配置 | | vite.config.js | Vite 构建配置（含 JSX、环境变量、bridge 复制） | | index.html | HTML 入口（含移动端 meta 标签、bridge.js） | | .env | 环境变量文件 | | src/main.js | 应用入口（含 vconsole、sensors、pinia、router） | | src/App.vue | 根组件 | | src/router/index.js | 路由配置 | | src/stores/user.js | 用户状态管理 | | src/views/Home.vue | 首页 | | src/views/About.vue | 关于页面 |

启动新项目

# 进入项目目录安装依赖
cd apps/<项目名>
pnpm install

# 启动开发服务器
pnpm dev

共享包说明

bridge - 原生桥接包

提供与原生 App 通信的桥接方法，自动挂载到 window 对象。

// 使用示例
window.isIOS       // 是否 iOS
window.isAndroid   // 是否 Android
window.isWeb       // 是否 Web
window.getAppVersion()  // 获取 App 版本
window.startAppPage(type, url, userData)  // 打开 App 页面
window.getUserInfo(type)  // 获取用户信息
window.setActionBarStyle(data)  // 设置顶部栏样式
window.getAppThem()  // 获取 App 主题
window.getEncodeUserInfo(data)  // 获取加密用户信息

request - 请求封装包

基于 axios 的请求封装，包含拦截器和错误处理。

import request from 'request';

// GET 请求
const data = await request.get('/api/user', { id: 1 });

// POST 请求
const result = await request.post('/api/login', { username, password });

环境变量

项目支持多环境配置，根目录 .env 文件存放通用变量，子项目 .env 文件可覆盖根目录配置。

# 根目录 .env（通用配置）
VITE_BASE_URL=https://api.example.com
VITE_ATTID=activity_001

# 子项目 .env（项目特定配置，会覆盖根目录）
VITE_BASE_URL=https://api-dev.example.com
VITE_ATTID=activity_dev_001

在代码中使用：

const baseUrl = import.meta.env.VITE_BASE_URL;
const attId = import.meta.env.VITE_ATTID;

更新共享包

# 更新所有
npx create-csch5-monorepo update

# 只更新某个包
npx create-csch5-monorepo update -p bridge
npx create-csch5-monorepo update -p utils
npx create-csch5-monorepo update -p request

常用命令

# 创建新项目
pnpm new <项目名> [端口]

# 启动开发服务器
pnpm dev
pnpm --filter <项目名> dev

# 构建项目
pnpm build:prod
pnpm --filter <项目名> build

# 代码检查
pnpm lint

# 清理构建产物
pnpm clean

端口分配

| 项目 | 端口 | |------|------| | admin | 3003 | | mobile | 3002 | | testweb | 9527 | | web | 5173 |

Monorepo 优势

1. 代码共享 - 多个子项目可以共享相同的代码，避免重复编写
2. 依赖统一 - 所有子项目的依赖都在根目录 node_modules，通过软链接引用
3. 原子提交 - 跨项目的修改可以在一次提交中完成
4. 统一构建 - Turborepo 提供缓存和并行执行，提升构建速度

License

ISC