依赖关系树

Storybook 依赖关系树

在 Github 上查看

Storybook 插件:依赖关系树

概述

Storybook 依赖关系树是一个 Storybook 插件,它以树状视图的形式可视化每个故事的依赖关系层次结构。此工具帮助开发人员更好地理解和导航与其故事相关的依赖项和被依赖项,从而使开发过程更加高效。

注意:此项目正在开发中,并且正在积极开发。

Dependency Tree Preview

特性

  • 可视化依赖关系映射:自动加载并显示当前打开的故事的所有依赖项,提供类似于storybook-addon-deps的清晰且结构化的视图。
  • 被依赖项可视化:除了依赖项之外,插件还会显示所有被依赖项,帮助您查看哪些组件依赖于当前故事。
  • 无缝集成:与 Storybook 无缝集成,增强您的开发工作流程。
  • 运行时执行:在运行时执行,无需任何额外的命令。
  • 零配置:无需任何配置即可开始使用。

依赖项

  • 依赖项加载:由node-dependency-tree提供支持,以准确映射和加载依赖项。
  • 树状视图:利用MUI X 提供强大且交互式的树状视图体验。

安装

要安装插件,请在您的项目目录中运行以下命令:

npm i storybook-dependency-tree

安装后,将 'storybook-dependency-tree' 添加到主 Storybook 配置文件(例如,main.js)中的 addons 属性中。

  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    ...
    "storybook-dependency-tree",
  ],
作者
  • claushellsing
    claushellsing
适用于
    React
    Vue
标签