介绍
Storybook是一种用于独立开发 UI（用户界面）组件的开源工具。
这意味着开发人员可以在独立于应用程序的环境中创建 UI 组件，而无需担心不稳定的数据、未完成的 API 或业务逻辑。这使您可以放心地运送组件。
Storybook 集成了大多数前端框架，包括 React、Vue 和 Angular。
在本文中，您将了解如何在您的项目中使用 Storybook。
检查 Storybook 的用例
采用 Storybook 有几个用例：
- 组件库：通过 Storybook 的工作方式，您可以通过利用将应用程序中的所有组件放在一个位置并能够测试组件的每个状态的过程来维护组件库。
- 设计系统：设计系统是一系列可以以不同组合重复使用的组件。设计系统允许您大规模管理设计。使用 Storybook，您可以获得开箱即用的设计系统。
- 可视化测试：借助 Storybook 插件，您可以集成可视化回归测试，以测试并保持组件库的一致性，无论它有多大。
- 跨团队共享：Storybook 可以跨团队共享，因为它可以部署为单独运行的静态站点。它可以在团队中的设计师和项目经理之间共享，以对组件的当前设计提供反馈或评论，从而改善团队内部的协作。
几个团队依靠 Storybook 来完成组成组件库的繁重工作，并将其作为设计系统的构建块。公司如Salesforce的，装饰主义，GOV.UK和GitHub的使用故事书来构建和分发UI组件的影响数百万人。
用故事书写故事
故事书是针对不同组件的不同故事的组合。故事是返回可以渲染到屏幕的东西的函数。一个故事可以包含一个组件的单一状态，也可以被视为一个组件的可视化表示。
使用 Storybook 构建 UI 组件意味着您将应用程序中的所有组件都隔离开来，这样无论它们之间的连接如何，它们都能正常工作，并且可以作为单独的 UI 组件进行测试。
使用 Storybook 构建时，有多种方法可以在应用程序中构建和组织故事。
以下是stories.js组件目录中文件的目录创建策略示例：
.
└── src/
└── components/
└── button
└── button.js
└── button.stories.js
以下是stories目录外src目录的第二个目录组织策略的示例：
.
└── src
└── components
└── button.js
└── stories
└── button.stories.js
以下是stories在组件目录中具有子目录的第三种目录组织策略的示例：
.
└── src/
└── components/
└── button
└── button.js
└── stories
└── button.stories.js
遵循这些方法中的任何一种都是一个选择问题。您可以选择最适合您和您的团队的方式。
将 Storybook 与其他框架集成
Storybook 支持几乎所有可用的前端框架，为了让您与这些框架中的任何一个集成，故事书团队编写了一份指南，您可以按照该指南为各个框架设置故事书，其中包括：
使用社区插件可以支持其他框架：
- 余烬
- HTML
- 秘银
- 马可
- 苗条
- 暴动
- 预反应
- 雷克斯
使用 Storybook 插件
插件扩展了 Storybook 的功能和行为。
一个例子是@storybook/addon-actions插件，它有助于记录 Storybook 中事件处理程序接收到的数据。
有一套预先安装的基本插件。以及社区提供的许多第三方插件。
可以在此插件页面上找到由 Storybook 团队策划的所有插件的列表。
将 Storybook 部署为静态应用程序
Storybook 可以与您正在开发的项目一起使用，因为它为开发人员提供了出色的功能体验，例如通过 Webpack HMR 进行热重载。但是您也可以通过将 Storybook 单独部署为静态站点来进一步扩展它。这将使您能够向所有人展示您的组件作为样式指南参考。
这将要求您使用以下脚本配置您的 Storybook：
{
"scripts": {
"build-storybook": "build-storybook -c .storybook -o .out"
}
}
现在，当您运行npm run build-storybookoryarn build-storybook这会将storybook目录中配置的 Storybook 构建到静态 Web 应用程序中并将其放置在名为out. 然后，您可以使用 GitHub Pages、Netlify 或 Now 等服务部署该目录。
结论
在本文中，您了解了 Storybook 的全部内容，以及在构建 Web 应用程序时何时可以利用它。
Storybook 适用于许多用例，将其集成到您的工作流程中将使您能够独立地为您的应用程序构建全面的 UI 组件。
