前端

TurboRepo 的老中后台项目 Monorepo 改造

原来前端项目结构如下：

  1. UI组件库：sipa-ui；
  2. 中台SDK：sipa-boot-sdk-js；
  3. 单点登录：sso-pc；
  4. 流程中台：process-pc；
  5. 大后台：ams-pc。

sipa-ui和sipa-boot-sdk-js在本文中统称为 依赖库。

统一node版本，统一包管理工具

老项目都是Node 16 + Yarn，稍微近一点的项目都是Node 18 + Pnpm，首先我们需要将Node 16 + Yarn升级到Node 18 + Pnpm，这里不阐述了，有报错解决报错就行了。

创建monorepo工程

通过create-turbo脚手架创建工程

1
pnpm dlx create-turbo@latest

将依赖库复制到packages，将其它项目复制到apps下。

修改依赖库版本

1
2
3
4
{
  "sipa-boot-sdk-js": "workspace:",
  "sipa-ui": "workspace:"
}

monorepo的好处

使用monorepo的好处之一是依赖库修改后，不需要打包，对应的app直接引用源文件，直接编译并且热更新到浏览器。

早期我们在做js工程化（组件库&sdk），都是打包成umd或者cjs格式，然后发布到私仓中，项目直接通过dependency引用。

每次依赖库更新时，都需要手动升级版本号并重新安装依赖，流程繁琐。

在使用monorepo工程架构的情况下，很多情况我们可能都不需要发布依赖库。

幸运的是，依赖库已经配置了源文件变更自动编译的脚本。

这样我们可以专门做一个turborepo task，将依赖库这些任务全部一次性运行起来。

创建依赖库 turborepo 任务

修改项目根目录下的package.json，增加一个script

1
2
3
4
5
{
  "scripts": {
    "watch-build": "turbo run watch-build"
  }
}

修改turborepo配置文件，增加依赖库开发编译任务

1
2
3
4
5
{
  "watch-build": {
    "dependsOn": ["^watch-build"]
  }
}

依赖库增加watch-build script

复制 变化编译 脚本

sipa-boot-sdk-js

1
2
3
{
  "watch-build": "vite build -w"
}

sipa-ui

1
2
3
4
5
6
{
  "watch-build": "npm-run-all prebuild --parallel watch-build:core watch-build:css",
  "prebuild": "rimraf es/ dist/",
  "watch-build:core": "vite build -w",
  "watch-build:css": "rollup -w -c rollup.config.js"
}

运行

我们先启动依赖库，然后再启动中后台

1
2
3
4
5
# 窗口1 启动依赖库
pnpm watch-build

# 窗口2 启动中后台
pnpm dev

总结

通过 Monorepo 改造，我们实现了依赖库的实时联动开发，减少了重复构建和版本管理的成本，提升了开发效率。

技术债

由于依赖库都是用ts写的，中后台全部都是用js写的，如果要改造成依赖库不编译，项目直接引用依赖库源文件，要费点时间。

而且中后台都是vue2，就不折腾了。

如果后期有新的大型项目要启动，可以重新再搭一个更多更新技术的中后台。

插曲

很早就看到monorepo被前端各种库所采用，当时弄了个sipa-ui，结构就是monorepo，有core，组件文档，测试app等。

直到看到vue-vben-admin这个项目，搭配vite，感叹还能这么玩，依赖库可以拆的这么细。

最后还是要喊出那句经典的话，别更新了，学不动了！ 😭