预览和构建文档

Storybook 允许您创建丰富且广泛的文档，这将帮助您和参与开发过程中的任何其他相关人员。开箱即用，您拥有不仅可以编写文档，还可以预览和构建它的工具。

预览 Storybook 的文档

在开发过程中的任何时候，您都可以预览您编写的文档。Storybook 允许您在使用了 --docs 标志时生成最终文档的预览。我们建议将其作为新脚本包含在您的 package.json 中。

{
  "scripts": {
    "storybook-docs": "storybook dev --docs"
  }
}

根据您的配置，当您执行 storybook-docs 脚本时。Storybook 将进入文档模式，并生成不同的构建。

它会查找可用的故事，无论是 MDX 还是 CSF，并根据您添加的文档来显示它...

此构建模式与正常的 Storybook 构建一样，存在一些注意事项。

• 顶级项目是指您组件的主要故事。
• 每个单独的故事现在都以扁平化的显示模式呈现，并配有一套不同的图标。这使得可以专注于文档本身。
• Storybook 的布局渲染方式不同。工具栏将不会显示。

发布 Storybook 文档

您也可以像发布您的 Storybook 一样发布您的文档。您可以使用 --docs 标志和 storybook build 命令。我们也建议将其作为脚本包含在您的 package.json 文件中。

{
  "scripts": {
    "build-storybook-docs": "storybook build --docs"
  }
}

根据您的配置，当执行 build-storybook-docs 脚本时，Storybook 将再次进入文档模式，并生成不同的构建，并将文档输出到 storybook-static 文件夹。

上面提到的相同注意事项将适用。

您可以使用任何托管提供商来部署您的文档，例如

• Vercel
• Netlify
• S3

详细了解 Storybook 文档

• Autodocs，用于为您的故事创建文档。
• MDX，用于自定义您的文档。
• Doc Blocks，用于编写您的文档。
• 发布文档，以自动化发布您的文档的过程。