JavaScript中的import和export怎么用_循环依赖如何解决_技术教程

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'; 报错说 foo is 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 模块则不同：导入绑定是实时的、只读的引用，但模块脚本尚未执行完时，被依赖模块的顶层变量仍处于未初始化状态。

典型场景：

/* 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 实例。