大家好，我是Echa。

好消息，Storybook 官方正式发布了v7.0 版本。关注 Storybook，你会发现 Storybook 团队迭代速度非常快，使用的用户越来越多，github上的 star 也在增长。我一开始以为storybook是做组件库用的，随着我后面了解越来越深发现压根不是这么回事。

我在写组件库中发现，很多功能比如umi-library(现在改名umi-father)都有了，storybook和umi-farther用的都是docz，那我直接用docz，干嘛用storybook？后来经过我不断的翻storybook才发现storybook压根不是只为了做组件库存在的。

今天小编给大家详细介绍Storybook，希望对友友们所有帮助。

全文大纲Storybook 前言Storybook 介绍为什么使用Storybook？Storybook 环境搭建Storybook 插件推荐Storybook 7.0 更新重点内容Storybook 前言

现在网络的普及正在将更多的复杂性推向前端。它始于响应式网络设计，将每个用户界面从一个变成了1011000个不同的用户界面。随着时间的推移，诸如设备、浏览器、可访问性、性能和异步状态等附加需求不断增加。

React、Vue和Angular等组件驱动工具有助于将复杂的UI分解为简单的组件，但它们不是硬弹。随着前端的增长，组件的数量也会增加。成熟的项目可以包含数百个组件，产生数千个离散的变体。

更为复杂的是，这些UI调试起来很痛苦，因为它们被业务逻辑、交互状态和应用程序上下文所纠缠。

现代前端的广度压倒了现有的工作流程。开发人员必须考虑无数的UI变体，但还没有能力开发或组织所有这些变体。你最终会遇到这样的情况：UI更难构建，工作起来不那么令人满意，而且很脆弱。

解决方案

现在，每一个UI都是一个组件。组件的超能力在于，你不需要旋转整个应用程序来查看它们是如何渲染的。您可以通过传递道具、模拟数据或伪造事件来孤立地呈现特定的变体。

Storybook 被打包为一个小型的、仅用于开发的研讨会，与您的应用程序共存。它提供了一个独立的iframe来呈现组件，而不会受到应用程序业务逻辑和上下文的干扰。这有助于您将开发重点放在组件的每个变体上，甚至是难以触及的边缘案例。

Storybook 介绍

官网：

Github：

Storybook 是一个 ui 组件开发管理的工具，我们可以通过 story 独立创建组件，并且每个组件都有一个独立开发调试环境。Storybook 是运行在主应用程序之外，不依赖于项目，因此我们不必担心开发环境、依赖等问题导致不能开发组件。

Storybook 支持多个主流框架（React, Vue, Angular, Mithril, Ember）等。

Storybook 在 app 之外运行，这允许开发者独立地开发 UI 组件，这可以提高组件的重用性、可测试性和开发速度。所以可以快速构建，而不必担心应用程序特定的依赖关系。

特点：

附带了许多组件设计、文档、测试、交互性等内容易于使用的 API 使它易于配置和扩展，甚至被扩展到支持移动的本地开发

优点：

当你为组件编写Storybook 时，你可以免费获得一系列额外的好处。

开发更耐用的UI

隔离组件和页面，并将它们的用例作为故事进行跟踪。验证用户界面难以触及的边缘情况。使用插件模拟组件所需的上下文、API请求、设备功能等。

✅ 用较少的精力测试UI，而且不会出现薄片

Stories是一种实用、可重复的跟踪UI状态的方法。在开发过程中使用它们对UI进行现场测试。Storybook提供了用于自动辅助功能、交互和可视化测试的内置工作流。或者通过将故事导入其他JavaScript测试工具，将它们用作测试用例。

文档UI供您的团队重复使用

故事书是用户界面真实性的唯一来源。Stories为您的所有组件及其各种状态建立索引，使您的团队能够轻松地查找和重用现有的UI模式。故事书还可以根据这些故事自动生成文档。

分享用户界面的实际工作方式

故事展示了UI的实际工作方式，而不仅仅是它们应该如何工作的画面。这使每个人都对目前正在生产的产品保持一致。发布故事书以获得队友的批准。或者将它们嵌入到Wiki、Markdown和Figma中，以简化协作。

自动化UI工作流

故事书与您的持续集成工作流兼容。将其添加为CI步骤，以自动化用户界面测试，与队友一起审查实施情况，并获得利益相关者的批准。

如下图：

为什么使用Storybook？

Storybook 是用于开发和测试组件的出色工具，因为它允许您在与应用程序的其余部分隔离的情况下处理它们。这意味着您可以开发您的组件，而不必担心它们将如何与您应用程序中的其他组件或功能交互。这也意味着您可以在受控环境中测试您的组件，从而更轻松地查找和修复错误。

Storybook官方首页这样说道：storybook 为UI组件提供一个独立的沙箱环境，在这里无论是edge case还是难于遇到的状态都可以造出来。可以把use case 像故事一样展现出来。

平常的组件开发，程序猿需要把组件单独放置在一个页面不断的调试，非常不人性化。而storybook就单独为开发人员提供了一个页面，将组件放置在他们提供的页面中清晰可见。

简单的说，如果我们是开发react组件，就不需要启动react的打包编译启动页面浏览组件，只需要启动storybook为我们内置的页面即可浏览组建

如下图：

Storybook 环境搭建

StoryBook 的应用场景是你已经有个 Vue 项目，你想要对项目中的组件做一个交互性的展示。所以如何你一开始就拿个空项目自动安装是无法运行的，会提示你装 Vue 等等依赖。

1. 依赖安装

npm install @storybook/vue --save-devnpm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-de

2.入口配置

在项目根目录新建 .storybook/config.js 文件##.storybook/config.js#

import { configure } from '@storybook/vue'// 加载所有的组件故事configure(require.context('./stories', true, /\.js$/), module)

3.自定义wepback配置

在项目根目录新建 .storybook/webpack.config.js 文件

// 在这里你可以重写storybook 默认的webpack配置module.exports = async ({ config, mode }) => { // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION' // 新加less语法加载器 config.module.rules.push({  test: /\.less$/,  use: ["style-loader", "css-loader", "less-loader", {   loader: 'style-resources-loader',   options: {    patterns: [     path.resolve(__dirname, '../src/assets/style/common/mixins.less')    ]   }  }] })  // 新增@别名 config.resolve.alias = Object.assign(config.resolve.alias, {  '@': path.resolve(__dirname, '../src') })  // Return the altered config return config}

4.ajax跨域代理

在项目根目录新建 .storybook/middleware.js 文件

const proxy = require('http-proxy-middleware')module.exports = function expressMiddleware(router) { router.use(  '/api',  proxy({   target: ``, // 服务器 api地址   changeOrigin: true  }) )

5.相关插件介绍和使用

（1）knobs

knobs插件提供一个表单控制台，用户可以通过表单控制台来改变组件相关属性，展示不同属性下的组件

（2）actions

actions插件让用户在对组件的操作，可以反应在底部的日志里面

（3）storysource

addon插件可以让你直接在界面上看到当前sotry的源码

（4）docs

addon-docs插件让你可以为你的组件编写文档

（5）插件引入

安装相关依赖

npm install @storybook/addon-knobs @storybook/addon-actions @storybook/addon-storysource @storybook/addon-docs --dev

在项目根目录新建 .storybook/addons.js 文件

import '@storybook/addon-knobs/register';import '@storybook/addon-actions/register';import '@storybook/addon-storysource/register';import '@storybook/addon-docs/register';

6.展示自己的组件

在项目根目录下的stories文件夹中，新建一个任意名称的js文件

import Vue from 'vue';// 这里导入你自己的组件，import MyButton from '@/components/Button.vue'; export default { title: 'Button' }; export const withText = () => '<my-button>with text</my-button>'; export const withEmoji = () => '<my-button>   </my-button>'; export const asAComponent = () => ({ components: { MyButton }, template: '<my-button :rounded="true">rounded</my-button>'});

最后在根目录命令行启动storybook就搞定了

npm run storybook

Storybook 插件推荐actions插件

Github；

有actions，就会有个控制台一样的面板，有点像jest的mockfn一样，触发组件操作可以通过它提供的函数打印到面板上。 links插件

Github：

这个插件比较常用，可以在不同story间进行跳转，可以当是个a链接用。 knobs插件

Github：

这个插件厉害了，主要是用来生成变量，并可以进行在线切换用的。比如最简单的切换文字。很多组件上面都有文字，那么文字可能有长有短，就可以使用这个插件设定一个长的文字和一个短的文字，预览时可以切换。另外还有很多强大功能。甚至可以代替background插件改变背景颜色。 console插件

Github：

需要借助于action插件来输出，为啥要用这个插件说明上写了，说可能有些情况要。。。反正我有点没理解。 source插件

Github：

直接显示storybook上写的代码是哪一行写的。预览可以看上一个console的预览。docs插件

Github：

docs插件就不用说了吧，支持mdx，就是最后可以展示给不懂行的人看的文档。我自己写了个组件库玩，还没写完，很多高级功能都没用，感觉这些功能比较适合团队开发，我一个人当然图快，主要就是靠docs插件做文档，同时部署静态网站到githubpage。 viewport插件

Github：

这个插件可以对tab页新增个选项，跟chrome里的切换不同设备有点像，使用这个功能，就可以把一个组件放入不同设备大小的story里。 background插件

Github：

可以设置story的背景颜色之类，当然也有些简单方法可以不需要background插件就能设置背景。 accesssibility插件

Github：

又叫a11y插件，有点相当于组件级别的lint，可以自动检验组件是否符合某些规范。一般是用来检查视障人士能不能分辨之类的。基于axe搞的。storyshots插件

Github：

这个插件官网写的让人有点晕，实际还分成2个插件，都是jest相关。主要插件是storyshots，它可以把jest运行结果置于底部控制台页上，介绍说还可以拿到旧代码快照什么的，有点没懂怎么搞。另一个插件是storyshots-puppeteer，基于上面那个，pupeteer就有点像selenium一样开个虚拟浏览器去做测试。

好用的社区插件

官方插件就上面那些，有些社区插件写的也很不错，可以看看。 storybook-mobile插件可以给你的移动端网站用户体验上自动提供建议。这个功能相当6啊，对于移动开发经验不足的人有很多帮助。 storybook-design-token插件用于制作模拟graphql的插件，相当于可以模拟个假graphql传来的数据进行展示与调试。这个插件我个人觉得适合比较大的项目，我们写样式往往要制作多个变量，比如antd那个样式文件，定义了很多很多变量，还有动画之类的，但人脑肯定记不过来，就算记得了也可能记不得它是什么效果。有了这个插件，就可以把变量和效果全部展示出来。在开发过程中提供帮助。Apollo Storybook Decorator插件

Githubh：

用于制作模拟graphql的插件，相当于可以模拟个假graphql传来的数据进行展示与调试。

storybook-graphql-kit 插件

Github：

也是graphql的一套工具，可以在线修改数据之类。

Readme 插件

Github：

这个功能有点对标了docs插件，感觉适合纯内部分享使用，它可以对每个story做一个文档说明，并且功能和docs差不多，就是docs是在tab页并且可以独立输出，这个是在addons界面，并且不是默认展现，每个都需要点一下看见。

storybook-addon-versions 插件

这个插件不支持storybook5，有段时间没维护了，就说一下功能吧，就是可以通过配置版本号实现各个版本的组件库中穿梭。比如我1.0.0的button是一个样子，1.0.1的button是另一个样子，那么就可以来回切换看。

story2sketch 插件

Github：

很多设计师会用sketch软件，这个工具可以把storybook的文件导出，导入给sketch使用。不过这个只支持5以下，storybook6本身就可以自己导出给sketch了。

jsx插件

Github：

这个插件感觉有点对标source，或者是docs部分功能。可以显示story中jsx怎么写的。

storybook-addon-react-live-edit 插件

Github：

在线实时编辑，感觉这个功能有点对标knobs。

i18n 插件

全局国际化用。

storybook-host 插件

这个插件可以设定故事iframe设定些属性。

插件文档地址

Specifications Addon 插件

这个插件可以用来整合一些测试工具到storybook上，有点类似storyshots插件

Storycap 插件

这个插件名字起的挺好啊，用途就是通过puppeteers来对每个故事截图，然后生成到文件夹里。

storybook-addon-responsive-views 插件

响应式布局一次头全预览！不过感觉加了viewport然后使用docs插件也能做到。

Storybook Playroom Addon 插件

可以同时浏览在不同分辨率下的效果。

storybook-addon-theme-playground 插件

可以对每个story设置主题，有点像做好参数的knob。

Storybook 7.0 更新重点内容

Storybook是黄金标准的UI工作坊环境。由于其无与伦比的框架兼容性和丰富的开发、文档和测试功能，Monday.com、the Guardian、Intuit和许多其他公司的团队在整个行业中都在使用它。

今天，我很高兴地宣布《Storybook 7》（SB7），这是官方两年多来的第一次重大发行，也是迄今为止最大的一次发行。

它包括：

⚡ 一流的Vite支持 由新的Frameworks API提供的NextJS和SveltKit的零配置支持 组件故事格式3，具有改进的类型安全性 文档大修：支持MDX2并简化文档块 UI设计刷新✅ 提高交互测试和测试覆盖率 通过预绑定和生态系统CI增强稳定性 每一级都有数百项改进

Storybook: the next chapter

Storybook 始于2016年。从那时起，官方率先提出了UI研讨会环境的想法，用于组件驱动的开发、文档和测试。

在此期间，前端生态系统发生了巨大变化。IE11终于消失了。TypeScript正在迅速占据JavaScript领域。Vite、Turbopack和Rspack正在给Webpack带来一些激烈的竞争。而pnpm现在是一个主要的npm替代方案。

Storybook 随着这些变化而发展，我们长期以来一直支持主流惯例和新兴的最佳实践。例如，早在Vite取得目前的成功之前，Storybook就在21年年中首次支持了Vite。

然而，渐进式适应是困难的。有时，你需要一次大的释放来清理甲板并使你的堆栈现代化。 Storybook 7就是这个版本！

Storybook 7 更新UI

使用Storybook 7的精简UI，您现在可以比以往任何时候都更轻松地发布出色的UI。画布大小已逐边扩展，为组件提供了更多空间。官方通过改进的间距和更精细的菜单增强了侧边栏，同时保持了信息密度不变。此外，官方还重新绘制了200多个自定义图标，以获得更清晰的视觉效果和更快的加载速度。让我们不要忘记自动黑暗模式！

Vite、NextJS和SveltKit的零配置支持

Storybook 7引入了零配置Vite、NextJS和SveltKit支持。我们新的Framework API根据您的应用程序设置配置Storybook，包括您选择的生成器（Webpack和Vite）、渲染器（React、Vue、Angular、Svelte、HTML）等！

对于Vite来说，Webpack现在已经不复存在了。Storybook会根据应用程序的Vite设置自动进行配置，从而减少安装大小和启动时间。阅读更多故事书中的一流Vite支持。

对于NextJS，Storybook现在自动模拟路由器。还有对实用程序的内置支持，包括next/font、next/image和绝对导入。请自动在集成Next.js和Storybook中阅读更多内容。

对于SvelteKit，这意味着框架特定的设置是自动配置的，例如使用$app/path安全检索资产路径，支持$app/stores和特殊的$lib导入别名，以及使组件能够访问$app/environment。在SvelteKit的故事书中阅读更多内容。

改进型安全性的CSF3

Storybook 7通过将组件故事格式3（CSF3）设置为默认格式，为编写故事带来了重大改进。与早期版本相比，CSF3具有两个主要优势：简洁性和可重用性。它通过丢弃大量样板来简化代码，并自动化故事的各个方面，如标题和侧边栏位置（基于磁盘位置）。

改进型安全性

官方改进了CSF3中的TypeScript支持。更严格的类型提供了更好的编辑器内检查和自动完成，这对TypeScript用户来说是一个巨大的生活质量升级。

CSF3迁移

官方提供一个codemod，可以自动将您现有的故事转换为CSF3语法，为您节省升级时间。但是SB7是完全向后兼容的，所以如果你还没有准备好升级，你不需要改变任何东西。

npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.js"

支持MDX2的文档大修

《Storybook 7》对《Storybook 文档》的全面修订是SB7中最大的变化，标志着与以前的《Storybook 》相比有了巨大的改进。

Autodocs现在以组件为中心

在Storybook 7中，您现在可以将文档直接附加到组件上。页面显示在侧边栏中，旁边是组件的故事，而不是以前的选项卡式UI。

您可以通过添加autodocs标记为组件启用自动生成的文档页面。

使用MDX 2改进了手动文档

Storybook 7包含支持MDX2的增强型手动文档。它带来了许多好处，包括改进的性能和人体工程学。新版本的编译速度快了25%，生成的代码运行速度是原来的两倍。此外，它还为在JSX元素中嵌套markdown提供了更好的支持。

为了适应一些突破性的变化，Storybook将在整个7.x时间段内保持对MDX1的选择加入支持，确保我们的用户平稳过渡。

Storybook 7 鼓励所有用户在CSF3中定义故事，然后在MDX中引用它们。这让你两全其美：在写故事时进行类型检查和自动完成，再加上使用markdown轻松创作。您可以使用下面的Storybook 7迁移脚本将现有的MDX故事文件拆分为单独的MDX和CSF文件。

npx storybook@latest migrate mdx-to-csf --glob "**/*.stories.mdx"

新文档块API–功能强大但简单

为了使您的文档更加有效，我们引入了一组更强大、更一致的文档块。这些UI块负责从呈现故事到显示源代码和生成args表的所有工作。他们可以使用of＝｛｝语法引用故事，这比引用故事ID字符串更安全、更干净。此外，我们还提供了一个useOf挂钩，用于创建自定义文档块，使您能够根据特定需求调整文档页面。

改进了交互测试和代码覆盖率

Storybook 已迅速成为测试组件的最佳选择。你可以通过附加一个play函数将故事转换为测试。然后，使用TestingLibrary和Jest中熟悉的语法来模拟事件并断言DOM结构。

这在测试复杂的UI交互时尤其有用，例如表单控件或其他有状态组件。您可以在浏览器中调试事件流，并使用我们的测试运行器从命令行并行执行所有测试。

覆盖率报告

在Storybook 7中，我们通过添加代码覆盖率改进了测试支持，该覆盖率可以扫描代码以查找未经测试的边缘案例。它可以帮助您编写更全面的测试，并增强您对所提供UI的信心

分组步骤

为了使您能够将交互组合成大家可读的组，我们在Storybook

// SignupForm.stories.ts// Replace your-framework with the name of your frameworkimport type { Meta, StoryObj } from '@storybook/your-framework';import { userEvent, within } from '@storybook/testing-library';import { SignupForm } from './SignupForm';const meta: Meta<typeof SignupForm> = {  title: 'SignupForm',  component: SignupForm,};export default meta;type Story = StoryObj<typeof SignupForm>;export const Submitted: Story = {  play: async ({ args, canvasElement, step }) => {    const canvas = within(canvasElement);    await step('Enter email and password', async () => {      await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');      await userEvent.type(canvas.getByTestId('password'), 'supersecret');    });    await step('Submit form', async () => {      await userEvent.click(canvas.getByRole('button'));    });  },};

生态系统CI提供更好的稳定性和更顺畅的升级

在快速变化的前端生态系统中支持数十个框架、渲染器和构建器是一项挑战。为了提高故事书的稳定性，我们开始将故事书视为一项服务，并希望在这个不断发展的环境中最大限度地提高其“正常运行时间”。

为了实现这一点，我们创建了Storybook生态系统CI。此功能针对大量标准项目配置矩阵测试StorybookPR。这一切都在一个公共状态页面中可视化，该页面显示了每日结果，并提供了Storybook稳定性的快照。如果你注意到一些东西似乎坏了，请查看此页面以了解故事书的运行情况。

设计插件样式以便于配置

使用Storybook设置样式工具对许多开发人员来说是一个常见的挑战。虽然有很多文章（包括我们博客上的几篇），但这些文章并不总是最新的，这导致了头痛和耗时的设置过程，其中充满了试错。

为了使这个过程更加简单明了，我们创建了一个新的样式插件。这是一个与框架无关的解决方案，可以与Tailwind、Material UI、Chakra、Emotion、Styled components、SASS和PostCSS等流行工具无缝配合。

样式加载项使您能够加载全局样式并将其应用于组件，以及使用主题提供程序包装故事。它甚至有一个主题切换器，让你可以轻松地在主题之间切换。或者，也可以使用参数覆盖故事级别的主题值。

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。