在 Turborepo 中使用 Storybook

Storybook (在新标签页中打开) 是一种在隔离环境中构建 UI 组件的流行方式。通过将 Storybook 放入您的 Turborepo 中，您可以轻松地在应用程序旁边开发设计系统。如果您想使用模板，本指南将引导您如何在 Vercel 上构建 此 Storybook/Turborepo 模板 (在新标签页中打开)。

指南

本指南将向您展示如何

1. 在 Monorepo 中设置 Storybook
2. 创建您的第一个故事
3. 确保 Storybook 与您的其他任务一起正常工作

1. 创建您的 Monorepo

如果您没有现有的项目，请使用我们的 快速入门 创建新的 Monorepo。

npx create-turbo@latest

2. 添加新的 workshop 应用程序

Storybook 需要一个构建器来使用，因此我们将创建一个 Vite 应用程序。

cd apps
npm create vite

按照提示创建名为“workshop”的应用程序，作为 React、TypeScript 应用程序。

接下来，我们需要搭建 Storybook

cd workshop
npx sb init --skip-install
npm install --save-dev @storybook/cli   # Manually install deps and CLI

3. 为您的 Button 组件设置故事

Storybook 脚手架在 /src/stories 目录中创建了一些故事和 React 组件。要为来自 ui 包的按钮创建故事，我们将用自己的内容替换 Button.stories.tsx 中的导入。

1. 更新 ui 包中的 Button，使其与故事的规范相匹配。

interface Props {
  primary?: boolean;
  size?: "small" | "large";
  label?: string;
}
 
export const Button = ({
  primary = false,
  label = "Boop",
  size = "small",
}: Props) => {
  return (
    <button
      style={{
        backgroundColor: primary ? "red" : "blue",
        fontSize: size === "large" ? "24px" : "14px",
      }}
    >
      {label}
    </button>
  );
};

2. 将 ui 包添加到 workshop 应用程序

{
  // ...
  {
    "dependencies": {
      "ui": "*",
      // ...
    }
  }
}

3. 替换 Button.stories.tsx 中的 Button 导入，使其来自您的 ui 包

import { Button } from 'ui'

4. 对齐任务

我们需要做的最后一件事是确保 Storybook 与您的其他任务对齐

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

为了确保构建缓存，您首先需要将 storybook-static 添加到您的 .gitignore 文件中。然后，将 storybook-static 添加到您的 turbo.json 构建任务的输出中。

{
  "pipeline": {
    "build": {
      "outputs": [
        "dist/**",
+       "storybook-static/**"
      ]
    }
  }
}

您的 dev 和 build 任务现在将包含 Storybook，允许您与应用程序一起开发 Storybook，并享受与其他应用程序相同的缓存构建。

在 Vercel 上部署

让我们部署您的 Storybook 项目。

在项目设置的“常规”选项卡上的“构建和开发设置”中，将您的“输出目录”更改为 storybook-static。