返回博客

Storybook 3.3 发布公告

Angular 支持、设备视口、测试改进及更多!

loading
Michael Shilman
@mshilman
上次更新

新年快乐! Storybook 的精灵们在这个假期里辛勤工作,我们很高兴地宣布 Storybook 3.3 发布,这是我们为世界上最受欢迎的 UI 组件开发环境带来卓越体验的最新成果。

使用 Storybook 3.3,您可以

  • 在您的 Angular 项目(v4+)中使用 storybook
  • 调整预览视口以模拟不同的设备尺寸
  • 在 Storybook 中预览测试结果
  • 以及更多!

请继续阅读,了解我们为您精心准备的所有精彩内容,以提高您在 2018 年的 UI 开发效率。


Storybook for Angular

在我们的 3.2 版本 展示了将 Storybook 组件开发引入 Vue 的简易性之后,Carlos Vega 受此启发,希望在 Angular 上重现这一技巧。 Angular 的工作量比预期的要大,但在 Igor DavydkinRuslan Alzinov 的帮助下,Carlos 成功完成了这项工作。

Storybook for Angular 支持各种 Angular4+ 开发!

开始使用您的 Angular 项目非常简单

npm i -g @storybook/cli
cd my-angular-project
getstorybook
npm run storybook

请继续关注即将发布的完整文章,其中将详细介绍 Angular 工作背后的周全考虑。请在下方订阅!

设备视口

3.3 的第二个主要功能是来自 Lyft 的 Josh Callender 提供的 Viewports Addon。 在不同的预设设备尺寸上测试组件的响应式行为

Viewport addon 通过调整 Storybook 预览窗口的大小来模拟不同的设备尺寸。 搞定!

有关更多信息,请参阅项目 README

测试改进

最后,Storybook 3.3 包含多项测试改进。

首先是 Renaud Tertrais 提供的 Jest addon,它允许您在 Storybook 中查看测试结果。 并排查看视觉和功能变化可以实现强大的测试驱动开发。

Jest addon 在您开发时在浏览器中并排显示视觉和功能变化的测试结果。

其次是 Igor Davydkin 在 StoryShots 中实现的多快照:当 StoryShots 进行 DOM 快照时,现在可以为每个 story 保存单独的快照文件,这使得快照审查和源代码控制变得更加容易。 有关更多信息,请参阅 Igor 的文章 以及 StoryShots README 中的 multiSnapshotWithOptions

除了 Storybook 版本中的测试改进之外,更广泛的社区中也进行了许多活动。 值得注意的是:Loki Visual Regression TestingJoel Arvidsson 提供,它是免费的,以及由我们的朋友 PercyScreenerChromatic 提供的针对 Storybook 的托管、功能齐全的付费测试服务。 大量精力投入到使 Storybook 成为强大的测试平台。

以及更多!

Storybook 3.3 是我们迄今为止最大的版本,包含数百项其他改进。 有关完整列表,请参阅我们的 CHANGELOG。 一些亮点

  • 在层级结构的每一层显示 stories #1763
  • 将 addon-background 添加到 monorepo #2220
  • addon-info 更详细的 props 表格 #1485

我们还在 Storybook 开发方面取得了巨大进步,例如更轻松的引导设置、闪电般的持续集成、自动 Netlify 预览、持续的项目依赖项更新等等。 非常感谢 Filipp RiabchunNorbert de Langen 在幕后不知疲倦地工作。 期待很快会有更多相关信息,并订阅以获取更新。


勇往直前

版本 3.3 是 Storybook 的第三个大型社区驱动版本。 每次迭代,我们不仅添加了上述功能,还改进了代码,并在不牺牲质量的前提下,更好地整合来自全球贡献者社区的新功能。

现在是为 Storybook 做出贡献的最佳时机。 我们是一个友好的社区,欢迎所有人的贡献。 加入我们的 Slack,在 Open Collective 上支持我们,或者直接参与 Github

非常感谢以下为 3.3 版本做出贡献的杰出社区成员:@aaronfriel @abrahamgnz @ahanriat @ajfuller @ajwhite @alterx @amorriscode @apexskier @aretecode @axelboc @baktiaditya @bcass @billydubb @billyvg @blairanderson @bmv437 @bradleyayers @brekk @chadfawcett @cheapsteak @chris-verclytte @coobaha @crtvhd @dangreenisrael @danielduan @danielsneijers @danseethaler @davegaeddert @dependencies-bot @derekstavis @derrickpelletier @digitalmaster @djspaceg @dsblv @duncanbeevers @edolyne @ethaan @filipposarzana @folmert @froggyguts @ggarek @gongreg @gpittarelli @greenkeeper[bot] @grncdr @gsimone @gustojs @gvaldambrini @herrmannplatz @hharnisc @hypnosphi @ianmcnally @igor-dv @ikasumiwt @jakedawkins @jancvanb @jbovenschen @jebarjonet @jennvoss @jgoz @jjwon0 @joscha @jozefpetro @jpshelley @jribeiro @jrwebdev @kazupon @lachlanjc @lifeiscontent @loklaan @maiis @marchdoe @marshallswain @mathiasschopmans @maxhodges @mccullochk @michaltaberski @mimamuh @mlabrum @mmnlfrrr @moaxaca @mordentware @nblackburn @ndelangen @ngyikp @orelmax @orisomething @pd4d10 @pelotom @peritus @pierrickp @promhize @psimyn @ralzinov @renaudtertrais @rhalff @rmevans9 @robrichard @rwoverdijk @rylnd @sambego @sandinosaso @saponifi3d @satazor @sfantasy @shilman @slorber @spacek33z @spaintrain @syneva-runyan @tenshiemi @terrencewwong @theshortcut @thibautre @thomasbertet @tmeasday @tobilen @tonysk @travisbloom @trevoreyre @tsuyoshiwada @tw15egan @usagi-f @usulpro @valscion @vidaaudrey @vnctaing @ximenean @yuyokk @z4o4z @zephraph @zinserjan @znck

立即获取

立即试用 Storybook 3.3。 如果您已经在使用 Storybook,只需一分钟即可升级。 如果您还没有使用,请开始使用开发 React、React Native、Vue 和 Angular 组件 UI 的最佳方式

npm i -g @storybook/cli
cd my-vue-react-rn-or-angular-project
getstorybook
npm run storybook

如果您对新版本有任何疑问、问题、鼓励或仅仅是喜悦的惊叹,请在 TwitterSlackGithub 或在下方评论中告诉我们!

最后,要及时了解与 Storybook 相关的最新消息,请在此处 Medium 上关注我们,或在 Twitter 上关注我们。 如果您喜欢 Storybook,请为这篇文章鼓掌并分享,以帮助更多人发现它。

来自 storybook 团队的 ❤️。

加入 Storybook 邮件列表

获取最新新闻、更新和版本

6,730位开发者及更多

我们正在招聘!

加入 Storybook 和 Chromatic 背后的团队。 构建被成千上万开发者在生产环境中使用的工具。 远程优先。

查看职位

热门文章

Storybook 荣获开源奖

对社区最具影响力的贡献
loading
Norbert de Langen

Storybook 3.4 发布公告

Polymer、Image/Vue/Angular Storyshots、多层级结构及更多!
loading
Michael Shilman

Storybook 3.2 发布公告

Vue 支持、Story 层级结构、RN On-Device UI 及更多!
loading
Michael Shilman
加入社区
6,730位开发者及更多
为什么为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与其中博客
案例展示探索项目组件词汇表
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI