
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 上聚集了干草叉和火把 on 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.o 是第一个开箱即用支持 Jest 强大的快照测试的组件开发工具。只需编写您的 stories,即可免费获得快照测试,只需两行代码。
在 Storybook 3.0 中,快照测试通过可配置的 Snapshot 函数迈上了一个新台阶。这意味着您实际上可以在测试函数中执行任何操作:模拟组件、截取屏幕截图、测试渲染性能等等。我们将在即将到来的增强功能中利用这一点。在此之前,这是一个 简单的模拟操作示例
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,请点击下面的 👏 按钮,以帮助更多人发现它。
With ❤️, storybook team.
特别感谢: 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