內部套件

內部套件是僅供在單一儲存庫內部使用的套件。它們對於在封閉原始碼單一儲存庫中的應用程式之間共用程式碼非常有用。

內部套件可以快速建立，而且如果最後您想要將它們發布到npm，則可以將它們變成外部套件。

是什麼讓套件成為內部套件？

外部套件會在將檔案放到套件登錄之前透過套件管理程式執行其檔案。這表示它們需要處理許多工具。

• 套件管理程式：用於建置套件
• 版本控管：協助版本控管和發行
• 發布：用於發布套件

如果您想要在本地使用那些檔案，您也需要

• 開發腳本：用於在檔案變更時在本地套件管理程式中套件

由於內部套件未發布，因此我們可以略過所有這些步驟。我們不會自己套件管理我們的套件，而是會讓匯入套件的應用程式為我們套件管理。

這聽起來很複雜，但其實設定非常容易。

我們的首個內部套件

我們將在單一儲存庫內建立一個共用的math-helpers套件。

1. 建立您的單一儲存庫

如果您沒有現有的單一儲存庫，請使用我們的指南建立一個。

2. 建立一個新的套件

在 /packages 內，建立一個名為 math-helpers 的新資料夾。

mkdir packages/math-helpers

建立一個 package.json

{
  "name": "math-helpers",
  "version": "0.0.1",
  "dependencies": {
    // Use whatever version of TypeScript you're using
    "typescript": "latest"
  }
}

建立一個 src 資料夾，並在 packages/math-helpers/src/index.ts 中新增一個 TypeScript 檔案。

export const add = (a: number, b: number) => {
  return a + b;
};
 
export const subtract = (a: number, b: number) => {
  return a - b;
};

您還需要在 packages/math-helpers/tsconfig.json 中新增一個 tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "noEmit": true,
    "strict": true
  },
  "exclude": ["node_modules"]
}

太棒了！我們現在已經取得內部套件所需的所有檔案。

3. 匯入套件

我們現在要匯入套件並看看會發生什麼事。進入您的其中一個應用程式，並將 math-helpers 新增到其 package.json 的相依性中

{
  "dependencies": {
    "math-helpers": "*"
  }
}

從根目錄安裝所有套件以確保相依性運作。

現在從 math-helpers 匯入一個應用程式的其中一個原始檔

+ import { add } from "math-helpers";
 
+ add(1, 2);

您可能會看到一個錯誤！

Cannot find module 'math-helpers' or its corresponding type declarations.

這是因為我們錯過了一個步驟。我們尚未告訴我們的 math-helpers/package.json 我們的套件的進入點是什麼。

4. 修復 exports

回到 packages/math-helpers/package.json 並新增一個欄位：exports

{
  "name": "math-helpers",
  "exports": {
    ".": "./src/index.ts"
  },
  "dependencies": {
    "typescript": "latest"
  }
}

現在，任何匯入我們的 math-helpers 模組的內容都會直接指向 src/index.ts 檔案 - 這就是他們將會匯入的檔案。

回到 apps/web/pages/index.tsx。錯誤應該消失了！

5. 嘗試執行應用程式

現在，嘗試執行該應用程式的開發腳本。在預設的 turborepo 中，這會像這樣簡單

turbo dev

../../packages/math-helpers/src/index.ts
Module parse failed: Unexpected token (1:21)
You may need an appropriate loader to handle this file type,
currently no loaders are configured to process this file.
See https://webpack.dev.org.tw/concepts#loaders

> export const add = (a: number, b: number) => {
|   return a + b;
| };

6. 設定您的應用程式

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

7. 總結

我們現在可以在我們的 math-helpers 套件中加入任意數量的程式碼，並在我們的單一儲存庫中的任何應用程式中使用。我們甚至不需要建置我們的套件，它就能正常運作。

此模式對於建立可以輕鬆在團隊間共用的程式碼片段非常強大。

快速參考

快速參考 - 建立新的內部套件

1. 在 packages/<folder> 中建立一個新資料夾
2. 加入一個 package.json，其中 name 和 types 指向 src/index.ts（或 src/index.tsx）
3. 加入 src/index.tsx，其中至少有一個命名匯出
4. 從根目錄安裝您的套件

快速參考 - 匯入內部套件

1. 確保您 正確地匯入它
2. 確保您已 設定您的應用程式來轉譯它