storybook-addon-versions

安装

npm i @panosvoudouris/addon-versions

如果您有一个为每个版本生成不同静态 Storybook 构建的设置，则此插件允许您浏览组件的不同版本。因此，如果您构建了一个静态 Storybook 并将其托管在以下目录结构中

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

该插件将允许您通过“版本”面板浏览各个版本

配置

该插件尝试从您的主机根目录获取可用风格指南版本的列表。如果找到，它将显示一个下拉列表，然后允许您导航到各个版本，从而允许用户查看组件在不同版本中可能发生的变化。

用法

1. 在您的 `addons.js` 中包含插件
   • import '@panosvoudouris/addon-versions/register';
2. 在 `.storybook/storybook-config.json` 中创建版本配置

   • {
       "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//`，例如，版本 `0.1.2` 预计会像这样找到 `http://mystorybook/0.1.2/`。

备注

这是 https://github.com/buildit/storybook-addon-versions 的分支。该存储库似乎现在已失效且不再维护，因此我已将其分叉以继续维护（例如，升级到最新 Storybook 等）和升级。