
宣布 Storybook 3.0
webpack2, create-react-native-app, 快照测试++,等等!

欢迎来到 Storybook 3.0,这是世界上最受欢迎的UI组件开发环境向前迈出的巨大一步。
功能上,3.0带来了期待已久的 webpack2 支持, create-react-native-app 支持,灵活的快照测试,以及大量的错误修复和功能增强。
从底层来看,Storybook 3.0 是 Storybook 项目在组织和结构上的重大革新。在组织上,它是 Storybook 的第一个社区驱动版本。在结构上,我们清理了包结构,并将代码整合到一个 monorepo 中,以便更好地测试和维护。
如何升级
Storybook 的所有包都已从 @kadira
NPM 组织迁移到 @storybook
,我们还借此机会清理了包名。
首次安装依然简单
npm i -g @storybook/cli
cd my-react-or-react-native-project
getstorybook
但如果你已经使用 Storybook 2 构建了项目怎么办?
惊喜的是,它同样简单
npm i -g @storybook/cli
cd my-storybook2-project
getstorybook
神奇吧!这不仅会升级你 package.json
中的 Storybook 依赖,还会应用 codemod 来更新你的 JS 源代码,确保你在整个项目中使用了新的 @storybook
包。如果你自定义了 Storybook 的 webpack 配置,可能仍然需要一些手动步骤,但我们已经在Storybook 3.0 迁移指南中记录了所有这些信息。
社区驱动版本
对于任何参与 Storybook 的人来说,此版本的关键“特性”根本不是一个特性,而是组织结构的变化:Storybook 3.0 标志着 Storybook 从一家初创公司 (Kadira) 的开源项目过渡到社区驱动的开放集体项目。
结构和人员的变化解释了 1 月份发布的 2.3.5 版本、其包结构的全面修订以及团队完成此次过渡的热情之间存在的时间差。简而言之,这是一次很棒的过渡,我们很高兴能够继续在组件驱动的设计、开发和测试领域开辟新道路。

Webpack 2
和 JS 世界的其他地方一样,Storybook 用户是一群行动迅速的人。所以当 Webpack2 的支持迟迟未到时,我们看到社区开始在 Github 上聚集他们的干草叉和火把。通过 Storybook 3.0,我们很高兴终于支持 webpack2,现在我们都可以回到无休止地使用最新版本调整 webpack 配置的状态了。:)
我们已在Storybook 3 迁移指南中记录了 Storybook 特有的方面,Webpack 团队也已在他们的迁移指南中记录了 Webpack 的迁移。
Create-React-Native-App
Storybook 2 的显著特性之一是 getstorybook
,它是一种非常简单的方式,可以在各种项目类型中安装 Storybook。create-react-app
促使 React 成为主导的 UI 框架,而 getstorybook
帮助 Storybook 成为 React 组件开发的优选工具。
现在 create-react-native-app
有望为 React Native 做同样的事情。而 storybook
也紧随其后。现在为 React Native 设置 Storybook 就像这样简单:
yarn create react-native-app myapp
cd myapp
getstorybook
有关将其与 RN 应用集成的其他选项,请参阅 storybook/react-native
的 README。
快照测试++
借助 storyshots
,Storybook 2.0 是第一个开箱即用支持 Jest 强大快照测试的组件开发工具。只需编写你的 stories,就可以通过两行代码免费获得快照测试。
在 Storybook 3.0 中,快照测试通过可配置的 Snapshot 函数得到了提升。这意味着你可以在测试函数中执行任何操作:模拟组件、截屏、测试渲染性能等等。我们将在未来的增强功能中利用这一点。在此之前,这里有一个简单的示例展示了 mock 的实际应用:
import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';
initStoryshots({
test: snapshotWithOptions({
createNodeMock: (elt) => (
elt.type === 'div' ? { scrollWidth: 123 } : null
)
})
});
额外修复
除了上述功能,Storybook 3.0 还包含了数百项来自社区的贡献,解决了各种大小问题。要详细了解所有这些改进,请参阅我们的发布说明:
接下来是什么?
随着平稳过渡到社区管理的 Storybook 和清晰的 monorepo 开发结构,我们已经开始着手进行一系列 3.1 版本的改进,特别是在 UI、分层 stories、响应式行为测试、主题以及对其他 UI 框架的支持方面。我们已经创建了一个初步路线图,随着此版本发布,我们将很快向社区征求意见。
一起来体验吧!
如果没有社区数百位贡献者的努力,Storybook 3.0 将无法实现。我们是一个友好开放的团体,非常欢迎你作为用户、贡献者或维护者加入我们。

立即按照上述说明试用 Storybook 3.0 吧。只需几秒钟即可将 Storybook 添加到你的项目中,开始使用这种最佳方式来开发 React 和 React Native 组件 UI。
如果你有任何问题、遇到了困难、想要鼓励我们,或者仅仅是为新版本感到高兴,请随时通过Twitter、Slack、Github 或在下方评论中联系我们!
最后,要及时了解 Storybook 相关新闻,请点击下方的“关注”,或者在 Twitter 上查看我们。如果你喜欢 Storybook,请点击下方的 👏 按钮,帮助更多人发现它。
带有 ❤️,Storybook 团队。
特别感谢: Norbert de Langen, Tom Coleman, Aaron McAdam, Oleg Proskurin, @mnmtanish, Arunoda Susiripala, Sacha Greif;来自 Storybook 社区的问题、困难、反馈、建议、鼓励,以及以下 Github 用户的代码贡献:@aaronmcadam @ajhyndman @apexskier @arunoda @benediktvaldez @chrvadala @cnandreu @danielduan @danny-andrews@elisherer @enjoylife @fabien0102 @floriangosse @gongreg @greenkeeper[bot] @gvaldambrini @joscha @kiwka @konsumer @marcfallows @matt-oakes @methyl @mkamakura@mnmtanish @mthuret @nayucolony @ndelangen @null @olistic @raciat @rixth @sachag @she-dev @shilman @stereodenis @stupidism @subpopular @theatlasroom @theinterned@tmeasday @usulpro @wcastand @xavcz @xdamman @z4o4z @zjeraar