Storybook 4.0大升级：为RN提供一级支持、引入6个新视图层

图片

作者｜Michael Shilman

译者｜谢丽

随着时间的推移，前端开发者开发的应用比以往任何时候都要大，并随着逻辑和功能向客户端转移，应用变得越来越复杂。有许多很棒的库可以简化前端堆栈的不同部分，从构建工具（如 Webpack）到视图层（如 React）。但迄今为止，还没有一个通用的工具来构建 UI 组件——应用的原子单元。

Storybook 的目标是帮助每个开发人员构建 UI 组件，无论是框架还是技术栈。近日，Storybook 4.0 的发布让我们离这个目标又近了一步。

Storybook 4.0 （SB4）将支持 6 个新的视图层，并引入了可以节省时间的特性来快速构建现代化 UI：

• 视图层：Ember、MarkoJS、Mithril、HTML、Svelte、Riot
• 构建：Webpack 4、Babel 7
• 移动：移动设备视图 React Native
• UI：主题
• 内核：Story 参数

  Storybook 支持 6 种新的视图层

  

  我们很高兴为 Storybook 的 UI 组件工具 & 最佳实践生态系统引入了六个新的视图层。Storybook 及其插件与视图层无关。这意味着，每当有人添加一个特性或修复一个 Bug 时，每个用户都可以从中受益，而不管他们选择了哪种框架。

  例如，引入 Storybook Angular 极大地改进了 Typescript 支持，React Native 的改进将有利于下一代 Web UI，新的视图层使每个人都可以从中受益。

• Ember（由 Gabriel J Csapo 和 Robert Jackson 创建）
• MarkoJS（由 Neville Mehta 创建）
• Mithril（由 Sangmin Yoon 创建）
• HTMLSnippets（由 Filipp Riabchun 创建）
• Svelte（由 Gavin King 创建）
• Riot.js（由 Lionel Ben ychou 创建）

  使用 Webpack4 和 Babel7 提升构建速度

  

  随着 Webpack 4 和 Babel 7 的升级，Storybook 4 得到了显著的性能提升。Storybook 现在可以和一些流行的前端工具兼容，比如 create-response-app 2、Gatsby 2 和 Next 7。

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

  如果你正在从旧版本升级，则可以学习 Storybook 4.0 的迁移指南：

  https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c

  为 React Native 提供一级支持

  组件不仅仅局限于 Web。React Native 把组件带到了移动领域。

  Storybook 4.0 使得向团队的移动设备发布 Storybook 变得非常简单。它提供了运行 Storybook 应用所需的所有功能，而且无需连接到 Storybook 服务器。

  @storybook/react-native 的更新改善了它与应用的集成方式。此外，Storybook 现在有了一个设备内置的用户界面，可以用于流行的插件，比如旋钮、便签和背景。

  Storybook 主题

  

  Storybook 4.0 提供了黑色主题

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

  Storybook 4.0 包含了一个“黑色”主题来展示这些可能性。有关主题说明，请查阅文档（https://storybook.js.org/configurations/theming/）。

  简化移动 Web 应用开发

  

  前端开发人员为桌面和移动设备构建 Web 应用，Storybook 4 包含一个专门的移动视图。

  当检测到移动设备用户代理时，Storybook 会在三个单独的选项卡中显示它的故事目录、主组件预览和插件面板。

  你可以在手机上浏览我们的官方 Storybook 示例，检出一个演示程序，或者在 Web 浏览器的开发工具中设置一个移动用户代理并重新加载页面。

  Story 参数 API

  借助由 Tom Coleman 开发的新的参数 API，用户和插件作者现在有了配置故事的标准格式。

  例如，不必针对每个故事使用笨拙的 withNotes 修饰符：

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

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

  // .storyook/config.js (全局修饰符，也支持局部修饰符)
  addDecorator(withNotes)
  // Component.stories.js
  storiesOf('My component', module)
  .add('story1', () => <Component />, { notes: 'some notes' })
  .add('story2', () => <Component />, { notes: 'other notes' })           

  升级到 Storybook 4.0

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