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