
宣布推出 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.o 成为第一个开箱即用地支持 Jest 强大快照测试的组件开发工具。只需写下你的 story,并用两行代码免费获得快照测试。
在 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、分层 story、响应式行为测试、主题化以及对其他 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
