基于Taro的小程序Monorepo改造
June 13, 2025 by
基于Taro的小程序Monorepo改造
技术开发原则
SOLID
- 单一职责
- 开闭原则
- 里氏替换
- 接口隔离
- 依赖反转
项目开发
- 可维护性
- 原子化
- 低耦合
- 低副作用
- 强类型
- 去中心化
技术栈迁移和升级
所有项目, 需要查漏补缺, 并进行升级, 做到技术栈统一, 避免重复造轮子
| 部分 | 旧 | 新 | 说明 |
|---|---|---|---|
| Node 版本 | 14-18 | 20/22 | 统一 22 |
| React 版本 | 17 | 18/19 | 小程序 18 / H5 19 / BMS 18 |
| 包管理 | npm / yarn | pnpm | 所有项目仅使用 pnpm |
| 小程序框架 | Taro3 | Taro3 (最新版本) | 4 升级成本太高 |
| 管理后台框架 | Umi2 | Umi4 | |
| H5 框架 | Taro3 / Vue | Nextjs | 使用 ssr |
| 请求工具 | wx.request | axios | 统一 axios 1 |
| 组件写法 | Class | Function | |
| 样式 | sass | tailwindcss | 小程序 tw3 / H5 tw4 |
| UI 库 | antd3 | mantine | |
| 基础工具 | lodash | es-toolkit | |
| 开发语言 | JavaScript | TypeScript | |
| 代码规范 | Eslint | Biome | Eslint 仅用于 Taro |
| 状态管理 | Mobx | Zustand / React-Query | 去中心化 + 服务端状态管理 |
| 时间库 | moment / date-fns | dayjs | 统一 dayjs |
| 构建工具 | Webpack | vite / rspack | |
| 接口管理 | - | apifox / openapi-ts | 只输出类型 |
| 测试 | - | vitest | |
| hook 工具 | - | ahooks / mantine-hooks | |
| 文档 | - | vocs | |
| 数学公式输入 | [自研] | mathlive | |
| 数学公式展示 | - | katex | |
| 条件工具 | 语法 2 | ts-pattern | |
| 类型操作 | - | type-fest | |
| state 安全 | 语法 3 | immer | |
| 表单校验 | [自研] | zod | |
| 前端调试 | - | eruda / vconsole |
说明:
- 小程序使用
taro-http插件,Nextjs使用fetch-adapter if/else switch语法{ ...prevState }/lodash.cloneDeep语法
其它小工具:
- 图片 placeholder: https://placehold.co/
- 图片剪裁 (web, react): https://www.npmjs.com/package/react-image-crop
- 图片预览 (web, react): https://www.npmjs.com/package/react-photo-view
工程工具:
- madge: 生成依赖图谱
Monorepo 项目结构
基于 Pnpm
| 目录 | 说明 |
|---|---|
| /apps | 应用目录 |
| /libs | 包目录 |
| /docs | 文档目录 |
| /config | 旧 Taro 打包配置目录 |
| /src | 旧 Taro 源码目录 |
Libs
| 目录 | 说明 |
|---|---|
| /api | 接口类型和 RequestClient 1 |
| /bridge | 内嵌 APP 和 小程序 桥梁工具 |
| /cli | 命令行脚本 |
| /cli-ui | 命令行视图工具 |
| /data | 本地数据集合 |
| /helpers | 辅助工具集合 (Server) |
| /react-query | 服务端状态 hooks |
| /ui | 组件库 |
| /utils | 工具集合 (Client) |
- Excalidraw 图:
Next-H5 项目
项目用于 H5 内嵌页, 使用 Nextjs 作为 SSR 框架, 使用 React-Query 作为状态管理, 使用 Mantine 作为 UI 库, 使用 TailwindCSS 作为样式库
| 环境 | 名称 | 线上路径 | 说明 |
|---|---|---|---|
| compatible | 兼容模式 | /v2-compatible | 打包方式不同, 用于老客户端兼容 |
| development | 开发模式 | /v2 (本地) | |
| production | 生产模式 | /v2 (正式) | |
| test | 测试模式 | /v2-test | 会打开调试工具 |
| - | 本地代理模式 | /v2-test-local | 需要本地代理工具 (推荐 proxyman pro), 为了在微信小程序拿到合法权限 |
目录结构是去中心化结构, 优先在自己目录下实现, 然后依次提升到上级目录
| 目录 | 说明 |
|---|---|
| /app | Nextjs App 路由 |
| /components | 通用原子组件目录, 后续可迁移到 libs/ui |
| /config | 配置目录 |
| /hooks | 通用 hooks 目录, 后续可迁移到 libs/react-query 和 libs/utils |
| /themes | 主题目录, 用于不同机构 |
| /types | 类型目录, 基础类型 |
| /utils | 工具函数目录, 后续可迁移到 libs/utils |
/app 内是页面目录, 参照 Nextjs 的目录结构, 额外增加了 types.ts 和 view.tsx 文件
| 目录 | 说明 |
|---|---|
| /page.tsx | 服务端动态组件 |
| /view.tsx (特产) | 客户端页面组件 |
| /layout.tsx | 当前结构组件 |
| /loading.tsx | 当前加载组件 |
| /types.ts (特产) | 当前页面类型 |
| /error.tsx | 当前页面错误 |
| /components | 当前页面组件 |
| /hooks | 当前页面 hooks |
| /actions | 当前页面 actions |
| /route.ts | 当前页面路由控制 |
https://nextjs.org/docs/app/getting-started/project-structure
