发布库

使用正确的工具，从 monorepo 发布包到 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 更改为指向使用 CommonJS 模块（cjs）的客户端的 ./dist/index.js，将 module 更改为指向使用 ECMAScript 模块（esm）的客户端的 ./dist/index.mjs，将 types 更改为类型定义文件 - ./dist/index.d.ts

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

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

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

幸运的是，我们可以使用 dependsOn 轻松配置此操作。

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

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

设置 dev 脚本

我们的设置有一个小问题。我们正在很好地构建我们的包，但它在开发中效果不佳。我们对 @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 中已经设置了dev 脚本，则运行 turbo run dev 将使我们的 packages/math dev 任务与我们的 apps/web dev 任务并行运行。

我们的包现在处于我们可以考虑部署到 npm 的位置。在我们的版本控制和发布部分中，我们将这样做。

版本控制和发布

在 monorepo 中手动版本控制和发布包可能很繁琐。幸运的是，有一个工具可以使事情变得容易 - Changesets CLI。

我们推荐 Changesets，因为它使用起来很直观，并且 - 就像 Turborepo 一样 - 适合你已经习惯的 monorepo 工具。

一些替代方案是

• intuit/auto - 根据拉取请求上的语义版本标签生成版本
• microsoft/beachball - 最阳光的语义版本 Bump

发布

一旦你的包被打包，你就可以将其发布到 npm 注册表。

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

1. 为什么要使用 changesets？ - 一个引导你了解基本原理的介绍。
2. 安装说明
3. 如果你使用的是 GitHub，请考虑使用 Changeset GitHub 机器人 - 一个提示你向 PR 添加 changesets 的机器人。
4. 你还应该考虑添加 Changesets GitHub action - 一个使发布极其容易的工具。

将 Changesets 与 Turborepo 一起使用

一旦你开始使用 Changesets，你将可以访问三个有用的命令

# Add a new changeset
changeset
 
# Create new versions of packages
changeset version
 
# Publish all changed packages to npm
changeset publish

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

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

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

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

{
  "scripts": {
    // Include build, lint, test - all the things you need to run
    // before publishing
    "publish-packages": "turbo run build lint test && changeset version && changeset publish"
  }
}

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

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

这意味着当你运行 publish-packages 时，你的 monorepo 将被构建、lint、测试和发布 - 并且你将受益于 Turborepo 的所有加速功能。