如何在React项目的Storybook中新增展示CHANGELOG.md的组件变更日志标签页

当然可以！在React项目的Storybook里新增一个展示CHANGELOG内容的自定义标签页完全可行，下面是两种实用的实现方式，你可以根据自己的需求选择：

方式一：全局添加（所有组件共用一个CHANGELOG） #

这种方式适合项目级的CHANGELOG，会给所有组件的Storybook页面都加上这个标签页。

步骤1：安装依赖 #

首先需要安装marked来解析Markdown内容：

npm install marked --save-dev
# 或者用yarn
yarn add marked -D

步骤2：配置自定义标签页 #

在你的Storybook配置目录（通常是.storybook/）下的preview.js文件中添加以下代码：

import React from 'react';
import { addons } from '@storybook/addons';
import fs from 'fs';
import path from 'path';
import marked from 'marked';

// 读取项目根目录下的CHANGELOG.md文件
const changelogPath = path.resolve(__dirname, '../CHANGELOG.md');
const changelogContent = fs.readFileSync(changelogPath, 'utf8');
// 将Markdown转换为HTML
const changelogHtml = marked(changelogContent);

// 创建自定义标签页组件
const ChangelogTab = () => (
  <div style={{ padding: '2rem', overflowY: 'auto', height: '100%' }}>
    <div dangerouslySetInnerHTML={{ __html: changelogHtml }} />
  </div>
);

// 注册标签页到Storybook
addons.register('custom/changelog', () => {
  addons.add('custom/changelog', {
    type: 'tab',
    title: 'Changelog',
    render: ChangelogTab,
  });
});

重启Storybook后，你就能在所有组件的页面看到新增的「Changelog」标签页了。

方式二：单个组件单独配置（组件专属CHANGELOG） #

如果每个组件都有自己独立的CHANGELOG文件，可以在对应组件的stories文件中单独配置标签页：

import React from 'react';
import fs from 'fs';
import path from 'path';
import marked from 'marked';
import { MyComponent } from './MyComponent';

// 读取当前组件目录下的CHANGELOG.md
const changelogContent = fs.readFileSync(path.resolve(__dirname, './CHANGELOG.md'), 'utf8');
const changelogHtml = marked(changelogContent);

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
  parameters: {
    tabs: {
      items: [
        { id: 'canvas', title: 'Canvas', type: 'canvas' },
        { id: 'docs', title: 'Docs', type: 'docs' },
        { id: 'changelog', title: 'Changelog', render: () => (
          <div style={{ padding: '2rem' }} dangerouslySetInnerHTML={{ __html: changelogHtml }} />
        ) },
      ],
    },
  },
};

// 组件的Story案例
export const Default = () => <MyComponent />;

一些注意事项 #

• XSS风险提醒：使用dangerouslySetInnerHTML时，要确保CHANGELOG的内容是可信的，避免注入恶意代码。
• 文件读取问题：如果在构建过程中遇到文件读取失败的情况，可以尝试用raw-loader导入Markdown内容：

  import changelogContent from 'raw-loader!../CHANGELOG.md';
  

  记得先安装raw-loader：npm install raw-loader --save-dev
• 版本兼容性：不同版本的Storybook API可能略有差异，如果是Storybook 7+，可以参考官方的自定义tab文档调整代码，但核心逻辑是一致的。

内容的提问来源于stack exchange，提问作者Emi