返回博客

宣布 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 的工作比预期的要复杂,但 Carlos 在 Igor DavydkinRuslan Alzinov 的帮助下成功了。

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 版本中的测试改进之外,整个社区也有许多活跃的活动。值得一提的是:Joel Arvidsson 的 Loki 视觉回归测试,该工具是免费的;以及我们来自 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 邮件列表

获取最新消息、更新和发布信息

7,468开发者及更多

我们正在招聘!

加入 Storybook 和 Chromatic 团队。构建被数十万开发人员在生产中使用的工具。远程优先。

查看职位

热门帖子

Storybook 荣获开源奖项

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

宣布Storybook 3.4

Polymer、Image/Vue/Angular Storyshots、多层级 & 更多!
loading
Michael Shilman

宣布推出 Storybook 3.2

Vue 支持、故事层级、RN 设备内 UI 等!
loading
Michael Shilman
加入社区
7,468开发者及更多
原因为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与进来博客
展示探索项目组件词汇表
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI