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

【问题标题】：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 并从那里获取版本。我无法找到将其插入故事书的方法，只能将其放入我们应用程序的另一部分，抱歉！

标签： storybook

【解决方案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>

【讨论】：