发布库

使用合适的工具,从 monorepo 发布包到 npm 注册中心可以是一个流畅的体验。

虽然本指南无法解决 robust 包所需的所有编译、打包和发布配置,但它将解释一些基础知识。

如果你想将 monorepo 中的某些包发布到 npm,你应该遵循此设置。如果你不需要发布到 npm,则应改用 内部包。它们设置和使用起来要简单得多。

打包

内部包 不同,外部包可以部署到 npm *并* 在本地使用。在本指南中,我们将把一个包打包成 ECMAScript 模块 (esm) 和 CommonJS 模块 (cjs),这是 npm 上最常用的两种格式。

设置构建脚本

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

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

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

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

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

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

  1. dist 添加到你的 .gitignore 文件中,以确保它们不会被提交到源代码管理。
  2. 在你的 turbo.json 中将 dist 添加到 build 的输出中。
Turborepo logo
./turbo.json
{
  "tasks": {
    "build": {
      "outputs": ["dist/**"]
    }
  }
}

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

最后,我们应该更新我们的包入口点。在 package.json 中,将 main 指向 ./dist/index.js 以供使用 CommonJS 模块 (cjs) 的客户端,将 module 指向 ./dist/index.mjs 以供使用 ECMAScript 模块 (esm) 的客户端,并将 types 指向类型定义文件 - ./dist/index.d.ts

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

并非必须同时打包到 cjsesm。但是,这是推荐的,因为它允许你的包在更广泛的环境中使用。

如果你在使用 mainmoduletypes 时遇到错误,请查看 tsup 文档

打包是一个复杂的话题,我们在这里没有足够的空间来涵盖所有内容!

在应用之前构建我们的包

在我们可以运行 turbo run build 之前,有一件事需要考虑。我们刚刚在 monorepo 中添加了一个 任务依赖packages/mathbuild 需要在 apps/webbuild **之前** 运行。

幸运的是,我们可以使用 dependsOn 来轻松配置这一点。

Turborepo logo
./turbo.json
{
  "tasks": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}

现在,我们可以运行 turbo run build,它将在构建我们的应用 **之前** 自动构建我们的包。

设置开发脚本

我们的设置有一个小问题。我们正在正常构建包,但在开发中效果不佳。我们对 @repo/math 包所做的更改并未反映在我们的应用中。

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

./packages/math/package.json
{
  "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 了。在我们的 版本和发布 部分,我们将这样做。

版本和发布

手动为 monorepo 中的包进行版本管理和发布可能会很麻烦。幸运的是,有一个工具可以简化此事 - Changesets CLI。

我们推荐 Changesets,因为它易于使用,并且 - 就像 Turborepo 一样 - 适合你已经习惯的 monorepo 工具。

一些替代方案是

发布

一旦你的包被打包,你就可以将其发布到 npm 注册中心。

我们建议查看 Changesets 文档。这是我们推荐的阅读顺序

  1. 为什么使用 changesets? - 一个带你了解基础知识的介绍。
  2. 安装说明
  3. 如果你使用 GitHub,请考虑使用 Changeset GitHub bot - 一个提醒你向 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 的更改

./.changeset/config.json
{
  // …
  "commit": true
  // …
}

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

./package.json
{
  "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

./.changeset/config.json
{
  // …
  "access": "public"
  // …
}

我们推荐 publish-packages,这样它就不会与 npm 内置的 publish 脚本冲突。

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