返回博客

Storybook 4.0 来了!

支持新的构建工具和框架的重大更新

loading
Michael Shilman
@mshilman
最后更新于

欢迎来到 Storybook 的最新迭代,它是世界上最受欢迎的 UI 组件工作坊。

Storybook 改进了 React/React Native/Vue/Angular 等框架的组件开发、测试和文档工作。Airbnb、Slack、Squarespace 和 Lyft 等工程巨头都在使用它。

Storybook 4.0 (SB4) 支持六种新的视图层,并在各个层面进行了改进

  • 🖼 视图层:Ember, MarkoJS, Mithril, HTML, Svelte, Riot
  • 🛠 构建:Webpack 4, Babel 7
  • 📱 移动端:React Native, 移动设备视图
  • 🎨 UI:主题
  • ⚙️ 核心:Story 参数

我们的目标是帮助 每位 开发者构建坚不可摧的 UI 组件。无论使用何种框架或技术栈。今天,我们向这个目标又迈进了一步。

继续阅读,了解 SB4 如何全面提升你的组件开发体验。


Storybook 支持六种新的视图层

我们很高兴为 Storybook 的 UI 组件工具和最佳实践生态系统引入六种新的视图层

Storybook 及其插件与视图层无关。这意味着每次有人添加功能或修复 bug 时,无论他们选择哪种框架,所有用户都能受益。

例如,Storybook for Angular 大幅改进了对 Typescript 的支持。React Native 的改进将惠及下一代 Web UI。新的视图层对每个人都很有益。


使用 Webpack4 和 Babel7 加速构建

Storybook 4 通过升级到 Webpack 4Babel 7 获得了显著的性能提升,这得益于 Filipp Riabchun 的贡献。Storybook 现在兼容流行的前端工具,如 create-react-app 2Gatsby 2Next 7

Webpack 4 和 Babel 7 还包含数百项其他改进,包括 Webpack 4 中的 WebAssembly 支持;Babel 7 中的 JS 配置、Typescript、JSX 片段。

如果你正在从旧版本升级,我们提供了 Storybook 4.0 迁移指南,会一步一步地引导你。

“太棒了,迁移完成了,一切运行良好!我还注意到这次升级带来了惊人的性能提升,告诉大家我说这太棒了!” — Josh Callendar, Lyft

对 React Native 的一流支持

⚛️新的 React Native 设备 视图

Storybook for React Native 在 4.0 中也进行了全面改造。

现在,将 Storybook 分发到团队的移动设备上变得非常简单。它包含了将 Storybook 作为应用运行所需的一切,无需连接到 Storybook 服务器。

@storybook/react-native 的新更新改进了其与应用的集成方式。此外,Storybook 现在为常用的插件(如 knobs、notes 和 backgrounds)提供了设备上的 UI。

Gytis Vinclovas 主导了 Storybook 4.0 的 React Native 相关工作。他在 自己的文章中详细记录了这些变化


根据你的喜好定制 Storybook 主题

Storybook 的深色主题,在 4.0 中可用

开发者现在可以精确控制 Storybook 的外观。Norbert de Langen 引入了主题功能,允许你调整样式以匹配你的品牌。

Storybook 4.0 包含一个“深色”主题来展示可能性。有关主题设置的说明,请查阅文档


更轻松地开发移动 Web 应用

Storybook 移动端 视图

Storybook 4 包含一个专用的移动端视图,这要归功于 Denzenin

当检测到移动设备的用户代理时,Storybook 会在三个独立的标签页中显示其故事目录、主要组件预览和插件面板。

在手机上浏览我们的官方 Storybook 示例,或者在 Web 浏览器的开发者工具中设置移动用户代理并重新加载页面,即可查看演示。


Story 参数 API

多亏了 Tom Coleman 的新参数 API,用户和插件作者现在有了配置 Story 的标准格式。

例如,不用再为每个 Story 使用笨重的 withNotes 装饰器

storiesOf('My component', module)
  .add('story1', withNotes('some notes')(() => <Component ... />))
  .add('story2', withNotes('other notes')(() => <Component .../>))

你可以在添加 Story 时通过传递一个额外参数来标注 Story

// .storyook/config.js (global decorator, local also supported)
addDecorator(withNotes)

// Component.stories.js
storiesOf('My component', module)
  .add('story1', () => <Component />, { notes: 'some notes' })
  .add('story2', () => <Component />, { notes: 'other notes' })

所有官方的 Storybook 插件 都已转换为使用 Story 参数。有关新 API 工作原理的更多信息,请参阅文档

升级到 Storybook 4.0

今天就升级到 Storybook 4.0——只需一分钟。

如果你是 Storybook 新手,现在是开始的最佳时机。Storybook 支持最流行的视图层和前端技术,帮助你创建持久耐用的 UI 组件。查看 Storybook 教程,了解 React/Angular/Vue 的分步指南。或者如果你想直接上手

cd my-project
npx -p @storybook/cli sb init
yarn storybook

参与贡献

有疑问或想表达赞赏?请在 TwitterDiscordGithubSlack 或下面的评论区打个招呼。请👏点赞并分享此文章,帮助更多人发现它。


感谢社区和赞助商
Storybook 仍然是世界上最受欢迎的 UI 组件探索工具。我们最近在 Github 上突破了 3 万星标,在 NPM 上每月下载量达 400 万次,贡献者超过 500 人。

Storybook 的 Open Collective 正在取得进展。它每月获得来自 FacebookChromaticXebiaPercyTipeApplitools 的赞助。AlgoliaAirbnbJosé Manual Lucas Muñoz 最近也提供了一次性的大额捐赠。许多社区中宝贵的支持者也站出来帮助项目。这些贡献用于托管、给贡献者的周边礼品、文档和宣传。

–来自 Storybook 团队的 ❤️

感谢!@a-tokyo @adekbadek @ailrun @alanhogan @andyo729 @astrotim @bastienfp @bmson @br0ken- @brian-mcbride @brycemhammond @camel-floss @choznerol @clehnert-psl @cliedeman @connorholyday @cortopy @danielduan @denzenin @desfero @dimitrijemanic @dioxmio @do7be @domyen @donaldpipowitch @edward1224 @ekhaled @elob @ewolfe @expe-lbenychou @faun @fibo @fran-worley @fvilers @gabrielcsapo @georgewl @glazy @gongreg @grimones @gromchen @hisapy @hypnosphi @ianvs @igor-dv @ikesyo @isoppp @j-kallunki @jalilarfaoui @jamesgorrie @jayphelps @jbaumgardt @jfsiii @jh3y @jhswart @jmiazga @jondot @juhq @keraito @klimentru1986 @kroeder @kumarharsh @langri-sha @libetl @ljharb @lucidpaper @luisdanielroviracontreras @lvarayut @manuel-magnetix @markelog @marob @marshallmick007 @martinmacko47 @meesvandongen @michaelduminy @mizx @mnicole @mrmckeb @mshaaban088 @mvasin @ndelangen @nemodreamer @nm123github @noriste @paradoxxxzero @pascalduez @pelotom @phillduffy @pksunkara @plsr @plumpnation @primigenus @rantelo @rhalff @rwieruch @sanpochew @shilman @silencerweb @sky-franciscogoncalves @skywhale @stephanemw @stijnkoopal @swernerx @swese44 @thekashey @thomasbertet @timothymclane @titonobre @tkh44 @tmeasday @tobilen @tombyrer @tretuna @tsiq-swyx @unional @urikphytech @vertexbz @vidaaudrey @wearymonkey @web-devel @westandy-dcp @wuweiweiwu @yaodingyd @yi-ge @yogu @zgreen

订阅 Storybook 邮件列表

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

7,180名开发者,并且还在增加

我们正在招聘!

加入 Storybook 和 Chromatic 背后的团队。构建被数十万开发者在生产环境使用的工具。远程优先。

查看职位

热门文章

Storybook 4 迁移指南

下一代 UI 开发三步走
loading
Michael Shilman

Storybook 治理

支持开放的开源
loading
Michael Shilman

为什么我要全职投入 Storybook 的工作

Storybook 光明而激动人心的未来
loading
Norbert de Langen
加入社区
7,180名开发者,并且还在增加
为什么为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与贡献博客
案例展示探索项目组件词汇表
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI