发布库

从单体仓库发布包到 npm 仓库可以是一个流畅的体验，只要使用正确的工具。

虽然本指南无法解决构建强大包所需的所有可能的编译、打包和发布配置，但它会解释一些基础知识。

打包

与内部包不同，外部包可以部署到 npm 并且 在本地使用。在本指南中，我们将把包打包成 ECMAScript 模块（esm）和 CommonJS 模块（cjs），这是 npm 上最常用的格式。

设置构建脚本

让我们从使用内部包教程创建的包开始。

在那里，我们创建了一个 @repo/math 包，其中包含了一些用于加减数字的辅助函数。我们认为这个包已经足够好可以发布到 npm 了，所以我们要打包它。

我们将为 @repo/math 添加一个 build 脚本，使用打包工具。如果你不确定选择哪一个，我们推荐 tsup。

使用你的包管理器在 ./packages/math 包中安装 tsup，然后为它创建一个构建脚本：

{
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts"
  }
}

tsup 默认将文件输出到 dist 目录，所以你应该：

1. 将 dist 添加到你的 .gitignore 文件中，确保它们不会被提交到源代码控制中。
2. 将 dist 添加到你的 turbo.json 中 build 的输出中。

{
  "tasks": {
    "build": {
      "outputs": ["dist/**"]
    }
  }
}

这样，当运行 tsup 时，输出可以被 Turborepo 缓存。

最后，我们应该更新我们的包入口点。在 package.json 中，将 main 指向 ./dist/index.js（用于使用 CommonJS 模块的客户端），将 module 指向 ./dist/index.mjs（用于使用 ECMAScript 模块的客户端），将 types 指向类型定义文件 ./dist/index.d.ts：

{
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts"
}

在应用程序之前构建我们的包

在我们运行 turbo run build 之前，有一件事需要考虑。我们刚刚在单体仓库中添加了一个任务依赖。packages/math 的 build 需要在 apps/web 的 build 之前运行。

幸运的是，我们可以使用 dependsOn 轻松配置这个。

{
  "tasks": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}

现在，我们可以运行 turbo run build，它会在构建我们的应用程序之前自动构建我们的包。

设置开发脚本

我们的设置有一个小问题。我们的包构建得很好，但在开发时不太好用。我们对 @repo/math 包的更改没有反映在我们的应用程序中。

这是因为我们没有 dev 脚本在我们工作时重新构建我们的包。我们可以轻松添加一个：

{
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts",
    "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
  }
}

这将 --watch 标志传递给 tsup，意味着它会监视文件变化。

如果我们已经在 turbo.json 中设置了开发脚本，运行 turbo run dev 将与我们的 apps/web 开发任务并行运行我们的 packages/math 开发任务。

我们的包现在处于可以考虑部署到 npm 的状态。在我们的版本控制和发布部分，我们将做到这一点。

版本控制和发布

在单体仓库中手动进行版本控制和发布包可能很繁琐。幸运的是，有一个工具可以让事情变得简单 - Changesets CLI。

我们推荐 Changesets，因为它使用直观，而且 - 就像 Turborepo 一样 - 适合你已经习惯的单体仓库工具。

一些替代方案是：

• intuit/auto - 基于 pull requests 上的语义版本标签生成发布
• microsoft/beachball - 最阳光的语义版本控制工具

发布

一旦你的包打包完成，你就可以将其发布到 npm 仓库。

我们建议你查看 Changesets 文档。以下是我们推荐的阅读顺序：

1. 为什么使用 changesets？ - 带你了解基础知识的介绍。
2. 安装说明
3. 如果你使用 GitHub，考虑使用 Changeset GitHub bot - 一个提醒你在 PR 中添加 changesets 的机器人。
4. 你还应该考虑添加 Changesets GitHub action - 一个使发布变得极其简单的工具。

在 Turborepo 中使用 Changesets

一旦你开始使用 Changesets，你将获得三个有用的命令：

# 添加新的 changeset
changeset
 
# 创建包的新版本
changeset version
 
# 将所有更改的包发布到 npm
changeset publish

将你的发布流程链接到 Turborepo 可以使组织你的部署变得更简单和更快速。

我们建议配置 Changesets 自动提交 changeset version 的更改

{
  // …
  "commit": true
  // …
}

并在根 package.json 中添加一个 publish-packages 脚本：

{
  "scripts": {
    // 包括构建、lint、test - 发布前需要运行的所有内容
    "publish-packages": "turbo run build lint test && changeset version && changeset publish"
  }
}

如果你的包是公开的，将 Changeset 的 access 设置为 public：

{
  // …
  "access": "public"
  // …
}

这意味着当你运行 publish-packages 时，你的单体仓库会被构建、lint、测试和发布 - 并且你可以从 Turborepo 的所有加速中受益。