pnpm + monorepo 实践小记

首先理解下monorepo

Monorepo 的核心观点是所有的项目在一个代码仓库中。这并不是说把所有代码都组织到一个文件中，而是分割到一个个的小模块中。

优势：

• 代码重用将变得非常容易
• 依赖管理将变得非常简单

劣势：

• 项目粒度的权限管理变得非常复杂
• 学习成本高

初始化项目

本次搭建得 monorepo 工程基于 pnpm@7.0.0 版本

mkdir monorepo-demo 
cd monorepo-demo 
pnpm init

pnpm init 会生成一个 package.json 的文件。如需修改package.json 的内容请自行修改。

{
  "name": "monorepo-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "packageManager": "pnpm@7.0.0", //这里是手动添加的，约定该项目的包管理工具是pnpm@7.0.0版本
  "keywords": [],
  "author": "",
  "license": "ISC"
}

配置workspace.yml

packages:
  # all packages in direct subdirs of packages/
  - 'packages/*'
  # all packages in subdirs of components/
  - 'components/**'
  # exclude packages that are inside test directories
  - '!**/test/**'

初始化子库

这里我们在根目录下面创建两个目录，分别是packages/ui和site目录。然后分别进入子库的目录进行项目的初始化，生成对应的package.json文件。

├── packages
|   ├── ui
|   |   ├── package.json
├── site
|   ├── package.json
├── package.json

cd packages/ui 
pnpm init 
cd packages/site 
pnpm init 

安装命令

# 这里的 -r 代表的是 recursive 递归的安装到每一个包中
pnpm i vite vitest -r -D 

# --filter=packageName 代表将依赖安装到指定的包里面
pnpm i vue --filter=@vino/ui

包之间的引用

此时我需要在site包里面引用ui的组件，我们只需有在site/package.json里面添加如下代码即可

{
  ...,
  "dependencies": {
    "@vino/ui": "workspace:^",
  },
}

在根目录下执行对应包里面的命令

在最外层的package.json 文件里面，可以按照以下形式添加执行不同包里面的脚本。

{ 
  ...,
  "scripts": {
    "build:ui": "pnpm --filter=@vino/ui build ", 
    "test:ui": "pnpm --filter=@vino/ui test:unit",
    "site": "pnpm --filter=site dev",
    "site-build": "pnpm --filter=site run build",
  },
}