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
面板导航到各个版本
配置
该插件会尝试从您的主机根目录获取可用样式指南版本的列表。如果找到,它将显示一个下拉菜单,然后您可以导航到各个版本,从而让用户了解组件在不同版本中可能发生的变化。
用法
- 在您的
addons.js
中包含此插件import '@panosvoudouris/addon-versions/register';
- 在
.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 构建的方式。上面的示例适用于格式http://localhost:port/<version>/
,因此例如,版本0.1.2
应该可以在http://mystorybook/0.1.2/
找到。
注意
这是 https://github.com/buildit/storybook-addon-versions 的一个分支。该仓库似乎已经失效且不再维护,因此我分叉了它以继续维护(例如升级以支持最新的 storybook 等)和升级。