从构建到发布：Monorepo 的最佳实践

本文将介绍如何使用 pnpm 及 Monorepo 实现高效的代码构建和发布流程。

什么是 Monorepo？

Monorepo 是一种常用的代码管理方式，它将多个相关项目放在同一个代码仓库中，以便协同开发和维护。例如，Vue 就采用了 monorepo 的方式进行开发管理。

在 Vue 的 monorepo 中，代码库中包含了多个相关的子项目，例如 reactivity、runtime-core、compiler-core 等。每个子项目都有自己的 package.json 文件，这样每个子项目可以独立安装和运行。

这种方式的好处在于，不同的开发团队可以在同一个代码库中进行协作开发，而不需要每个团队都维护自己的代码库。这样可以减少代码的重复，更好地控制代码的质量和版本。此外，如果一个项目需要使用另一个项目中的代码，可以直接引用该项目，而不需要通过依赖包的方式进行引用，从而减少了开发的复杂度。

构建 Monorepo 项目

在使用 monorepo 管理项目时，pnpm 是一个优秀的选择，它有更快的安装速度和更少的磁盘空间占用，能够更好地处理多个项目之间的依赖关系。下面是使用 pnpm 搭建 Monorepo 项目的步骤：

1. 全局安装 pnpm：

1
npm install pnpm -g

2. 创建 monorepo 仓库：

1
mkdir monorepo && cd monorepo
2
pnpm init

3. 在根目录下添加 pnpm-workspace.yaml 文件，告诉 pnpm 哪些目录是工作区，并在安装依赖时将它们链接到一起。

1
packages:
2
  - 'packages/**'

4. 添加项目：

1
mkdir packages && cd packages
2

3
# pkg-a
4
mkdir pkg-a && cd pkg-a
5
pnpm init
6

7
# pkg-b
8
mkdir ../pkg-b && cd ../pkg-b
9
pnpm init

5. 安装依赖：

1
# 全局安装 -w: --workspace-root
2
pnpm add typescript -D -w
3

4
# 局部安装
5
pnpm add typescript -D --filter pkg-a
6

7
# 互相安装
8
pnpm add pkg-a -D --workspace --filter pkg-b

6. 写点代码：

1
export function sum(n: number, m: number) {
2
  return n + m
3
}

1
import { sum } from 'pkg-a'
2

3
sum(1, 2)

7. 在 packages/pkg-a/package.json 和 packages/pkg-b/package.json 中添加以下脚本：

1
{
2
  "scripts": {
3
    "build": "tsc index.ts"
4
  }
5
}

8. 在根目录的 package.json 中添加以下脚本：

1
{
2
  "scripts": {
3
    "build": "pnpm -r --filter=./packages/* run build"
4
  }
5
}

9. 根目录运行以下命令：

1
pnpm run build

此命令将执行 packages 目录下所有具有 build 命令的包。

发布 npm 包

在执行以下步骤之前，请确保已经将代码推送到链接的 git 远程仓库中。

使用 bumpp 进行版本控制，创建 tag 标签并推送到 远程 git 仓库

1. 安装 bumpp：

1
pnpm add bumpp -D

2. 在根目录的 package.json 中添加以下脚本：

1
{
2
  "scripts": {
3
    "release": "bumpp package.json packages/**/package.json"
4
  }
5
}

3. 在根目录运行以下命令：

1
pnpm run release

这个命令将自动升级你的 npm 包版本，创建 git 标签，并将更改推送到你的远程 git 存储库。

使用 GitHub Actions 自动发布 npm 包

1. 首先，确保 pnpm run release 运行成功，并将更改推送到远程 git 存储库。

2. 创建一个名为 .github/workflows/release.yml 的文件。

3. 在 release.yml 文件中添加以下代码：

1
name: Release
2

3
on:
4
  push:
5
    tags:
6
      - 'v*'
7

8
jobs:
9
  release:
10
    runs-on: ubuntu-latest
11
    steps:
12
      - uses: actions/checkout@v3
13
        with:
14
          fetch-depth: 0
15

25 collapsed lines
16
      - name: Setup node
17
        uses: actions/setup-node@v2
18
        with:
19
          node-version: '16'
20
          registry-url: https://registry.npmjs.org/
21

22
      - name: Install pnpm
23
        uses: pnpm/action-setup@v2
24
        with:
25
          version: latest
26

27
      - name: Install dependencies
28
        run: pnpm i
29

30
      - name: Build
31
        run: pnpm run build
32

33
      - name: Publish
34
        run: pnpm publish -r --access public --no-git-checks
35
        env:
36
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
37

38
      - run: npx changelogithub
39
        env:
40
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

4. 接下来，在 npm 上获取你的认证令牌。请注意，你需要拥有发布包的权限才能获得令牌。将令牌添加到 GitHub 仓库的 secrets 中。

5. 转到你的 GitHub 仓库的 “Settings” 页面，在左侧菜单中，单击 “Secrets and variables / Actions”。单击 “New repository secret” 按钮创建一个新的密钥，名称为 “NPM_TOKEN”，值为你在步骤 4 中获得的认证令牌。

6. 现在，当你推送一个带有标签的 commit 到 GitHub 仓库时，GitHub Actions 将会自动运行你的 release.yml 工作流程，并将你的 npm 包发布到 npm 官方网站。