寻找在故事书中显示我的图书馆版本的简单方法

Posted 2023-02-19

【中文标题】寻找在故事书中显示我的图书馆版本的简单方法

【英文标题】：Looking for easy way to show my library's version in storybook

【发布时间】：2020-06-18 09:31:17

【问题描述】：

我正在尝试将项目的当前版本（基本上是 package.json 中的 version 字段）添加到故事书中，以便故事书的消费者可以知道他们正在查看的项目版本。但是，我发现这样做非常困难，我无法在配置文件中找到一种方法，也没有看到任何只会显示项目当前版本的插件（除了更适合展示组件在版本中的变化，这并不是我真正想要的）。

在 js 文件中要求 package.json 文件并从那里获取版本很容易，但故事书似乎相当锁定，允许您将任何附加信息发送到标题/侧边栏。

以前有人做过这样的事吗？对于如何做到这一点的任何想法或理论，我将不胜感激。谢谢！

【问题讨论】：

有这方面的消息吗？我正在尝试做同样的事情......

@Finrod 我最终需要包 json 并从那里获取版本。我无法找到将其插入故事书的方法，只能将其放入我们应用程序的另一部分，抱歉！

【参考方案1】：

我终于在我的.mdx 文档文件中使用Meta 组件的title 属性找到了一个“还不错”的解决方案：

import pkg from '../package.json'
import  Meta  from '@storybook/addon-docs/blocks'

<Meta title=`Docs $pkg.version/Migration Guide` />

【参考方案2】：

也对这个问题感兴趣。我已经添加到brandTitle 到.storybook/manager.js 喜欢

import  version  from "../package.json";
addons.setConfig(
   theme: create(
       base: "light",
       brandTitle: `My components v.$version`
   ),
);

Theming docs

【参考方案3】：

由于 Markdown 接受基本的 html 标签，我设法将 package.json 的版本显示到 .mdx 文档中，如下所示：

import pkg from '../package.json'

<p>Version: pkg.version</p>