建立內部套件

建立空的目錄

您需要一個目錄來放置套件。 讓我們在 ./packages/math 建立一個。

新增 package.json

接下來，為套件建立 package.json。 透過新增此檔案，您將滿足內部套件的兩個要求，使其可被 Turborepo 和您工作區的其餘部分發現

{
  "name": "@repo/math",
  "type": "module",
  "scripts": {
    "dev": "tsc --watch",
    "build": "tsc"
  },
  "exports": {
    "./add": {
      "types": "./src/add.ts",
      "default": "./dist/add.js"
    },
    "./subtract": {
      "types": "./src/subtract.ts",
      "default": "./dist/subtract.js"
    }
  },
  "devDependencies": {
    "@repo/typescript-config": "*",
    "typescript": "latest"
  }
}

讓我們逐項分解此 package.json

• scripts：dev 和 build 指令碼使用TypeScript 編譯器編譯套件。 dev 指令碼將監看原始碼的變更，並自動重新編譯套件。
• devDependencies：typescript 和 @repo/typescript-config 是 devDependencies，因此您可以在 @repo/math 套件中使用這些套件。 在真實世界的套件中，您可能會擁有更多 devDependencies 和 dependencies - 但現在我們可以保持簡單。
• exports：定義套件的多個進入點，使其可以在其他套件中使用 (import { add } from '@repo/math')。

值得注意的是，此 package.json 將內部套件 @repo/typescript-config 宣告為依賴項。 Turborepo 將識別 @repo/math 為 @repo/typescript-config 的依賴項，以排序您的任務。

新增 tsconfig.json

透過將 tsconfig.json 檔案新增至套件的根目錄，指定此套件的 TypeScript 組態。 TypeScript 具有 extends 金鑰，可讓您在整個儲存庫中使用基本組態，並視需要使用不同的選項覆寫。

{
  "extends": "@repo/typescript-config/base.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

您在這裡完成了四件重要的事情

• 位於 ./packages/typescript-config 中的 @repo/typescript-config/base.json 組態具有您需要的所有組態，因此您可以從它擴充。
• compilerOptions 中的 outDir 金鑰告訴 TypeScript 將編譯的輸出放在哪裡。 它與 package.json 中 exports 中指定的目錄相符。
• compilerOptions 中的 rootDir 金鑰確保 outDir 中的輸出使用與 src 目錄相同的結構。
• 根據TypeScript 規格，include 和 exclude 金鑰不會從基本組態繼承，因此您在此處加入了它們。

新增包含原始碼的 src 目錄

您現在可以為您的套件撰寫一些程式碼。 在 src 目錄內建立兩個檔案

export const add = (a: number, b: number) => a + b;

這些檔案對應到當您稍後執行 turbo build 時，tsc 將建立的輸出。

將套件新增至應用程式

您已準備好在應用程式中使用您的新套件。 讓我們將其新增至 web 應用程式。

  "dependencies": {
+   "@repo/math": "*",
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
  },

@repo/math 現在可在 web 應用程式中使用，您可以在程式碼中使用它

import { add } from '@repo/math/add';
 
function Page() {
  return <div>{add(1, 2)}</div>;
}
 
export default Page;

編輯 turbo.json

將新 @repo/math 程式庫的成品新增至 turbo.json 中 build 任務的 outputs。 這可確保其建置輸出將由 Turborepo 快取，以便在您開始執行建置時可以立即還原它們。

{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    }
  }
}

執行 turbo build

如果您已全域安裝 turbo，請在工作區根目錄的終端機中執行 turbo build。 您也可以使用套件管理員從 package.json 執行 build 指令碼，這將使用 turbo run build。

@repo/math 套件在 web 應用程式建置之前建置，因此當 web 應用程式捆綁時，./packages/math/dist 中的執行階段程式碼可用於 web 應用程式。