Storybook

创建单体仓库

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

pnpm dlx create-turbo@latest

创建应用程序目录

你需要一个 Storybook 应用程序的目录

mkdir apps/storybook
cd apps/storybook

添加 Storybook 应用程序

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

pnpm create storybook@latest

按照提示创建一个应用程序。在本指南的其余部分，我们将假定使用 React 和 TypeScript。

将你的 UI 套件添加到 Storybook

现在，将你的 UI 包安装到 Storybook 中。

pnpm add @repo/ui --filter=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 任务的 outputs 中

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

+ storybook-static

重新配置 Storybook sources

在 .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 移动需要你在 @repo/ui 包中安装 @storybook/react。

pnpm add @storybook/react --filter=@repo/ui --save-dev

配置缓存

因为 stories 现在位于 UI 包中，这些 stories 的更改可能会导致依赖于你的 UI 包的任何构建发生缓存未命中。但是，更改 story 并不意味着你的生产应用程序也应该发生缓存未命中。

为防止这种情况，请在根目录的 turbo.json 中将 stories 排除在 build 任务的 inputs 之外。你还需要创建一个 build:storybook 任务，稍后会用到

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

此外，在 storybook 应用程序中创建一个包配置，以便 stories **被具体地考虑到构建 Storybook 应用程序**

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