# pnpm + vite + monorepo 最佳实践
使用 pnpm + vite 创建 monorepo 项目. 项目代码示例 (opens new window)
# 第一步: 创建目录
# 项目文件夹
mkdir monorepo-demo && cd monorepo-demo
# 初始化 package.json
pnpm init
# 创建 packages 文件夹
mkdir packages
# 创建 `pnpm-workspace.yaml` 文件
touch pnpm-workspace.yaml
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
pnpm-workspace.yaml (opens new window) 写入以下内容
packages:
- 'packages/*'
1
2
2
# 创建子项目
cd packages
npm init vite vue-demo1
npm init vite vue-demo2
1
2
3
2
3
# 精简子项目的 package.json, 其余项不需要, 只要保留以下内容即可(因为都是选择 vue 作为基础依赖)
{
"name": "vue-demo1",
"private": true,
"version": "0.0.0"
}
1
2
3
4
5
2
3
4
5
# 将公共依赖抽离到公共配置(root/package.json), 并新增 scripts 启动子项目
{
"name": "monorepo-demo",
"version": "1.0.0",
"private": true,
"scripts": {
"dev:vue-demo1": "vite packages/vue-demo1",
"dev:vue-demo2": "vite packages/vue-demo2"
},
"license": "ISC",
"dependencies": {
"vue": "^3.2.45"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"typescript": "^4.9.3",
"vite": "^4.1.0",
"vue-tsc": "^1.0.24"
},
"engines": {
"node": ">=14",
"pnpm": ">=7"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 根目录下安装依赖, 并启动项目
# 安装
pnpm i
# 启动
pnpm run dev:vue-demo1
pnpm run dev:vue-demo2
1
2
3
4
5
6
2
3
4
5
6
# 注意项和要点
一些实用技巧
# 局部安装依赖
两种方式局部安装
- 进入指定目录下去安装
cd vue-demo1 && pnpm i unocss
1
--filter进行安装
pnpm i unocss --filter vue-demo1
1
# 全局安装 (-W)
# -W 参数
pnpm i unocss -W
1
2
2
# 关联 sub-package
创建工具函数包 root/libs/core
package.json
{
"name": "@libs/core",
"private": true,
"version": "1.0.0"
}
1
2
3
4
5
2
3
4
5
index.ts
export function add(a: number, b: number): number {
return a + b
}
1
2
3
2
3
安装在 vue-demo1 依赖中
pnpm i @libs/core -F vue-demo1
1
然后查看 packages/vue-demo1/package.json
{
"dependencies": {
"@libs/core": "workspace:*", // * 代表默认同步最新版本, 正常情况下应该是 ^1.0.0
}
}
1
2
3
4
5
2
3
4
5
最后就能愉快的用上工具函数~
import { add } from '@libs/core'
console.log(add(1, 2))
1
2
3
2
3
# 运行 sub-package 的命令(scripts)
根目录关联子包的命令
root/package.json
{
"scripts": {
"dev:vue-demo": "pnpm -F vue-demo dev"
"build:vue-demo": "pnpm -F vue-demo build"
}
}
1
2
3
4
5
6
2
3
4
5
6
packages/vue-demo/package.json
{
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build"
}
}
1
2
3
4
5
6
2
3
4
5
6