儲存庫
文件
單一儲存庫手冊
發佈套件
套件化

在單一儲存庫中套件化

與 內部 套件不同，外部套件可以部署到 npm（在新分頁中開啟） 並 在本地使用。在本指南中，我們將同時將套件打包到 ECMAScript 模組（在新分頁中開啟） (esm) 和 CommonJS 模組（在新分頁中開啟） (cjs)，這是 npm 上最常用的格式。

設定建置指令碼

讓我們從使用我們的 內部套件 教學課程建立的套件開始。

在那裡，我們建立了一個 math-helpers 套件，其中包含幾個用於加法和減法的輔助函式。我們認為這個套件足夠好，可以用於 npm，所以我們將對其進行打包。

在該教學課程的最後，我們在 /packages 下設定了一個套件，如下所示

├── apps
│   └── web
│       └── package.json
├── packages
│   └── math-helpers
│       ├── src
│       │   └── index.ts
│       ├── tsconfig.json
│       └── package.json
├── package.json
└── turbo.json

我們將使用一個打包器，將 build 指令碼新增到 math-helpers。如果您不確定要選擇哪一個，我們建議使用 tsup（在新分頁中開啟）。

首先，使用 套件管理員 在 packages/math-helpers 中安裝 tsup。

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

tsup 預設將檔案輸出至 dist 目錄，因此您應該

  1. 將 dist 新增至您的 .gitignore 檔案中，以確保它們不會被 git 提交。
  2. 將 dist 新增至 turbo.json 中 build 的輸出中。
{
  "pipeline": {
    "build": {
      "outputs": ["dist/**"]
    }
  }
}

這樣一來，當執行 tsup 時，Turborepo 便可以 快取 輸出。

最後，我們應該更新我們的套件進入點。在 package.json 中，將 main 指向 ./dist/index.js 以供使用 CommonJS 模組的客戶端 (cjs)，將 module 指向 ./dist/index.mjs 以供使用 ECMAScript 模組的客戶端 (esm)，以及將 types 指向類型定義檔案 - ./dist/index.d.ts

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

不需要同時將 cjs 和 esm 進行套件化。然而，建議這麼做，因為這樣可以讓你的套件在更多元的環境中使用。

如果您在使用 main、module 和 types 時遇到錯誤，請查看 tsup 文件（在新分頁中開啟）。

打包是一個複雜的主題，我們沒有空間在這裡涵蓋所有內容！

在我們的應用程式之前建立我們的套件

在我們可以執行 turbo run build 之前，有一件事我們需要考慮。我們剛剛在我們的單一儲存庫中新增了一個 任務相依性。在 packages/math-helpers 中的 build 需要在 apps/web 中的 build 之前執行。

幸運的是，我們可以使用 dependsOn 來輕鬆設定這個。

{
  "pipeline": {
    "build": {
      "dependsOn": [
        // Run builds in workspaces I depend on first
        "^build"
      ]
    }
  }
}

現在，我們可以執行 turbo run build，它會在建立我們的應用程式之前自動建立我們的套件。

設定開發腳本

我們的設定有一個小問題。我們可以順利建置我們的套件，但它在開發階段無法正常運作。我們對 math-helpers 套件所做的變更並未反映在我們的應用程式中。

這是因為我們沒有 dev 腳本，無法在我們工作時重新建置我們的套件。我們可以輕鬆地新增一個

{
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts",
    "dev": "npm run build -- --watch"
  }
}

這會將 --watch 標記傳遞給 tsup，表示它會監控檔案變更。

如果我們已經在 turbo.json 中設定 開發腳本，執行 turbo run dev 將會並行執行我們的 packages/math 開發工作，以及我們的 apps/web 開發工作。

摘要

我們的套件現在已經準備好，可以考慮部署到 npm。在我們的 版本控制和發布 區段，我們將執行此操作。