Storybook 5.0正式釋出：有史以來變化最大的版本

作者｜Michael Shilman

譯者｜薛命燈

Storybook 5.0（SB5）于近日正式釋出，這是目前為止最大的一個版本。新版本的内容包括：

• 全新的開發者體驗；
• 帶有主題的元件庫；
• 改進的前端插件架構；
• 全新的 Storybook 網站。

  Storybook 的進展和未來

  Storybook 是目前最受歡迎的 UI 元件環境，它為各種視圖層（如 React、Vue、Angular、React Native、Ember）提供了結構化的 UI 開發、測試和文檔。

  采用情況：Storybook 是 Airbnb、Slack、Squarespace、Lyft 和 Dropbox 等巨頭公司的首選 UI 工具，而且在各個行業和開源項目中的采用還在繼續增長，最近的每月 npm 下載下傳量超過 450 萬次。

  蓬勃的社群：Storybook 社群在 Github 上有 600 多個貢獻者和 34K 個星标，從星标數量來看，Storybook 已經進入了前 40 個 JavaScript 項目的行列。Storybook 社群比以往任何時候都更強大。為了這個項目的未來，還成立了一個由進階維護人員組成的指導委員會。

  專業級工具：在 2018 年，Storybook 團隊專注于建構 Storybook 平台，包括擴充視圖層支援、插件的交叉相容性，并與 JavaScript 工具一起演化。2019 年，Storybook 團隊将通過以下方式改善開發者體驗：

• 提高使用者回報的優先級；
• 為 Storybook 提供更多的配置方式；
• 釋出更多小版本，讓平台變得更穩定。

  Storybook 5.0 新特性

  SB5 的核心是一個漂亮的新使用者界面。具有諷刺意味的是，對于這樣一個被廣泛使用的 UI 開發工具，Storybook 本身在設計方面還有很多需要改進的地方。Storybook 的新設計是自項目開始以來的第一次重大調整。

  

  新的使用者界面解決了自 2016 年以來使用者回報的問題，包括:
• 新設計的亮色和暗色主題；
• 畫布工具欄，可以友善地通路插件；
• 調整導航欄，菜單更加直覺；
• 重新設計插件面闆，可以使用按鈕切換可見性和方向；
• 使用者可配的鍵盤快捷鍵；

• 新的 URL 結構，消除了長串的查詢參數。

  這些更新改進了整個 Storybook 生态系統的視圖層、插件和內建。

  重用 Storybook 元件

  Storybook 本身就是用 Storybook 建構的。Storybook 團隊正在釋出 @storybook/components 庫，用來加快開發速度，促進最佳實踐。這意味着插件開發人員可以更快地建構與 Storybook UI 一緻的插件。

  

  Storybook 元件使用 React 和 Emotion 實作。這個庫包含了 Storybook 界面的所有建構塊，可用于開發桌面和移動 UI，并可通過 Emotion 靈活的主題 API 進行定制開發。

  這個庫實作了以下幾個的目标：

• 加快開發：記錄常見的用例、自動化可視化測試，并促進代碼重用；
• 促進最佳實踐：Storybook 團隊的長期目标是讓這個庫成為使用 Storybook 建構設計系統的風向标。雖然還有很長的路要走，但 SB5 是邁出的關鍵一步；
• 改進工作流：SB5 的很多改進來自建構 Storybook 元件庫本身。

  定制 Storybook

  Storybook 還提供了一個新的前端架構，用于改進 Storybook 的定制化。Storybook 一直都有提供插件和建構配置 API，而現在 SB5 開始開啟可配置的使用者界面。

  主題 API

  在 Storybook 中應用主題比以往任何時候都更容易、更一緻、更美觀。這可以通過新的主題 API 來實作，新版本的 API 對 4.0 版本的 API 進行了改進。

  

  Storybook 提供了開箱即用的“亮色”和“暗色”主題。這些主題可以獨立使用，可以作為主題定制化的起點。下面是一個簡單的例子:

  SB5 的主題系統被抽象為一組變量，簡化了開發人員的定制化工作，同時随着 Storybook UI 的演化，更容易保持向後相容性。有關 SB5 中主題的更多資訊，請參閱相關文檔：

  https://storybook.js.org/configurations/theming/

  插件 API

  SB5 包含了一個擴充的插件 API，提供了兩種将插件連接配接到 UI 的新方式：工具欄和頁籤。

  工具欄：插件現在可以被添加 UI 到工具欄！這樣使用者就可以立即看到插件。視圖、背景和可通路性插件都支援這個新特性。

  頁籤：插件還可以向主面闆添加新頁籤。Notes 插件已經支援這個特性，稍後會有更多的內建。

  

  對于插件使用者來說，SB5 的安裝和配置并沒有發送變化。對新 API 感興趣的插件作者可以參考 Storybook 的插件文檔：

  https://storybook.js.org/addons/writing-addons/

  全新的 Storybook 網站

  最新版 SB5 的最大亮點是 Storybook 的新網站。這個網站解釋了 Storybook 諸多方面的好處——靈感來自社群的聚會、讨論、示範和博文。

  

  為什麼要使用 Storybook？

  更新到 Storybook 5.0

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