Storybook 4.0 来了！
支持新的构建工具和框架的重大更新
欢迎来到 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 组件工具和最佳实践生态系统引入六种新的视图层
- 🔥 Ember 由 Gabriel J Csapo 和 Robert Jackson
- 🌈 MarkoJS 由 Neville Mehta
- ⬛ Mithril 由 Sangmin Yoon
- 📃 HTML 片段 由 Filipp Riabchun
- 📦 Svelte 由 Gavin King
- 🔴 Riot.js 由 Lionel Ben ychou
Storybook 及其插件与视图层无关。这意味着每次有人添加功能或修复 bug 时，无论他们选择哪种框架，所有用户都能受益。
例如，Storybook for Angular 大幅改进了对 Typescript 的支持。React Native 的改进将惠及下一代 Web UI。新的视图层对每个人都很有益。
使用 Webpack4 和 Babel7 加速构建
Storybook 4 通过升级到 Webpack 4 和 Babel 7 获得了显著的性能提升，这得益于 Filipp Riabchun 的贡献。Storybook 现在兼容流行的前端工具，如 create-react-app 2、Gatsby 2 和 Next 7。
Webpack 4 和 Babel 7 还包含数百项其他改进，包括 Webpack 4 中的 WebAssembly 支持；Babel 7 中的 JS 配置、Typescript、JSX 片段。
如果你正在从旧版本升级，我们提供了 Storybook 4.0 迁移指南，会一步一步地引导你。
“太棒了，迁移完成了，一切运行良好！我还注意到这次升级带来了惊人的性能提升，告诉大家我说这太棒了！” — Josh Callendar, Lyft
对 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 的外观。Norbert de Langen 引入了主题功能，允许你调整样式以匹配你的品牌。
Storybook 4.0 包含一个“深色”主题来展示可能性。有关主题设置的说明，请查阅文档。
更轻松地开发移动 Web 应用
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参与贡献
有疑问或想表达赞赏？请在 Twitter、Discord、Github、Slack 或下面的评论区打个招呼。请👏点赞并分享此文章，帮助更多人发现它。
感谢社区和赞助商
Storybook 仍然是世界上最受欢迎的 UI 组件探索工具。我们最近在 Github 上突破了 3 万星标，在 NPM 上每月下载量达 400 万次，贡献者超过 500 人。
Storybook 的 Open Collective 正在取得进展。它每月获得来自 Facebook、Chromatic、Xebia、Percy、Tipe 和 Applitools 的赞助。Algolia、Airbnb 和 José 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