ESM模块语法需用import语句、带.js后缀、区分default与named导出；不可混用CommonJS；import.meta.url替代__dirname；循环引用导致未初始化变量为undefined。
ESM 模块语法怎么写才不会报错
浏览器和 Node.js（v14.13+ 默认启用）都支持原生 ESM，但写法稍有差异，常见错误是直接用 require() 或漏写 .js 后缀。
- 导入必须用
import语句，不能在条件或函数内动态写（除非用import()动态导入） - 路径必须带扩展名（
import { foo } from './utils.js'），否则浏览器会 404 - Node.js 中若用
.mjs后缀或"type": "module"字段，require()就不可用 - 默认导出和具名导出不能混用写法：
export default function bar() {}对应import bar from './bar.js'；而export function baz() {}必须用import { baz } from './baz.js'
/* math.js */
export function add(a, b) {
return a + b;
}
export const PI = 3.14159;
<p>/<em> main.js </em>/
import { add, PI } from './math.js';
console.log(add(2, 3), PI); // 5 3.14159CommonJS 和 ESM 能不能混用
不能直接混用。Node.js 允许同一项目中同时存在 .cjs 和 .mjs 文件，但跨模块调用时会触发严格隔离：ESM 无法 require() CJS 模块，CJS 也无法 import ESM 模块（require('./esm.mjs') 会报 ERR_REQUIRE_ESM）。
- 若必须桥接，CJS 可用
import()动态加载 ESM（返回 Promise），但无法同步获取值 - ESM 中可通过
createRequire()创建 CJS require 函数，仅限 Node.js 环境 - Webpack/Vite 等打包工具能自动处理混合导入，但底层逻辑仍是转换，不是运行时互通
// 在 ESM 文件中桥接 CJS（Node.js only）
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const legacy = require('./legacy.cjs');为什么 import.meta.url 比 __dirname 更可靠
ESM 中没有 __dirname 和 __filename，直接访问会报 ReferenceError。用 import.meta.url 是唯一标准方式，它返回当前模块的完整 URL（如 file:///path/to/module.js），再配合 URL 构造器和 path 模块（Node）或 new URL(..., import.meta.url)（浏览器）可安全解析路径。
- 浏览器中：
new URL('./assets/', import.meta.url)得到绝对 URL，不依赖当前页面路径 - Node.js 中：
fileURLToPath(import.meta.url)配合dirname()才能得到目录路径 - 硬编码相对路径（如
../config.json）在打包后极易失效，尤其被 Rollup/Webpack 提取为 chunk 时
// Node.js 中获取当前模块所在目录
import { dirname } from 'path';
import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url));
console.log(__dirname); // /project/src模块循环引用时实际发生了什么
ESM 的循环引用不是“报错”，而是“部分初始化”——模块对象已创建并导出，但未执行完脚本，未赋值的变量为 undefined。这比 CommonJS 的“导出空对象再填充”更透明，但也更容易踩坑。
立即学习“Java免费学习笔记（深入）”；
- A.js 导入 B.js，B.js 又导入 A.js → A 执行到
import行时暂停，先执行 B，B 访问 A 的导出项，此时 A 中尚未执行到那行export const x = ...，x 就是undefined - 函数声明会被提升，所以即使在导入后定义，也能被循环引用方调用；但
const/let不会提升，访问即ReferenceError - 避免在模块顶层直接使用对方未完成初始化的值，把逻辑移到函数内延迟执行
模块化不是加几个 import 就完事，关键是理解导出时机、路径解析规则和环境边界。浏览器里少一个 .js 后缀，Node 里多一个 type: module，都可能让整个模块图加载失败。真正麻烦的往往不是语法，而是那些没报错但值为 undefined 的循环引用变量。
