Storybook 6.3

为 UI 开发优化

Michael Shilman

2021年6月23日 — @mshilman

最后更新 2021年6月29日

Storybook 是业界标准的用于组件和页面开发的 UI 开发工作坊。它被 Dropbox、Shopify、Stripe 以及成千上万的其他团队使用。

开发者选择 Storybook 是因为它帮助他们专注于一件事：用户界面。应用开发中已经存在大量的复杂性，Storybook 通过将 UI 问题从后端、API 和数据的干扰中隔离出来，使你的工作变得更简单。

在 6.3 版本中，我们检查了 UI 开发者每天进行的工作——样式和测试——以了解如何简化它们。我们很高兴能分享新的可视化检查工具、用于在整个测试套件中重用 Stories 的实用工具以及改进后的集成。

📐 样式：测量和轮廓化 DOM 元素
🔌 测试：在 Jest、Testing Lib、Cypress 中重用 Stories
🚀 框架：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 现在也支持键盘快捷键。你可以在“键盘快捷键”设置页面完全自定义所有快捷键。

在你的测试中重用 Stories

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

@storybook/testing-react 和 @storybook/testing-vue，分别用于 React 和 Vue，允许你将 Stories 导入到 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 文档中备受期待的功能，如内联 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 飙升至 15 万次以上。

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

Webpack 5 现在也用于构建 Storybook 的管理界面。这修复了各种 NPM/Yarn hoisting 问题，并使得在 Storybook 7.0 中顺利过渡到将 Webpack 5 作为默认构建工具成为可能。

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

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

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

用于提升性能的现代 ES Modules

IE11 将于明年淘汰。为此，Storybook 新增了实验性的 --modern 模式，并且现在发布现代 ES modules。我们计划在 Storybook 7.0 中将其作为默认开发模式，并为需要传统浏览器的用户保留“选择加入”的支持。

我们很高兴能与无数专注于使用更小、无 polyfill 的 ES modules 作为现代 Web 通用语言的 Web 开发工具和库一道前行。我们的用户将从复杂性降低和性能提升中获益。

还有更多...

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

1分钟安装

将现有 Storybook 项目升级到 6.3

npx sb upgrade

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

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

npx sb init

参与其中

专业的 UI 开发者每天都依赖 Storybook。当你采用 Storybook 时，你会获得一套工具、强大的插件以及开箱即用的集成，这些都能加快开发速度。

该项目由 1300 多名开源贡献者维护，并由一个由顶级维护者组成的指导委员会指导。如果你有兴趣贡献，请在 GitHub 上查看 Storybook，创建 Issue 或提交 Pull Request。在 Open Collective 上捐赠。在 Discord 中与我们聊天——通常有维护者在线。在 Twitter 上关注 Storybook 最新动态，并订阅我们的邮件列表。

Storybook 6.3 来啦！

简化日常 UI 开发任务

📐 样式——测量和轮廓化 DOM 元素
🔌 在 @fbjest @TestingLib @Cypress_io 中重用 Stories
🚀 Angular 12 Ivy, Lit 2.0
🛠 Webpack 5 稳定版, Vite
📦 现代 ESM 性能选项

还有更多：https://#/WSAem8pEUs pic.twitter.com/856CxlE3Er
— Storybook (@storybookjs) 2021年6月24日

来自社区的有用资源

鸣谢

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