集成 Storybook

创建单体仓库

如果你没有现有项目，使用 create-turbo 创建一个新的单体仓库：

npx create-turbo@latest

你需要为 Storybook 应用程序创建一个目录：

mkdir apps/storybook
cd apps/storybook

在 apps/storybook 目录中，初始化一个新的 Storybook 应用程序：

npm create storybook@latest

按照提示创建应用程序。对于本指南的其余部分，我们假设使用 React 和 TypeScript。

现在，将你的 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/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)",
};

按照 上面的指南，将 ./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 将需要你在 @repo/ui 包中安装 @storybook/react。

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 应用程序的缓存未命中。所有其他应该命中缓存。