JavaScript模块循环依赖需借助工具静态分析提前发现，ESLint+eslint-plugin-import可轻量检测并报错，madge支持可视化依赖图谱，Webpack 5+构建时警告，VS Code插件实现保存即提示。
JavaScript模块循环依赖无法被运行时自动阻止，但可通过工具提前发现并定位。关键在于利用静态分析能力，在代码执行前识别 import/export 链路中的闭环。
ESLint + eslint-plugin-import 检测循环引用
这是最轻量、集成度最高的方案。插件会扫描所有 ES 模块导入路径，标记出形成环的文件组。
- 安装：
npm install --save-dev eslint eslint-plugin-import - 在
.eslintrc.js中启用规则："import/no-cycle": ["error", { "maxDepth": 5 }]
（maxDepth控制检测深度，避免误报过深嵌套） - 运行
npx eslint src/即可输出类似：
'src/utils/api.js' → 'src/store/index.js' → 'src/utils/api.js'
madge：可视化依赖图谱
适合排查复杂项目中隐藏较深或跨多层的循环，支持生成图形化依赖关系图。
- 安装：
npx madge --circular --extensions js,ts src/ - 输出结果示例：
✖ Found 2 circular dependencies!src/features/user/UserList.js → src/features/user/UserService.js → src/shared/apiClient.js → src/features/user/UserList.js - 加
--image graph.png可导出 PNG 图，直观查看模块间箭头闭环
Webpack 构建时警告（仅限打包项目）
Webpack 5+ 默认会在构建日志中标记循环依赖，虽不中断构建，但提供精准位置信息。
立即学习“Java免费学习笔记（深入）”；
- 开启详细日志：
webpack --stats=verbose - 查找关键词："Cyclic dependency"，后跟具体文件路径和 require/import 调用栈
- 注意：仅对实际参与打包的模块生效，tree-shaking 后可能不显示已剔除的循环
VS Code 插件辅助日常开发
将检测前置到编码阶段，减少手动运行命令成本。
- 推荐插件：Import Cost（看引入体积）、Dependency Analytics（查依赖链）
- 更直接的是 ESLint 插件：保存即提示循环依赖，点击跳转问题行
- 配合
jsconfig.json或tsconfig.json的"allowSyntheticDefaultImports": true等配置，避免因类型声明引发的误报
