Storybook

建立一個 monorepo

如果您沒有現有的專案，請使用create-turbo建立一個新的 monorepo

npx create-turbo@latest

為應用程式建立一個目錄

您需要一個目錄來放置 Storybook 應用程式

mkdir apps/storybook
cd apps/storybook

新增 Storybook 應用程式

在 apps/storybook 目錄中，初始化一個新的 Storybook 應用程式

npx storybook@latest init

依照提示建立應用程式。在本指南的其餘部分，我們將假設使用 React 和 TypeScript。

將您的 UI 套件新增至 Storybook

現在，將您的 UI 套件安裝到 Storybook 中。

npm install @repo/ui --workspace=storybook

為您的 Button 元件設定一個 story

刪除 Storybook 鷹架工具建立的 src/stories 中的 stories 和元件。您將自行建立。

例如，以下是來自 @repo/ui/button 的 Button 元件的 story。

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '@repo/ui/button';
 
const meta = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
} satisfies Meta<typeof Button>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Primary: Story = {
  args: {
    appName: 'Button',
    children: 'I am a primary button.',
  },
};

將指令碼與您的任務對齊

最後，將新的 Storybook 應用程式整合到您的 Turborepo 中

{
  "scripts": {
    "dev": "storybook dev -p 6006", 
    "build": "storybook build"
  }
}

這些指令碼現在將會透過您的 turbo.json 中的 turbo dev 和 turbo build 任務執行。

為了確保當您執行 build 時檔案輸出會被快取，請將 storybook-static 新增至您的 turbo.json build 任務的輸出中

{
  "tasks": {
    "build": {
      "outputs": [
        ".next/**",
        "!.next/cache/**"
+       "storybook-static/**"
      ]
    }
  }
}

+ storybook-static

重新設定 Storybook 來源

在 .storybook/main.ts 中，將 config 中的 stories 路徑變更為您想要擷取的目錄。例如，如果您想要在 UI 套件中撰寫 stories

 
const config = {
  stories: [
-   "../src/**/*.mdx",
-   "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+   "../../../packages/ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
};

將 story 檔案移至 UI 套件

依照上方的指南，將 ./apps/storybook/src/stories/Button.stories.tsx 檔案移動到 ./packages/ui/src/Button.stories.tsx。

更新元件匯入，使其參考現在共同放置的模組。例如，在 story 的匯入中

- import { Button } from "@repo/ui/button";
+ import { Button } from "./button";

您還需要安裝撰寫 stories 所需的任何 Storybook 套件。例如，從上方移動 story 將需要您將 @storybook/react 安裝到您的 @repo/ui 套件中。

npm install @storybook/react --workspace=@repo/ui --save-dev

設定快取

由於 stories 現在位於 UI 套件中，因此對這些 stories 的變更可能會導致任何依賴您的 UI 套件的建置快取失效。但是，變更 story 並不表示您的生產應用程式應該錯過快取。

為了防止這種情況，請從您根目錄的 turbo.json 中 build 任務的輸入中排除 stories。您還需要建立一個 build:storybook 任務，您稍後會需要它

{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["$TURBO_DEFAULT$", "!**/*.stories.{tsx,jsx,mdx}"], 
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "build:storybook": {} 
  }
}

此外，在 storybook 應用程式中建立一個套件設定，以便 在建置 Storybook 應用程式時，特別考慮 stories

{
  "extends": ["//"],
  "tasks": {
    "build:storybook": {
      "dependsOn": ["^build:storybook"],
      "outputs": ["storybook-static/**"]
    }
  }
}

重新命名建置指令碼

最後，請確保您用於建置 Storybook 的指令碼使用我們剛才編寫的設定，方法是將其重新命名為任務的名稱

{
  "scripts": {
    "dev": "storybook dev -p 6006",
    "build:storybook": "storybook build"
  }
}

曾經是 "build" 的指令碼現在是 "build:storybook"，以確保 stories 包含在快取的雜湊中。

驗證您的設定

為了確保您的設定正確

1. 執行 turbo build:storybook build。您應該會看到快取失效。
2. 再次執行 turbo build:storybook build。您應該會看到所有快取命中。
3. 在您的 @repo/ui 套件中對 story 進行程式碼變更。
4. 再次執行 turbo build:storybook build。您應該 只看到 Storybook 應用程式的快取失效。其他所有內容都應該命中快取。