介绍

Storybook是一个开源工具,用于单独开发UI(用户界面)组件。

这意味着开发人员可以在与应用程序分开的环境中创建UI组件,而不必担心虚弱的数据、未完成的API或业务逻辑。

Screenshot of the Storybook landing page.

Storybook 具有与大多数前端框架的集成,包括 React、Vue 和 Angular。

在本文中,您将介绍如何为您的项目使用 Storybook。

研究 Storybook 的使用案例

采用 Storybook 的几个用例:

组件库:通过故事书的工作方式,您可以通过将应用程序中的所有组件放在一个位置并能够测试组件的每个状态来维护组件库.
设计系统: 一个设计系统是一系列可以被不同组合再利用的组件. 设计系统允许您在规模上管理设计. 有了"故事书",就能得到一个设计系统出柜.
Visual Testing:使用Storybook addons,可以整合视觉回归测试,以测试和保持组件库的一致性,无论大小.
联合国团队共享: 故事书可以跨团队共享,因为故事书作为静态站点的部署方式完全靠自己运作. 它可以由一个团队的设计者和项目管理者分享,就目前改善团队内部合作的组件设计提供反馈或评论。 .

一些团队依靠 Storybook 来完成构成组件库的重大的举动,同时也作为其设计系统的构建块。公司如 Salesforce, Artsy, GOV.UK,和 GitHub使用 Storybook 构建和分发影响数百万人的 UI 组件。

一个故事书是不同组件的不同 stories 组合。故事是返回可以渲染到屏幕的东西的函数.一个故事可以包含一个组件的单个状态,或者可以被视为组件的视觉表示。

使用 Storybook 构建 UI 组件意味着您可以将应用程序中的所有组件隔离,以便它们独立于它们之间的连接,并且可以作为独立的 UI 组件进行测试。

使用 Storybook 构建时,在您的应用程序中有几种方法来构建和组织故事。

以下是组件目录中的 stories.js 文件的目录起源策略的示例:

1.
2 └── src/
3  └── components/
4   └── button
5    └── button.js
6    └── button.stories.js

以下是第二个目录组织策略的示例,其中故事目录不在src目录之外:

1.
2 └── src
3  └── components
4   └── button.js
5 └── stories
6  └── button.stories.js

以下是组件目录中的故事子目录的第三目录组织策略的示例:

1.
2 └── src/
3  └── components/
4   └── button
5    └── button.js
6    └── stories
7     └── button.stories.js

遵循这些方法是你的选择,你可以选择什么最适合你和你的团队。

Storybook支持几乎所有可用的前端框架,以便您与这些框架中的任何一个集成, Storybook 团队编写了一本指南,您可以遵循为单个框架设置故事书,其中包括:

支持其他框架是通过社区添加剂实现的:

Addons 扩展 Storybook 的功能和行为。

一个例子是@storybook/addon-actions插件,这有助于在 Storybook 中记录事件处理器接收的数据。

有一套已预安装的 essential 附加组件,以及许多由社区提供的第三方附加组件。

由 Storybook 团队编制的所有添加剂的列表可以在此(https://storybook.js.org/addons/)找到。

Storybook 可以与您正在开发的项目一起使用,因为它为开发人员提供了很好的功能体验,例如通过 Webpack HMR 进行热重载,但您也可以通过部署 Storybook 作为一个静态网站来进一步扩展。

这将要求您使用此脚本配置您的剧本:

1{
2  "scripts": {
3    "build-storybook": "build-storybook -c .storybook -o .out"
4  }
5}

现在当你运行npm run build-storybook或yarn build-storybook时,它将将在storybook目录中配置的 Storybook 构建成静态的 Web 应用程序,并将其放置在名为out的目录中。

在本文中,您了解了 Storybook 是关于什么以及在构建 Web 应用程序时何时有用。

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