您可能不需要 TypeScript 專案參考

名稱

Jared Palmer

X

@jaredpalmer

如果您曾在較大型的 TypeScript 程式碼庫或單一儲存庫中工作，您可能對專案參考相當熟悉。它們確實相當強大。

當您在 tsconfig.json 中參考一個專案時，會發生新的事情

• 從參考專案匯入模組將改為載入其輸出宣告檔 (.d.ts)
• 如果參考專案產生 outFile，則輸出檔案 .d.ts 檔案的宣告將在此專案中可見
• 執行建置模式 (tsc -b) 將自動建置參考專案，如果它尚未建置但需要的話
• 透過分隔成多個專案，您可以大幅提高類型檢查和編譯的速度、減少使用編輯器時的記憶體使用量，並改善程式邏輯群組的執行。

聽起來很棒！對吧？！嗯...也許吧。一旦您將參考新增至專案，您現在就需要持續更新它們，無論何時新增或移除套件。這有點糟。

嗯...如果您不需要這樣做呢？

「內部」TypeScript 套件

事實證明，您可能甚至不需要參考，或者使用我即將向您展示的模式（我稱之為「內部套件」）進行 TypeScript 中繼建置步驟。

「內部套件」是一個沒有 tsconfig.json 的 TypeScript 套件，其 package.json 中的 types 和 main 欄位都指向套件的未轉譯進入點 (例如 ./src/index.tsx)。

{
  "name": "@sample/my-internal-package"
  "main": "./src/index.ts"
  "types": "./src/index.ts", // yes, this works!
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

事實證明，TypeScript 語言伺服器 (在 VSCode 中) 和類型檢查器都可以將原始 .ts 或 .tsx 檔案視為其自己的有效類型宣告。最後一句話讀兩次就顯而易見了。但不太明顯的是，您可以將 types 欄位直接指向原始原始碼。

一旦您這樣做，只要您遵守 2 個規則，就可以在沒有專案參考或 TypeScript 建置步驟（透過 tsc 或 esbuild 等）的情況下使用此套件

• 內部套件的取用應用程式必須轉譯並類型檢查它。
• 您不應該將內部套件發佈到 npm。

就我所知，無論您是使用 Turborepo 還是其他工具，這種內部套件模式都適用於所有 yarn/npm/pnpm 工作區實作。我個人已經在幾種不同的元框架（請參閱下文）中測試過此模式，但我確信它也適用於其他框架。

Next.js

Next.js 13 可以自動轉譯和捆綁來自本機套件 (如單一儲存庫) 或來自外部相依性 (node_modules) 的相依性。

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
};
 
module.exports = nextConfig;

Vite

內部套件可以直接運作。不需要額外設定。

React Native

如果您使用Expo，並且使用expo-yarn-workspaces或@turborepo/adapter-expo套件，只要您以 iOS 或 Android 為目標，就可以使用內部套件。當您為這些平台執行 Expo 時，所有 node_modules 都會使用Metro自動轉譯。但是，如果您是以網路的 Expo 為目標，則內部套件將無法運作，因為 node_modules 奇怪地沒有為網路轉譯。

我已就此不一致性與 Expo 團隊聯繫。他們知道此事。我聽說這是一個遺留的問題。

此模式的優點

此模式很棒，因為它可以讓您免於額外不必要或重複的建置步驟。它還為您提供了專案參考的所有編輯器優勢，但無需任何設定。

注意事項

當您使用內部套件時，這有點像是告訴取用應用程式您有另一個原始碼目錄 — 這有利有弊。隨著您的取用應用程式成長，新增更多內部套件等同於將更多原始碼新增至該取用應用程式。因此，當您新增更多原始碼時，會有更多程式碼需要轉譯/捆綁/類型檢查...因此這可能會導致取用應用程式的建置速度變慢（因為有更多工作要做），但整體建置時間可能會更快（且更不複雜）。當/如果整體建置時間開始受到影響，您可能會決定將較大的內部套件轉換回具有 .d.ts 檔案和一般 TypeScript 建置步驟的「常規」套件。

如先前所述，此模式實際上與 Turborepo 沒有太大關係。它只是超級棒，而且我認為您應該知道它。由於我們正在積極開發 Turborepo 的預設套件建置規則（即「建置器」），我們將使用內部套件模式來跳過建置步驟。

說到漫長的建置時間...

在此厚顏無恥地宣傳一下。如果您正在閱讀這篇文章，並且您正在為建置和測試時間緩慢而苦惱，我很樂意向您展示 Turborepo 如何提供協助。我保證 Turborepo 會將您的單一儲存庫的建置時間縮短 50% 或更多。您可以在這裡要求即時演示。