
Storybook 3.3 发布公告
Angular 支持、设备视口、测试改进及更多!

新年快乐! 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 Davydkin 和 Ruslan Alzinov 的帮助下,Carlos 成功完成了这项工作。

开始使用您的 Angular 项目非常简单
npm i -g @storybook/cli
cd my-angular-project
getstorybook
npm run storybook
请继续关注即将发布的完整文章,其中将详细介绍 Angular 工作背后的周全考虑。请在下方订阅!
设备视口
3.3 的第二个主要功能是来自 Lyft 的 Josh Callender 提供的 Viewports Addon。 在不同的预设设备尺寸上测试组件的响应式行为

有关更多信息,请参阅项目 README。
测试改进
最后,Storybook 3.3 包含多项测试改进。
首先是 Renaud Tertrais 提供的 Jest addon,它允许您在 Storybook 中查看测试结果。 并排查看视觉和功能变化可以实现强大的测试驱动开发。

其次是 Igor Davydkin 在 StoryShots 中实现的多快照:当 StoryShots 进行 DOM 快照时,现在可以为每个 story 保存单独的快照文件,这使得快照审查和源代码控制变得更加容易。 有关更多信息,请参阅 Igor 的文章 以及 StoryShots README 中的 multiSnapshotWithOptions
。
除了 Storybook 版本中的测试改进之外,更广泛的社区中也进行了许多活动。 值得注意的是:Loki Visual Regression Testing 由 Joel Arvidsson 提供,它是免费的,以及由我们的朋友 Percy、Screener 和 Chromatic 提供的针对 Storybook 的托管、功能齐全的付费测试服务。 大量精力投入到使 Storybook 成为强大的测试平台。
以及更多!
Storybook 3.3 是我们迄今为止最大的版本,包含数百项其他改进。 有关完整列表,请参阅我们的 CHANGELOG。 一些亮点
我们还在 Storybook 开发方面取得了巨大进步,例如更轻松的引导设置、闪电般的持续集成、自动 Netlify 预览、持续的项目依赖项更新等等。 非常感谢 Filipp Riabchun 和 Norbert 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
如果您对新版本有任何疑问、问题、鼓励或仅仅是喜悦的惊叹,请在 Twitter、Slack、Github 或在下方评论中告诉我们!
最后,要及时了解与 Storybook 相关的最新消息,请在此处 Medium 上关注我们,或在 Twitter 上关注我们。 如果您喜欢 Storybook,请为这篇文章鼓掌并分享,以帮助更多人发现它。
来自 storybook 团队的 ❤️。