import/export 是编译时模块机制，强制顶层声明、禁止动态导出，引发TDZ和循环依赖中undefined问题；应优先用export const、拆分共享模块、函数内动态import()解耦。
import 和 export 的基本用法不是语法问题，而是模块加载时机问题
ES 模块（import/export）在编译阶段就解析依赖关系，和 CommonJS 的 require() 运行时加载完全不同。这意味着：所有 import 必须写在文件顶层，不能放在条件语句或函数里；export 也必须是声明式，不能动态拼接。
常见错误现象：
-
ReferenceError: Cannot access 'xxx' before initialization—— 不是变量没定义，而是模块初始化顺序导致的暂时性死区（TDZ） -
import { foo } from './bar.js';报错说foois not exported —— 实际上bar.js用了export default，但你用了命名导入
实操建议：
- 默认导出用
import xxx from './mod.js'，命名导出用import { foo, bar } from './mod.js'，混用时写成import xxx, { foo } from './mod.js' - 想重命名导入：用
import { foo as myFoo } from './mod.js' - 批量导入所有命名导出：
import * as mod from './mod.js'，之后通过mod.foo访问 - 导出时优先用
export const x = 1而非先声明再export { x }，更清晰且避免 TDZ 风险
循环依赖在 ES 模块中不会报错，但值可能是 undefined
CommonJS 中循环 require() 返回的是已执行部分的 module.exports 对象（可能不完整）；ES 模块则不同：导入绑定是实时的、只读的引用，但模块脚本尚未执行完时，被依赖模块的顶层变量仍处于未初始化状态。
立即学习“Java免费学习笔记（深入）”；
典型场景：
/* a.js */
import { bValue } from './b.js';
export const aValue = 'a';
console.log('a loads b:', bValue); // undefined
/ b.js /
import { aValue } from './a.js';
export const bValue = 'b';
console.log('b loads a:', aValue); // undefined
原因不是模块没加载，而是 a.js 开始执行时，b.js 的 export const bValue = 'b' 还没运行到——ES 模块的执行顺序是深度优先遍历依赖图后，再统一按顺序执行脚本。
解决办法不是“避免所有循环”，而是控制依赖粒度和时机：
- 把共享数据或工具函数抽到第三个模块
shared.js，让a.js和b.js都只依赖它 - 把需要互相调用的逻辑从顶层移到函数内，用动态
import()延迟到实际调用时才加载（注意：这是 Promise，需await） - 如果只是类型或接口循环（如 TypeScript），用
import type或declare，它们在编译后会被擦除，不影响运行时
动态 import() 是打破循环依赖最实用的运行时手段
import() 是函数调用，返回 Promise，它绕过了静态分析阶段，因此不参与模块图构建，也就不会触发循环检查。
适用场景：
- 路由级模块拆分（React/Vue 中的 lazy loading）
- 插件系统中按需加载能力模块
- 真正需要 A 在某个方法里才用到 B，而 B 又依赖 A 的某些基础能力
示例：
/* a.js */
export function doSomething() {
return import('./b.js').then(({ bHelper }) => bHelper());
}
/ b.js /
import { aUtils } from './a.js'; // 这里仍可静态导入 a 的工具，只要不涉及循环初始化值
export function bHelper() {
return aUtils.baseMethod(); // ✅ 安全，因为 aUtils 是导出对象上的属性，不是顶层变量
}
注意：import('./b.js') 中路径必须是字符串字面量或模板字符串（不能是变量拼接），否则 Webpack/Vite 无法做静态分析和代码分割。
打包工具对循环依赖的警告往往比运行时更严格
Vite 默认静默处理循环依赖，但会输出 warning；Webpack 5+ 默认允许，但开启 experiments.topLevelAwait: true 后行为可能变化；Terser 或其他压缩器可能因优化移除“看似无用”的导出，导致循环中某一方变成 undefined。
排查建议：
- 用
node --experimental-modules --trace-module-resolution xxx.mjs查看模块解析链 - 在关键模块顶部加
console.log('loading', import.meta.url)，观察执行顺序 - 不要依赖
export default class X {}的类名在循环中可用——类声明本身有 TDZ，new X()在对方模块执行到该行前会失败
最易被忽略的一点：循环依赖常出现在状态管理或事件总线模块中，比如 store.js 导入 api.js，而 api.js 又导入 store.js 来读取 token。这种情况下，应把 token 提取为独立的响应式 ref（Vue）或 atom（Jotai），或改用函数式获取 getToken()，而非直接导入 store 实例。
