UI5中依赖模块未定义，如何检测循环依赖？

问题背景 #

当项目中出现模块间的循环依赖（如下方代码示例），构建后的Component-preload.js会出现依赖模块参数为undefined的情况：

循环依赖代码示例 #

sap.ui.define([ // my/ModuleA.js
  // "...",
  "./ModuleB",
], function (/*...,*/ModuleB) {
  // ModuleB 在此处为 undefined
  return/*...*/;
});

sap.ui.define([ // my/ModuleB.js
  // "...",
  "./ModuleA"
], function (/*...,*/ModuleA) {
  // ModuleA 在此处为 undefined
  return/*...*/;
});

小型项目中这类问题容易排查，但模块数量多、依赖关系复杂时，需要更高效的检测手段。

高效检测方法 #

• UI5 Tooling构建检测
  执行ui5 build --all命令构建项目时，UI5 Tooling会自动扫描并在控制台输出循环依赖的警告信息，直接指明存在循环的模块路径，无需额外配置。

• ESLint规则校验
  安装eslint-plugin-ui5并启用ui5/no-cyclic-dependencies规则，运行ESLint检查时，插件会遍历所有UI5模块的依赖声明，找出循环依赖链并给出精准的定位提示，适合集成到CI流程中做自动化检查。

• 依赖树分析
  运行ui5 dependencies命令生成项目完整的依赖树，将输出结果导出为文件后，可通过文本搜索或本地可视化脚本梳理依赖关系，快速定位闭环。

• 运行时调试追踪
  在浏览器开发者工具的Sources面板中，给sap.ui.define设置断点。当模块加载时，观察依赖的加载顺序，若某模块未完成初始化就被其他模块引用，结合调用栈可追踪到具体的循环依赖模块。

避免循环依赖的建议 #

除了检测，更建议从代码结构上避免循环依赖：

• 提取公共逻辑到独立的基础模块，让原本循环依赖的模块都依赖该基础模块，切断循环链。
• 对非必要的依赖采用动态加载，在模块的方法内部通过sap.ui.require按需加载，而非在模块定义的依赖数组中声明。

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