Storybook 6.5

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

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

Storybook 6.5 是我们迄今为止扩展故事功能的*最大*版本。它增加了强大的交互测试和设计评审工作流程，同时提高了核心性能和兼容性。

• 🤖 交互测试，用于验证浏览器中的用户行为
• 🎨 Figma 插件，用于将故事连接到变体
• 🏎️ Webpack 5 懒加载编译，启动速度提升 3 倍
• ⚡ Vite 构建器，实现近乎即时的重建
• 💯 数百项更多改进和生活质量提升

用户行为交互测试

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

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

交互测试的工作原理

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

“交互”面板可视化每个模拟的交互。如果测试失败，请使用浏览器开发工具检查 UI。调试非常轻松，因为您可以在适当位置查看和检查 UI。

您甚至可以启用回放控件（实验性）选项，以在交互中来回步进。

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

阅读 交互测试公告 或配套的 交互测试教程，以了解有关测试运行器的更多信息。

用于设计评审的 Figma 插件

Storybook Connect 是一个新的插件，可将故事链接到 Figma 变体。它可以帮助您比较实现与设计规范，从而加快移交和评审速度。我们很高兴与 Figma 团队合作推出此工作流程。

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

Figma 插件的工作原理

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

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

阅读 Figma 插件公告，以获取有关该插件的更多信息以及有关如何设置它的说明。

更快的开发者体验

虽然新的集成往往会吸引所有注意力，但我们继续加强 Storybook 的核心并进行实质性的性能改进。

6.5 专注于通过缩短启动和重建时间来加快本地开发体验。当与最近版本中的所有性能工作（如下）相结合时，6.5 是我们有史以来*最快*的 Storybook。

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

Webpack 5 懒加载编译，启动速度更快

懒加载编译显着提高了 Storybook 在开发期间的启动和重建时间，尤其是对于较大的 Storybook。我们看到启动时间快了 3 倍，重建时间缩短了 2 倍。

它由 Next.js 开创，Next.js 在开发中立即启动，并在您导航到页面时逐步构建页面。Webpack 5 现在提供懒加载编译作为内置功能。Storybook 使用它来快速启动。当您访问故事时，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 的未来对等。

我们很高兴将 Vite 构建器引入 Storybook 的核心。该软件包使用 Storybook 命名空间来指定官方支持 - 现在是 @storybook/builder-vite。我们还开始进行各种 DX 改进，例如将 Vite 自动检测添加到我们的 storybook init CLI 命令中。

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

数百项更多改进

Storybook 在各个层面不断改进。6.5 包含数百项更多修复、功能和调整。浏览与 6.5.0-* 匹配的 更新日志，以获取完整的更改列表。亮点包括

• ✅ React 18 支持
• ✅ Emotion11 和 React Router 预捆绑，以避免版本冲突
• ✅ 条件控件，以获得更好的 Knobs 对等性
• ✅ 选择加入 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，创建问题或提交拉取请求。在 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