前言

这个‘Monorepo’是从一个项目演化过来的。起初是用vue-cli搭建的一个ts+vue的项目来着。

项目结构也是和普通的vue项目结构是一致的。

在接到新的项目需求的时候呢，不想重新搞基建。所以得想办法把能复用的东西抽离出来不是。

分析需求

希望可以抽离基础工具类和组件库等。
希望在开发项目的时候同时可以方便的修改调试工具类和组件库
新项目不需要新建仓库
每个项目需要可以独立部署

实现需求

调整项目结构

对于需求3：不能新建仓库，那就只能在原有仓库调整结构了

也就是说原来的src目录下至少需要新增一个层级。

原来的项目代码放置到 src/project1。

我们的工具类和组件库也准备分别放在src/utils，src/components。

public目录相关调整

每个项目的 html 模板等可能不一样，所以每个项目里面维护一个 public 目录，编写 node 脚本，在打包前拷贝到根目录的 public中（建议删除掉原来的）。

调整 vue.config.js

调整了项目结构， pages对应的入口文件也需要调整。最好输出的文件夹也调整一下。

拷贝public的目录可以在这里实现。可以考虑将需要打包的项目通过参数传递进来，用 process.argv 获取。

  index: {
    entry: `src/${project}/main.ts`,
    template: `src/${project}/public/index.html`,
    filename: "index.html",
    chunks: ["chunk-vendors", "chunk-common", "index"],
  },

调整脚本

    // 开发环境
    vue-cli-service serve --project-name
    // 打包
    vue-cli-service build --project-name --report

到这里改造应该算是差不多了。

关于新建项目

手动

简单粗暴的将原项目复制一份改了目录名（约定目录名称即为项目名）

编写 node 脚本用于新增项目

将现有项目制作成模板

将原项目制作成模板（一般来说复制一份并删除掉业务相关的代码即可）。

编写node脚本：将模板复制到src目录下即可（需要修改目录名）

复制前需要先判断目标目录是否已存在防止覆盖已有项目。

可以有多个项目模板

新建项目时，可以选择不同的模板。比如：

简单的活动不需要路由
官网等页面不需要引入与客户端交互的相关逻辑
...

node scripts/createProject.js --project-name --template_template-name

新建项目可以和启动开发服务耦合

可以考虑将新建项目与启动开发服务一起，这样可以少执行一步脚本。

vue-cli-service serve --project-name --template_template-name

其他的零零散散

其他约定

尽量不要跨项目进行依赖，可复用的代码应该抽象到 src/utils，src/components 等基础库里。

关于app内的首屏加载优化

前提：

对于一般项目， html 是做的协商缓存，其他资源文件可以做成强缓存。部分h5需求在app内是有固定入口的，为了极致的用户体验做强缓存。这些入口的地址通过由服务器下发。
为了对抗浏览器的缓存机制，强制每次都请求最新资源的最简单的做法是加时间戳参数。这样做会让强缓存优化失效。所以我们需要把时间戳换成了版本号。

在这样的基础上，我们每次发布这些项目的时候，需要通知服务器去修改下发给app的地址。

这件事情是可以通过代码实现的:

服务器提供修改版本号的接口，调用后目标项目的版本号+1 即可。
在发布后调用该接口修改版本号。
调用接口这件事情是在发布流水线完成的（发布流水线可以执行node脚本， node 脚本可以调接口）。

我是如何落地 ‘monorepo’ 的

前言