发布库

使用合适的工具，从 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 中，将使用 CommonJS 模块 (cjs) 的客户端的 main 指向 ./dist/index.js，将使用 ECMAScript 模块 (esm) 的客户端的 module 指向 ./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，它会自动在构建我们的应用程序之前构建我们的包。

设置开发脚本

我们的设置存在一个小问题。我们正在很好地构建我们的包，但它在开发中效果不佳。我们对 @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 将并行运行我们的 packages/math 开发任务和我们的 apps/web 开发任务。

我们的包现在处于我们可以考虑部署到 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 的所有加速中受益。