宣布 Storybook 3.4

各位，又到了激动人心的时刻：我们很高兴地宣布 Storybook 的最新迭代版本，这是一款屡获殊荣的软件，用于在 React、React Native、Vue、Angular 和 Polymer 中开发、测试和记录 UI 组件。🍾🥂😅

Storybook 3.4 已发布在 NPM 仓库，并且是一个重要版本。它包含：

• 全新框架支持: Polymer!
• 组件测试: Storyshots 图像快照, Vue/Angular 支持
• UI 改进: 多故事层级结构
• Storysource: 用于组件代码文档的新插件

继续阅读以了解改进概览和简要的状态更新!

🎁 Polymer 支持

我们很自豪地将 Polymer 添加到我们不断增长的支持框架列表中。这是继3.2 版本中的 Vue 和 3.3 版本中的 Angular 之后的自然延续。Polymer 支持由 Stijn Koopal, Norbert de Langen, Teije van Sloten, 和 Léon Rodenburg 在 Xebia 贡献。🙏

Polymer 版 Storybook 除了 Polymer 之外，还支持原生自定义元素和纯 HTML。因此，如果您想用 html 编写简单的示例，或者更专注于 CSS/SASS 组件，它也非常棒。

和往常一样，将 Storybook 添加到您的 Polymer 项目中非常容易

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

Stijn 撰写了一篇精彩的介绍性文章，详细介绍了如何使用 Polymer 版 Storybook，快去看看吧！

📸 图像快照

3.4 版本的第二个主要改进是 StoryShots 的图像快照功能，由 Thomas Bertet 慷慨贡献。 🔥

在 3.4 版本之前，StoryShots 使用 Jest 的 DOM 快照功能来计算组件版本之间的差异，并在渲染发生更改时自动通知开发人员。DOM 差异可以捕获许多回归，但无法捕获纯视觉的情况，例如 CSS 更新的情况。

在图像快照中，渲染的图像被保存到磁盘，以便在发生任何类型的视觉变化（包括 DOM 变化以及 CSS 变化等）时都能被捕获。

要使用最简单的配置来利用图像快照，请使用自定义测试调用 initStoryshots

import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';

initStoryshots({ suite: 'Image storyshots', test: imageSnapshot() });

要了解更多信息并查看其他配置模式，请参阅 StoryShots 文档。图像快照目前支持除 React Native 之外的所有平台。

✨ 适用于 Vue/Angular 的 StoryShots

3.4 版本还改进了 StoryShots，增加了对 Vue 和 Angular 的支持。这项工作由 Igor Davydkin 在他生日那天作为一份令人难以置信的礼物贡献给 Storybook 社区。 🎁

StoryShots 尝试从项目的依赖项中推断项目类型，但您也可以使用 framework 选项手动指定它，该选项当前可以采用以下值之一：undefined, 'react', 'react-native', 'vue', 'angular'。例如

import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';

initStoryshots({
  framework: 'vue',
  configPath: path.join(__dirname, '.storybook'),
});

有关更多信息，请参阅 StoryShots 文档。

🌿 多故事层级结构

Storybook UI 也通过多故事层级结构得到了改进。这项改进由 Max Meinders 贡献，允许您在 UI 中将故事分组到可视化部分

要进行设置，有一个新的配置选项 hierarchyRootSeparator。例如，以下设置允许您创建故事组

import { setOptions } from '@storybook/addon-options';

setOptions({
  hierarchySeparator: /\//,
  hierarchyRootSeparator: /\|/,
});

storiesOf('Group1|path/to/component1')
  .add('one', () => ...)
  .add('another', () => ...)
  
storiesOf('Group1|path/to/component2')
  .add(...)
  
storiesOf('Group2|component3')
  .add(...)

有关更多信息，请参阅 addon-options README。

📄 Storysource 插件

作为额外奖励，Igor Davydkin 还将他的 Storysource 插件偷偷加入到 3.4 版本中。Storysource 在 Storybook 的插件面板中显示您的故事代码，允许查看者并排浏览组件的用法及其输出行为

Storysource 是我们迄今为止记录组件最直接的方式，并且很容易添加到您的项目中。首先，安装插件

yarn add --dev @storybook/addon-storysource

然后，将库导入到您的 addons.js 文件中

import '@storybook/addon-storysource/register';

最后，向自定义 webpack.config 添加一个钩子，这允许插件自动检测您的所有故事

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre',
      },
    ],
  },
};

有关更多 Storysource 用法选项，请参阅 package README。有关技术魔法的更多详细信息，Igor 撰写了一篇精彩的文章，解释了其底层工作原理。

💥 更多功能!

Storybook 3.4 包含数百项其他改进。从添加代码示例“复制按钮”到 addon-info 等精美细节 (#2713) 到基于 3.3 版本用户反馈的众多 Angular 改进 (#2690, #2669, #2735)。有关完整列表，请参阅我们的 更新日志。

底层最大的变化之一是主要重构，其中我们添加了一个独立于框架的核心库，以支持 React、Vue、Angular、Polymer 以及更多即将推出的框架 (#2241)。这使得向 Storybook 添加新框架以及维护我们不断增长的框架集合变得异常容易。如果您想为自己喜欢的框架添加支持，请通过 Twitter, Slack, 或 Github 联系我们，我们将帮助您在我们的下一个版本中发布它！

📈 持续进步

Storybook 3.4 延续了一系列由社区驱动的优秀版本。我们已超过

• Github 上超过 2.2 万颗星和 400 多位贡献者
• npm 上每周超过 20 万次下载

Storybook 最近还在 2018 年 React Amsterdam 大会上荣获“对社区最具影响力的贡献”奖。 在此处阅读相关信息!

如果 Storybook 为您的 UI 开发过程带来了愉悦和效率，请考虑帮助我们改进 Storybook。无论您是贡献像本文中描述的新功能、修复错误（我们也存在这些问题）还是帮助改进文档，每个版本都需要付出大量的工作。请加入我们的 Slack, 在 Open Collective 上为我们提供经济支持，或者直接在 Github 上参与进来。

非常感谢为本次发布做出贡献的杰出社区成员:@9034725985 @aaronfullerton @abrahamgnz @adrukh @alexandermikuta @alfredo-delgado@alterx @anescobar1991 @arty-name @aseeto @avol-io @aymeric-duchein @benbakhar @chentsulin @christiandavis @clehnert-psl @cliedeman @cshell7 @danawhite @dangreenisrael @danielduan @davidkwan95@dependencies-bot @derekshull @dfdeagle47 @ersel @felipedeboni @fredyc @getsetbro @godban @gongreg @guylivni @hswolff @hypnosphi @igor-dv @javidjamae @jayandcatchfire @jdonor @jeffcarey @jonrimmer@juristr @kazupon @kevinsuttle @kiwka @kn0ll @kt3k @lachlanjc @m10l @markelog @matissjanis @mehandes @meros @metronom72 @mloughry @mnicole @mshaaban088 @mynnx @nblackburn @ndelangen @outspaced @pascalduez @paul42 @playfulcorgi @preya @primigenus @psimyn @punitgr @quramy @rhalff @richardbray @seberik @sec0ndhand @shilman @simon360 @sixmen @superol3g @sw-yx @telichkin @theneva@thomasbertet @tmeasday @tniezg @tsiq-swyx @vcarl @wuweiweiwu @x1c0 @yjcxy12 @zajn

🙌 立即获取

立即试用 Storybook 3.4。如果您已经在使用 Storybook，只需一分钟即可升级。如果您尚未使用，请开始体验开发 React、React Native、Vue、Angular 和 Polymer 组件 UI 的最佳方式

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

如果您对新版本有任何疑问、问题、鼓励或仅仅是喜悦的惊叹，请在 Twitter, Slack, Github 或在下面的评论中告诉我们！

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

❤️ 来自 Storybook 团队。