JavaScript模块化：CommonJS与ES6对比解析

本文深入剖析了JavaScript模块化中CommonJS与ES6（ESM）两大规范的核心差异：从加载时机（运行时同步 vs 编译时静态）、语法限制（动态路径/条件导入 vs 顶层字面量路径）、导出机制（值拷贝 vs 实时绑定）、默认导出语义、循环依赖行为，到跨规范互操作的常见陷阱与解决方案，全面揭示了在Node.js和浏览器环境中混合使用二者时极易踩坑的关键细节——无论是TypeError报错、状态不同步，还是undefined值谜题，背后都源于这些底层机制的深刻分歧，堪称现代JavaScript工程化实践中绕不开的模块“认知地图”。

CommonJS 的 require 是同步加载，ES6 import 是静态编译时处理

这是最根本的差异：CommonJS 的 require 在运行时执行，可以写在条件分支里、函数内部，甚至拼接路径；而 ES6 的 import 必须出现在模块顶层，且路径必须是字符串字面量——不能是变量、不能拼接、不能动态计算。

常见错误现象：TypeError: Cannot use import statement outside a module，通常是因为 Node.js 默认按 CommonJS 解析，没启用 ES 模块支持；或浏览器中直接用 import 但没加 type="module" 属性。

• Node.js 中启用 ES 模块：在 package.json 加 "type": "module"，或用 .mjs 后缀
• 浏览器中使用 import：HTML 脚本标签必须写成