Storybook

创建一个 monorepo

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

npx create-turbo@latest

为应用创建目录

你需要一个目录来存放 Storybook 应用程序

mkdir apps/storybook
cd apps/storybook

添加 Storybook 应用程序

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

npm create storybook@latest

按照提示创建一个应用程序。在本指南的剩余部分，我们将假设使用 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 构建任务的 outputs 中

{
  "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 将需要你在你的 @repo/ui 包中安装 @storybook/react。

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

配置缓存

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

为了防止这种情况，请从根 turbo.json 中的 build 任务的 inputs 中排除 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 应用程序的缓存未命中。所有其他应用程序都应命中缓存。