storybook-addon-versions

安裝

npm i @panosvoudouris/addon-versions

此擴充功能可讓您導覽元件的不同版本，前提是您的設定會為每個版本產生不同的靜態 Storybook 建置。因此，如果您建置一個靜態 Storybook 並將其託管在例如以下的目錄結構中

- static-storybook
|-- 0.0.1
|-- 0.0.2
|-- 0.1.2
|-- 0.2.5

此擴充功能將允許您透過 Versions 面板導覽各種版本

組態

此擴充功能會嘗試從您主機的根目錄取得可用的風格指南版本列表。如果找到這些版本，它會顯示一個下拉式選單，讓您導覽到各種版本，從而允許使用者查看元件在不同版本中可能發生的變化。

用法

1. 將擴充功能包含在您的 addons.js 中
   • import '@panosvoudouris/addon-versions/register';
2. 在 .storybook/storybook-config.json 建立 Versions 組態

   • {
       "storybook": {
         "versions": {
           "availableVersions": [
             "0.0.1",
             "0.0.2",
             "0.1.2",
             "0.2.5"
           ],
           "hostname": "localhost:8000",
           "localhost": "localhost:9001",
           "regex": "\/([^\/]+?)\/?$"
         }
       }
     }
     

選項

• availableVersions：可用版本的陣列。
• hostname：靜態建置所在的主機名稱。目前，如果您希望連結在本地開發建置中能正常運作，但在正常的託管組態中無法運作，則需要新增路徑。
• localhost：在開發模式下執行時，本地開發建置的位置
• regex：這是一個正規表示式，用於提取 URL 的版本號碼。這取決於您儲存靜態 Storybook 建置的方式。上面的範例適用於格式 https://127.0.0.1:port/<version>/，因此，例如，版本 0.1.2 預期會像這樣找到 http://mystorybook/0.1.2/。

注意事項

這是 https://github.com/buildit/storybook-addon-versions 的分支。該儲存庫似乎已不再維護，因此我分支了它以繼續維護（例如，升級到最新的 Storybook 等）和升級。