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 创建基本目录结构和基础代码

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

这个结构就是最基本的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

vue-app

@repo/utils

1.4 运行项目

react-app

pnpm -F react-app run dev

vue-app

pnpm -F vue-app run dev  

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

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

成功启动两个项目

2.4 打包项目

pnpm run build