发布库

使用合适的工具，从 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，它会自动在构建我们的应用程序之前构建我们的包。

设置 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 - 最阳光的语义版本提升器

发布

一旦你的包被打包，你就可以将其发布到 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 会被构建、linted、测试和发布 - 并且你将受益于 Turborepo 的所有加速功能。