什么是monorepo

monorepo其實(shí)就是一個(gè)大包下面包含了許多子包，典型案例有：babel、vue3等知名項(xiàng)目。相對(duì)于傳統(tǒng)的mutirepo項(xiàng)目，monorepo的優(yōu)勢(shì)在于：

• 統(tǒng)一管理
  可以在外部添加公用包
• 多包間通信更簡(jiǎn)單
  這一點(diǎn)在多包間有相互引用的場(chǎng)景下尤為重要

基于pnpm的monorepo模式

pnpm和npm、yarn都是包管理工具，不同的是 pnpm 使用了軟鏈的模式，使包的體積更小，下載速度更快，并且 pnpm 支持 monorepo 方案。這樣我們就不用再去找別的技術(shù)方案了，節(jié)省了調(diào)研的時(shí)間。

目錄結(jié)構(gòu)

monorepo的結(jié)構(gòu)如下

├── packages
|   ├── package1   // 包1
|   |   ├── package.json
|   ├── package2   // 包2
|   |   ├── package.json
├── package.json
├── pnpm-workspace.yaml 配置文件

pnpm-workspace.yaml 配置文件

packages:
  # 所有在 packages/  子目錄下的 package
  - 'packages/**'

注意

包最好只使用 pnpm 進(jìn)行管理，如果和 npm、yarn 進(jìn)行混用，可以會(huì)出現(xiàn)一些兼容性問(wèn)題。下面我們將 npm、yarn 進(jìn)行禁用，方法是添加 preinstall npm hook 鉤子，這個(gè)鉤子會(huì)在安裝模塊前觸發(fā)，檢查該代碼是否是使用 pnpm 運(yùn)行，如果不是的話會(huì)推出并提示錯(cuò)誤。

"scripts": {
    "preinstall": "npx only-allow pnpm"
}

常用語(yǔ)法

• 如果一個(gè)包是子包都需要的，那么我們可以把這個(gè)包安裝到主包

# -w 全局安裝
pnpm i 包名 -S/-D -w 

• 如果只想在某一個(gè)子包進(jìn)行安裝

# --filter 是用來(lái)指定子包
pnpm i 包名 -S/-D --filter 子包的名稱(chēng)

# 或者直接切換到子包的目錄進(jìn)行安裝
pnpm i 包名 -S/-D

• 當(dāng)一個(gè)子包需要引用另一個(gè)子包

# 通過(guò)這個(gè)命令，可以在子包2中引用子包1
pnpm i 子包1 --filter 子包2