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 等）和升級。