创建一个支持旧Uniapp 小程序项目的 Nx Monorepo

40 阅读3分钟

由于我用的是mac,以下的安装跟命令都会使用mac 的,window 需要自查

项目设计

背景

各种新旧项目,很多项目使用到了同一套业务代码或者是某些公用的组件等等。这些新旧项目之间,可能会出现:

  • 开发环境的版本不同,即Node,npm,yarn 等等
  • 依赖包版本的不同
  • 可公用的代码,严重与现有项目中的其他代码进行耦合,导致提取困难

方案

基于以上的问题,最后我采用的是伪Monorepo的方案,相比与传统的monorepo,这种方式会更适合拿来在monorepo 之内集合新旧项目,如果按照传统的方式去整合新旧的项目,耗费太过巨大。
然后使用nx本身有的能力,来实现类似于workspace 的效果。
伪Monorepo:

  • monorepo 的根目录空间只存放一些公共库,子应用全部剥离出 workspace 的管理。
  • 各个子应用之内的依赖跟开发环境的版本都是独立的,各自管理自己的内容。
  • 每个子项目都需要配置好volta,以便及时切换版本

初始化

安装volta

这个是我拿来做环境统一的一个工具,它能根据项目自动切换相应的环境,挺好用的。

# 安装
curl https://get.volta.sh | bash

# 设置默认的node 版本
volta install node@20.19.5

安装nx

直接查看官方文档安装吧,更详细

创建基础项目

运行npx create-nx-workspace@latest monorepo-uni-mp --packageManager=yarn
按以下选项创建项目
31bc1c4770ec29ec319c043ffb3c0e20.png
然后便会得到一个最基础的monorepo 项目

image.png
其中比较主要的有两个文件夹

  • packages 公共库的文件夹
  • apps 存放子应用的文件夹
    默认模板创建出来的这个项目已经能够运行常规的monorepo应用了,但是针对这种复杂的环境还要兼容uniapp的项目,特别是小程序端的,还需要做额外的配置。

项目设置

使用volta 设置monorepo 的环境

// 在 package.json 中添加以下配置
"volta": {
  "node": "20.19.5",
  "yarn": "4.12.0"
},
"packageManager": "yarn@4.12.0"

配置yarn

 // 在 package.json 中添加以下配置
 "workspaces": {
    "packages": ["packages/*"],
    "nohoist": []
  }

这样设置之后apps文件夹就不再受到yarn workspace 的影响了。而packages文件夹依旧是在yarn workspace之中,依旧可以通过"package-a":"workspace:^"这种方式在 monorepo 中相互引用依赖。
现在,一个最基础并且支持uniapp 小程序开发的monorepo项目已经搭建好了,但是其中还会有很多问题:

  • apps下储存着项目,时间长了会异常庞大
  • 已存在的旧项目,集合到monorepo 之内,还需要做好兼容
  • 由于apps 没有在workspace中,公共库没法通过workspace:*引入到子应用之中
  • apps 下的项目现在是各顾各的,开发起来需要一直手动切换,太过麻烦

期待问题解决,请稍后再看