如何在Ember中创建组件依赖图？解析hbs及路由方法咨询

一、组件及子组件依赖图生成（解析.hbs文件） #

你找到的dependency-cruiser完全支持解析Ember的.hbs模板文件，步骤如下：

1. 生成Ember适配的配置文件
   在项目根目录运行：

   npx depcruise --init ember
   

   这个命令会自动生成.dependency-cruiser.js配置文件，默认已经包含了.hbs文件的解析规则，能识别模板中{{component-name}}、{{my-component}}这类组件调用。

2. 按需调整配置（可选）
   打开生成的配置文件，确认options.extensions数组包含.hbs，同时检查rules部分是否开启了模板组件引用的检测逻辑，默认配置已经覆盖大部分场景，特殊结构（如pod组件）可在moduleSystems或paths字段补充路径映射。

3. 生成可视化依赖图
   运行命令生成SVG格式的组件依赖图：

   # 仅生成组件目录的依赖图
   npx depcruise --output-type dot src/app/components | dot -Tsvg > component-dependency.svg
   
   # 生成所有模板文件（含页面模板）的依赖图
   npx depcruise --output-type dot src/app/templates | dot -Tsvg > template-component-dependency.svg
   

   注：需要提前安装Graphviz（dot命令依赖），可通过包管理器直接安装。

二、路由依赖图生成 #

方法1：用dependency-cruiser解析路由文件 #

Ember路由的嵌套、继承关系可直接通过dependency-cruiser解析路由目录生成：

npx depcruise --output-type dot src/app/routes | dot -Tsvg > route-dependency.svg

该命令会识别路由类的继承（如export default class ChildRoute extends ParentRoute）以及路由文件的目录结构映射的嵌套关系。

方法2：Ember CLI辅助工具（快速查看） #

如果仅需快速查看路由结构，可直接运行：

ember route:list

它会以文本形式列出所有路由的层级关系，但无法生成可视化图表；若需在开发环境实时查看，可使用ember-route-visualizer插件，在浏览器内动态展示路由树。

注意事项 #

• 动态组件（如{{component this.dynamicComponentName}}）属于运行时动态引用，dependency-cruiser无法静态解析，这类场景需结合代码注释或手动梳理补充。
• 若项目采用pod结构，需在.dependency-cruiser.js的paths字段配置pod目录的路径映射，确保工具能正确识别组件和路由模块。

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