如何在 React 应用程序中生成所有组件导入的父子“树”视图

Question

有没有办法在 React 应用程序中生成所有组件的“树”视图？例如，如果我有以下简单的应用程序文件结构：

recipe

我的 src/ - index.tsx - App.tsx - components/ - ComponentOne.tsx - ComponentTwo.tsx 文件看起来像这样：

index.tsx

我的 import App from "./App"; ReactDOM.render(<App />, document.getElementById("app-root")); 文件看起来像这样：

App.tsx

有没有办法以 JSON 格式生成这个结构的映射，像这样？：

import ComponentOne from "./ComponentOne";
import ComponentTwo from "./ComponentTwo";

export default function App(){
  return (
    <ComponentOne />
    <ComponentTwo />
  );
}

我假设编译器必须在编译应用程序的过程中创建类似于这种格式的东西（即解析导入语句，确定子父关系），并且显然有各种因素影响模块路径的解析方式，但能够以编程方式生成即使是简单的表示（如 Chrome React 开发者控制台中显示的表示）也对我的项目非常有帮助。