Storybook 擴充套件：相依性樹狀圖

概述

Storybook 相依性樹狀圖是一個 Storybook 擴充套件，它以樹狀圖視覺化每個 Story 的相依性階層。這個工具可以幫助開發人員更好地理解和導覽與其 Story 相關的相依性和依賴者，從而提高開發效率。

注意：這個專案正在開發中，且積極進行中。

功能

• 視覺化相依性映射：自動載入並顯示目前開啟的 Story 的所有相依性，提供類似於 storybook-addon-deps 的清晰結構化視圖。
• 依賴者視覺化：除了相依性之外，這個擴充套件還會顯示所有依賴者，協助您查看哪些元件依賴目前的 Story。
• 無縫整合：與 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",
  ],