模块化解决变量污染、代码复用难、依赖顺序失控及tree-shaking失效问题;ES6 import/export为标准方案,语法静态可分析;CommonJS仍广泛存在,混用时需注意默认导出与module.exports差异。

模块化解决的是什么问题
不使用模块化时,var 声明的变量默认挂载到全局作用域,多个脚本间容易发生变量名冲突;函数和对象反复复制粘贴导致维护困难;无法控制依赖加载顺序,ReferenceError 频发;构建工具也无法做静态分析来剔除未使用的代码(tree-shaking 失效)。
ES6 import/export 是当前标准方案
它由浏览器和 Node.js 原生支持(Node 从 v12.20+ 默认启用 ES 模块),语法简洁、静态可分析、支持命名导出与默认导出混合使用。
-
export必须在顶层作用域,不能在条件语句或函数内 -
import路径必须是字符串字面量,不支持拼接(如import('./' + name + '.js')是动态导入,语法不同) - 默认导出(
export default)一个模块只能有一个,导入时名字可任意;命名导出(export const x = 1)可多个,导入时名字必须匹配或用as重命名
export const PI = 3.14;
export function add(a, b) { return a + b; }
export default class Calculator { }
import Calculator, { PI, add } from './math.js';
CommonJS 在 Node.js 早期生态中仍广泛存在
虽然 Node 已支持 ES 模块,但大量 npm 包(尤其老版本)仍以 module.exports 和 require() 输出。混用时需注意:require() 无法直接读取 export default 的值(会得到 { default: ... }),而 import 加载 CommonJS 模块时,其 module.exports 对象会被当作默认导出。
- Node 中启用 ES 模块需在
package.json中设置"type": "module",否则.js文件按 CommonJS 解析 - 动态
require()在 ES 模块中不可用,应改用import()(返回 Promise) - Webpack/Vite 等打包器能自动处理二者互调,但裸运行环境(如 Node CLI)会报错
模块路径解析和循环依赖的真实表现
ES 模块在编译阶段就解析依赖图,路径必须明确——相对路径(./utils)、绝对路径(/src/index)或包名(lodash);而 CommonJS 的 require('lodash') 会在运行时沿 node_modules 逐层查找。
立即学习“Java免费学习笔记(深入)”;
循环依赖在两种系统中行为不同:CommonJS 返回已执行部分的 exports 对象(可能为不完整状态);ES 模块则提前创建绑定(live binding),即使模块尚未执行完,导入的值也会随原始值变化而更新。
真正棘手的不是语法怎么写,而是当一个模块同时被 ESM 和 CommonJS 方式引用,且内部有副作用(如立即执行的初始化逻辑),结果可能因加载时机差异而不可预测。










