發佈函式庫

使用正確的工具，從單體儲存庫發佈套件到 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 之前，我們需要考慮一件事。我們剛剛在我們的單體儲存庫中新增了一個任務相依性。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 - 根據提取請求上的語義版本標籤產生發行版本
• microsoft/beachball - 最陽光的語義版本編號器

發佈

一旦您的套件被打包，您就可以將其發佈到 npm 註冊表。

我們建議您查看 Changesets 文件。以下是我們建議的閱讀順序

1. 為什麼使用 changesets？ - 一個帶您了解基礎知識的簡介。
2. 安裝說明
3. 如果您使用的是 GitHub，請考慮使用Changeset GitHub 機器人 - 一個提醒您將 changesets 新增到 PR 的機器人。
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 時，您的單體儲存庫會被建置、檢查、測試和發佈 - 而且您可以從 Turborepo 的所有加速中受益。