建立內部程式碼包

建立一個空目錄

您需要一個目錄來放置程式碼包。我們在 ./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 應用程式建置之前建置，以便 ./packages/math/dist 中的執行階段程式碼在 web 應用程式捆綁時可用。