monorepo 整合 Turborepo

工程化 |

新建一个项目时，不想再复制上一个项目的公用组件和工具。今天就试试多包开发模式monorepo和构建工具turborepo。

因为 node 包管理工具很多，比如 pnpm、yarn、npm。node 整了个管理包管理器的工具:corepack,高版本的 node 安装自带 corepack。所以以后就不用全局安装 pnpm、yarn 了，只需要 corepack 开启对应的包管理器就行，下面是开启命令

#开启命令  参数可带可不带：[pnpm|yarn|npm]
corepack enable [pnpm|yarn|npm]
#关闭命令  参数[pnpm|yarn|npm]
corepack disable [pnpm|yarn|npm]

1、新建 monorepo 项目

1.1 初始化项目

#找一个自己喜欢的空文件夹
pnpm init

1.2 创建工作空间

新建pnpm-workspace.yaml并添加配置

#pnpm-workspace.yaml
#apps或packages目录中每个包含package.json的目录都将被视为一个包。
packages:
  - "apps/*"
  - "packages/*"

1.3 创建基本目录结构和基础代码

image.png

packages 目录下的包一般是为了给 apps 目录下的应用公用的，这里称为内部包，这些内部包有着同样的命名空间

image.png

这个结构就是最基本的 monorepo 开发结构了，一般我们把项目放在/apps目录下。一些抽离的逻辑放在/packages目录下。此处 vue-app 和 react-app 都依赖 utils，直接安装内部包 utils 就可以了，再也不用复制代码了。

# -F 是pnpm命令行参数，表示过滤， @workspace:* 表示安装项目的最新版本
# react-app
pnpm -F react-app add @repo/utils@workspace:*

#vue-app
pnpm -F vue-app add @repo/utils@workspace:*

稍微完善下两个项目(react-app|vue-app)如下图。

react-app

image.png

vue-app

image.png

@repo/utils

image.png

1.4 运行项目

react-app

pnpm -F react-app run dev

vue-app

pnpm -F vue-app run dev

此时两个项目都成功打印出utils的日志

image.png

image.png

2、整合 Turborepo

2.1 安装 Turborepo

#-w 是pnpm命令行参数，表示运行时的命令是在workspace的根目录而不是当前工作目录中启动的。
# pnpm add turbo --save-dev --workspace-root
pnpm add turbo -D -w

2.2 新建 Turborepo 配置文件turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "outputs": ["dist/**"]
    },
    "dev": {
      "persistent": true,
      "cache": false
    }
  }
}

2.3 在根目录的ackage.json置脚本

// ./package.json
"scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev"
},

2.4 启动服务(根目录下)

pnpm run dev

成功启动两个项目

image.png

2.5 打包项目

pnpm run build