Storybook 6.3

Storybook 是业界标准的 UI 开发工作台，适用于组件和页面。Dropbox、Shopify、Stripe 以及数千个其他团队都在使用它。

开发者选择 Storybook 是因为它帮助他们专注于一件事：用户界面。应用程序开发已经非常复杂，Storybook 通过将 UI 问题与后端、API 和数据的噪音隔离开来，使您的工作更简单。

在 6.3 版本中，我们研究了 UI 开发者每天执行的任务——样式设计和测试——看看如何简化它们。我们很高兴分享新的可视化检查工具、在您的测试套件中重用 story 的实用程序以及改进的集成。

• 📐 样式：测量和勾勒 DOM 元素
• 🔌 测试：在 Jest、Testing Lib、Cypress 中重用 story
• 🚀 框架：Angular 12 Ivy、Lit 2 Web Components
• 🛠 构建工具：Webpack 5 稳定版、Vite
• 📦 打包：现代 ESM 性能选项
• 💯 更多数百项改进

一键检查 CSS 布局

Storybook 6.3 附带了新工具，使 CSS 调试变得轻而易举。前端开发者花费大量时间确保 UI 实现与设计规范相符，但要判断布局是否正确比以往任何时候都更加棘手。

Measure 帮助您检查间距。使用 m 键启用该插件，并将鼠标悬停在元素上以获取其尺寸、边距和内边距，这些信息将叠加在 DOM 节点之上。

Outline 帮助您发现错位或损坏的布局。单击一次即可切换页面上所有 UI 元素的 CSS 轮廓。轮廓充当视觉指南，使布局调试更容易。

Viewport 现在允许您使用键盘快捷键循环切换各种视口尺寸。这简化了在 Storybook 中开发响应式 UI 的过程。

Toolbars 现在也支持键盘快捷键。您可以从“键盘快捷键设置”页面完全自定义所有快捷键。

在您的测试中重用 story

Story 是测试，但用于 UI 组件状态。在底层，story 被编译为标准的基于 ES6 的模块。在 6.3 版本中，我们简化了如何在您的 React 和 Vue 测试套件中重用 story 的方法。

@storybook/testing-react 和 @storybook/testing-vue 分别针对 React 和 Vue，允许您将 story 导入到 Jest、Testing Library、Cypress 和 Puppeteer 等工具中。

您可以重用已经在 Storybook 中配置的场景设置代码。这意味着您可以专注于编写干净、简单的测试。不再有重复的样板代码。在 如何使用 Testing Library 测试 Storybook 中阅读更多内容。

框架：Angular 12、Lit 2

Storybook 支持每个主要的 Web 框架。全面的一流支持并非易事，但我们最近在 Vue 3 和 Svelte 上的工作表明，持续的投入会为用户带来巨大的收益。在 6.3 版本中，我们很高兴地宣布对 Angular 进行一流的升级，并扩展了 Web Components 支持。

Angular 12。 Angular 是最流行的框架之一，也是最具特色的框架之一。6.3 版本带来了大量改进，包括 Angular 12 支持（使用 Webpack 5！），以及实验性的 Ivy 渲染支持。它还包括备受期待的 Storybook Docs 功能，例如内联 story 渲染和动态代码片段生成。在 Storybook for Angular 中阅读更多内容。

Web Components Lit 2。 Web Components (WC) 中最大的新闻是 Lit 2，它是 Google 流行的 WC 库的更小、更快、与 SSR 兼容的全面改进版本。在 6.3 版本中，我们为 Storybook 添加了 Lit 2 支持。我们还修复了 HMR 并改进了其 TypeScript 类型，并正在继续投入 WC 功能和文档。

构建工具：Webpack 5 稳定版，Vite 支持

在 6.2 版本中，我们宣布了实验性的 Webpack 5 支持和一个可插拔的构建工具 API。现在在 6.3 版本中，Webpack 5 支持已正式发布，并且我们有了第一个用于 Vite 的社区构建工具！

Webpack 5 已稳定。 在过去三个月中，Storybook 的可选 Webpack 5 构建工具的每周 npm 下载量从 0 飙升至 150,000+。

对于 6.3 版本，我们升级并加速了 React TypeScript docgen 处理，该处理会自动为您的组件属性生成 UI 控件。

Webpack 5 现在也用于构建 Storybook 的管理器 UI。这修复了各种 NPM/Yarn 提升问题，并实现了向 Webpack 5 平稳过渡，Webpack 5 将成为 Storybook 7.0 中的默认构建工具。

Vite 社区构建工具。 Vite 是 Svelte 和 Vue 的官方打包工具。它在 React 社区中也越来越受欢迎，因为它具有 10-100 倍更快的启动时间和即时刷新。

在 6.3 版本中，您可以将 Webpack 4/5 构建工具替换为 Vite。这意味着如果您已经在应用程序中使用 Vite，您可以在 Storybook 中获得原生体验。

非常感谢创建实验性 Vite 构建工具的 Eirik Sletteberg、Sasan Farrokh 和 Ian VanSchooten。在 Storybook for Vite 中阅读更多内容。

用于性能的现代 ES 模块

IE11 将于 明年退出。为了应对这种情况，Storybook 获得了实验性的 --modern 模式，现在正在发布现代 ES 模块。我们计划使这成为 Storybook 7.0 中的默认开发模式，并为需要它的用户保留对旧版浏览器的“选择加入”支持。

我们很高兴加入无数 Web 开发工具和库的行列，这些工具和库专注于更小的、无 polyfill 的 ES 模块，将其作为现代 Web 的通用语言。我们的用户可以获得降低复杂性和提高性能的好处。

以及更多...

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

• ✅ 对 storySort 顺序数组的通配符支持
• ✅ 在 URL 参数中跟踪全局变量
• ✅ 在开发服务器上启用 gzip 压缩
• ✅ “新操作”指示器
• ✅ 将 axe-core 升级到 4.2.0

1 分钟安装

将现有的 Storybook 项目升级到 6.3

npx sb upgrade

如果您是从 5.x 或更早版本升级，请查看 Storybook 6 迁移指南。

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

npx sb init

参与进来

专业的 UI 开发者每天都依赖 Storybook。当您采用 Storybook 时，您将获得一套工具、强大的插件和开箱即用的集成，从而加快开发速度。

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

来自社区的有用资源

• 10 个 Storybook 最佳实践，作者：Rafael Rozon
• 使用 ‘controls’ 模块快速在 Storybook 中创建交互式组件的方法  作者：Nadine Thery
• 使用 Storybook 构建您自己的组件库，作者：Gabriel RomayMachado
• 使用 Vue、Tailwind CSS 和 Storybook 进行 Web UI 开发，作者：Allister Sanchez
• Storybook + StencilJS：技巧与窍门，作者：David Dal Busco

鸣谢

Storybook 6.3 由以下贡献者为您带来。

@102 @7rulnik @88ta @apapadopoulou @avaly @avendiart @bartjanvanassen @chrisbutler @cjmcintyre @coreyjv @dallasgale @domyen @dschungelabenteuer @eirslett @fedodd @fenixk @frassinier @frozenpandaz @gaetanmaisse @ghengeveld @gregogun @huyenltnguyen @hydrosquall @hypnosphi @ianvs @igorszyporyn @inokawa @j3rem1e @jabbypanda @jadojodo @jakob-em @jamesgeorge007 @jason-lough-cap-rx @jh3y @jonniebigodes @jonspalmer @juristr @kaelig @kroeder @krofdrakula @kylegach @lauracarballo @lihbr @literalpie @lordvelisch @maruta-bis5 @maya @merceyz @mercs600 @morphatic @ndelangen @nfdevil @patricklafrance @paulrosania @peterpeterparker @pocka @randak @raon0211 @robhil @samkirkland @saranrapjs @shilman @tanya-mahajan @tanyabrassie @thawkin3 @thibaudav @titouanmathis @tmeasday @tomastomaslol @tooppaaa @valerybugakov @vmalay @westbrook @winkervsbecks @yaireo @yannbf @yceballost @zol