Skip to content

基于Taro的小程序Monorepo改造

June 13, 2025 by ccforeverd

基于Taro的小程序Monorepo改造

技术开发原则

SOLID

  • 单一职责
  • 开闭原则
  • 里氏替换
  • 接口隔离
  • 依赖反转

项目开发

  • 可维护性
  • 原子化
  • 低耦合
  • 低副作用
  • 强类型
  • 去中心化

技术栈迁移和升级

所有项目, 需要查漏补缺, 并进行升级, 做到技术栈统一, 避免重复造轮子

部分旧新说明
Node 版本14-1820/22统一 22
React 版本1718/19小程序 18 / H5 19 / BMS 18
包管理npm / yarnpnpm所有项目仅使用 pnpm
小程序框架Taro3Taro3 (最新版本)4 升级成本太高
管理后台框架Umi2Umi4
H5 框架Taro3 / VueNextjs使用 ssr
请求工具wx.requestaxios统一 axios 1
组件写法ClassFunction
样式sasstailwindcss小程序 tw3 / H5 tw4
UI 库antd3mantine
基础工具lodashes-toolkit
开发语言JavaScriptTypeScript
代码规范EslintBiomeEslint 仅用于 Taro
状态管理MobxZustand / React-Query去中心化 + 服务端状态管理
时间库moment / date-fnsdayjs统一 dayjs
构建工具Webpackvite / rspack
接口管理-apifox / openapi-ts只输出类型
测试-vitest
hook 工具-ahooks / mantine-hooks
文档-vocs
数学公式输入[自研]mathlive
数学公式展示-katex
条件工具语法 2ts-pattern
类型操作-type-fest
state 安全语法 3immer
表单校验[自研]zod
前端调试-eruda / vconsole

说明:

  1. 小程序使用 taro-http 插件, Nextjs 使用 fetch-adapter
  2. if/else switch 语法
  3. { ...prevState } / lodash.cloneDeep 语法

其它小工具:

  1. 图片 placeholder: https://placehold.co/
  2. 图片剪裁 (web, react): https://www.npmjs.com/package/react-image-crop
  3. 图片预览 (web, react): https://www.npmjs.com/package/react-photo-view

工程工具:

  1. 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)
  1. 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), 为了在微信小程序拿到合法权限

目录结构是去中心化结构, 优先在自己目录下实现, 然后依次提升到上级目录

目录说明
/appNextjs 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当前页面路由控制

20250417144406

https://nextjs.org/docs/app/getting-started/project-structure

End of file
欣赏图片