Storybook 6.5

GitHub、Adobe、BBC 以及许多其他团队使用 Storybook，因为它能简化您的前端工作流程。您为细粒度的 UI 状态编写 stories，然后在开发期间使用它们来验证组件外观。

从那里，您可以重用 stories，在 QA 期间运行快照测试、视觉测试和可访问性测试。Storybook 甚至可以分析 stories 来自动生成文档。

Storybook 6.5 是我们迄今为止最大的版本，扩展了您可以使用 stories 做的事情。它增加了强大的交互测试和设计评审工作流程，同时改进了核心性能和兼容性。

• 🤖 交互测试，用于在浏览器中验证用户行为
• 🎨 Figma 插件，用于将 stories 连接到变体
• 🏎️ Webpack 5 延迟编译，启动速度快 3 倍
• ⚡ Vite 构建器，可实现近乎即时的重构建
• 💯 数百项其他修复和使用体验改进

用于用户行为的交互测试

交互测试允许您在浏览器中模拟和验证用户行为。这与现有的工作流程不同，现有工作流程要求您在命令行 (JSDOM) 中调试 UI 测试或启动繁琐的 QA 套件。

由 Jest、Playwright 和 Testing Library 提供支持，Storybook 交互测试为您提供了现代测试工具的所有功能，并封装在适合 UI 开发人员的便捷工作流程中。

交互测试工作原理

1. 编写一个 story 来设置组件的初始状态。
2. 使用 `play` 函数模拟行为
3. 编写断言 并在 Storybook 的交互面板中进行调试
4. 在 CLI 或 CI 中使用 Test Runner 运行测试

交互面板可视化了每个模拟的交互。如果测试失败，可以使用浏览器开发者工具检查 UI。调试变得轻而易举，因为您可以就地查看和检查 UI。

您甚至可以启用回放控件（实验性）选项，以便在交互中前后逐步查看。

更重要的是，Test Runner 可以通过hooks API（实验性）进行自定义。配置它以使用现有的 JavaScript 库运行其他自动化检查——性能、可访问性、视觉快照。

阅读交互测试公告或配套的交互测试教程，了解更多关于 test runner 的信息。

用于设计评审的 Figma 插件

Storybook Connect 是一款新插件，可将 stories 与 Figma 变体关联起来。它帮助您比较实现与设计规范，以加快移交和评审速度。我们很高兴与 Figma 团队合作推出此工作流程。

我们的目标是将设计师引入开发工作流程，以改善沟通。Storybook 中有很多用于查看设计的插件，但到目前为止，还没有办法将 stories 嵌入设计工具中。

Figma 插件工作原理

Figma 插件允许您直接在 Figma 工作区内与实时 story 实现进行交互。这有助于团队在设计过程早期解决不一致问题并识别可重用组件。

它通过在 stories 和设计变体之间建立持久链接来工作。您只需链接一次组件，它们就会自动与设计或实现的最新版本保持同步。

阅读Figma 插件公告，获取更多关于插件的信息和设置说明。

更快的开发者体验

虽然新集成往往会吸引所有人的注意力，但我们持续增强 Storybook 的核心并进行了大量的性能改进。

6.5 专注于通过缩短启动和重构建时间来加速本地开发体验。结合近期版本中的所有性能改进（见下），6.5 是我们发布过的最快的 Storybook。

• 6.5 更快的 DX：Webpack 5 延迟编译 & 官方 Vite 构建器
• 6.4 更快的加载时间：通过代码分割提升已发布 Storybooks 的加载速度
• 6.3 面向未来：支持 ESM 和 Webpack 5 稳定版
• 6.2 可扩展：重构 Storybook 以支持 Webpack 5 和 Vite 等现代构建器
• 6.1 更快的启动：放弃 Webpack DLL 并开始预构建 & 缓存管理器

Webpack 5 延迟编译，实现更快启动

延迟编译显著改善了 Storybook 在开发期间的启动和重构建时间，特别是对于大型 Storybooks。我们看到启动速度快了 3 倍，重构建时间缩短了 2 倍。

它由 Next.js 首创，后者在开发时即时启动，并在您导航到页面时逐步构建。Webpack 5 现在提供了延迟编译作为内置功能。Storybook 使用它来快速启动。当您访问 stories 时，Storybook 会按需构建它们。

当延迟编译与文件缓存和代码分割（在 6.4 中引入）结合使用时，我们的初步基准测试表明 Webpack 构建速度比 Vite 更快。

阅读延迟编译公告，获取更多信息和设置说明。

Vite 构建器，实现即时重构建

从 6.5 版本开始，Storybook 正式支持 Vite 作为构建引擎。凭借其闪电般的构建速度和现代开发者体验，Vite 已成为 Webpack 流行的打包替代方案。

Vite 的性能优势令人期待。根据我们对 IBM Carbon Design System 的真实世界基准测试，Vite 的热模块重载速度几乎是 Webpack 5 的 2 倍。

Storybook 在将近一年前通过Storybook Vite 构建器引入了实验性的 Vite 支持。从那时起，在 Ian VanSchooten、Eirik Sletteberg 和 Josh Wooding 的努力下，它稳步改进，与 Webpack 达到了未来的 parity（同等水平）。

我们很高兴将 Vite 构建器纳入 Storybook 的核心。该包使用 Storybook 命名空间来表示官方支持——现在是 `@storybook/builder-vite`。我们还开始进行各种开发者体验（DX）改进，例如为我们的 `storybook init` CLI 命令添加 Vite 自动检测。

要了解更多信息，请查看Vite 构建器文档。

数百项其他改进

Storybook 在各个层面持续改进。6.5 包含数百项其他修复、功能和调整。浏览匹配 6.5.0-* 的更新日志，查看完整的变更列表。亮点包括：

• ✅ 支持 React 18
• ✅ Emotion11 和 React Router 预打包，以避免版本冲突
• ✅ 条件控件，以实现更好的 knobs parity（一致性）
• ✅ 可选的 MDX2 支持，以提升文档编写体验
• ✅ 匿名、可选的遥测数据，以帮助确定改进优先级
• ✅ 全新简化的插件 API，使扩展 Storybook 变得更容易

此外，由于 João Cardoso 的辛勤工作，我们对 Storybook 的文档进行了重大更新。更改包括重新设计的测试部分以及专门介绍构建器的新部分。

1分钟安装

将现有 Storybook 项目升级到 6.4

npx storybook@latest upgrade

如果您来自 5.x 或更早版本，请查看Storybook 6 迁移指南。

或者，对于全新安装，将 Storybook 引导到现有应用中

npx storybook@latest init

参与其中

专业的 UI 开发人员每天都依赖 Storybook。当您采用 Storybook 时，您会获得一套工具、强大的插件和开箱即用的集成，这些都使开发更快。

该项目由 1,500 多名开源贡献者维护，并由指导委员会指导。如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建 issue 或提交 pull request。在 Open Collective 上捐赠。在 Discord 中与我们聊天——维护人员通常在线。在 Twitter 上或通过注册我们的邮件列表，及时了解 Storybook 的最新消息。

致谢

Storybook 6.5 由以下贡献者贡献。

@7rulnik @andarist @ankon @aritrakoley @avergos29 @burhanuday @cabbiepete @cameliaben @ch3coo2ca @chalbert @chee @clentfort @cocco3 @coly010 @darthtrevino @dmattia @domyen @dovydasnavickas @drakang4 @evancharlton @fbredius @flyingsquirrel-dev @franz-bendezu @fraserisland @frassinier @friederbluemle @gaetanmaisse @ghengeveld @giladtamam @guilledf @hiro0218 @huyenltnguyen @iagopiimenta @ianvs @inokawa @italoteix @ittaibaratz @j3rem1e @jacobia21 @jarvis1010 @jdgomezb @jodiwarren @jonathankolnik @jonbeller @jonniebigodes @josh-degraw @jsomsanith @justrhysism @kosai106 @kroeder @kylegach @laughnan @lhew @linker junhao @lonyele @lucacras @lucasgonze @mandarini @maqsudnhit @mariocadenas @marklb @matanbobi @matheo @matthewborgman @maxime-aknin @merceyz @methuselah96 @mgcrea @michaelarestad @mranyx @mrauhu @mrturck @murphyslaw @nam-hle @ndelangen @nevnet99 @nguyenyou @okonet @oligafner @oliviavoler @orrgottlieb @passbyval @patrick-mcdougle @pd4d10 @pepijnk12 @pewtro @phnessu4 @quickgiant @renbaoshuo @richorrichard @sebastiengllmt @shilman @silversonicaxel @sjwilczynski @souppower @srmagura @stefan-schweiger @symmetriq @taillook @thanarie @thibaudav @tmeasday @tomastomaslol @tooppaaa @valentinpalkovic @vanessahenderson @virtuoushub @wesleyboar @winkervsbecks @wivsw @xavierchevalier @yahma25 @yanick @yannbf @yhor1e @yngvebn @zarahzachz