新建一个项目时,不想再复制上一个项目的公用组件和工具。今天就试试多包开发模式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