如何使用Storybook构建JS组件

介绍

Storybook 是一个开源工具，用于独立开发 UI（用户界面）组件。

这意味着开发人员可以在独立于应用程序的环境中创建 UI 组件，而无需担心不稳定的数据、未完成的 API 或业务逻辑。这使您可以放心地运送组件。

Storybook 与大多数前端框架集成，包括 React、Vue 和 Angular。

在本文中，您将了解如何将 Storybook 用于您的项目。

检查 Storybook 的用例

采用 Storybook 有几个用例：

组件库：使用 Storybook 的工作方式，您可以通过将应用程序中的所有组件放在一个位置并能够测试组件的每个状态的过程来维护组件库。
设计系统：设计系统是一系列可以以不同组合重用的组件。设计系统允许您大规模管理设计。使用 Storybook，您可以获得一个开箱即用的设计系统。
可视化测试：使用 Storybook 插件，您可以集成可视化回归测试，以便测试并保持组件库的一致性，无论它有多大。
跨团队共享：Storybook 可以跨团队共享，因为它可以部署为单独运行的静态站点。它可以在团队中的设计师和项目经理之间共享，以对组件的当前设计提供反馈或评论，从而改善团队内的协作。

几个团队依靠 Storybook 来完成编写组件库的繁重工作，并且还作为他们设计系统的构建块。 Salesforce、Artsy、GOV.UK 和 GitHub 等公司使用 Storybook 构建和分发影响数百万人的 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
秘银
马尔科
苗条
暴动
预演
拉克斯

使用故事书插件

Addons 扩展了 Storybook 的功能和行为。

一个例子是 @storybook/addon-actions 插件，它有助于记录 Storybook 中事件处理程序接收到的数据。

有一套预装的 essential 插件。以及社区提供的许多第三方插件。

可以在此插件页面上找到由 Storybook 团队策划的所有插件的列表。

将 Storybook 部署为静态应用程序

Storybook 可以与您正在开发的项目一起使用，因为它为开发人员提供了出色的功能体验，例如通过 Webpack HMR 进行热重载。但是您也可以通过将 Storybook 单独部署为静态站点来进一步扩展此功能。这将使您能够向所有人展示您的组件作为样式指南参考。

这将要求您使用此脚本配置您的 Storybook：

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

现在，当您运行 npm run build-storybook 或 yarn build-storybook 时，这会将 storybook 目录中配置的 Storybook 构建到静态 Web 应用程序中，并将其放在名为 out 的目录中. 然后，您可以使用 GitHub Pages、Netlify 或 Now 等服务部署该目录。

结论

在本文中，您了解了 Storybook 的全部内容，以及在构建 Web 应用程序时什么时候可以利用它。

Storybook 适用于许多用例，将其集成到您的工作流程中将使您能够独立地为您的应用程序构建全面的 UI 组件。

继续学习教程，了解如何使用 React 和 Storybook 构建交互式 UI 组件。