ES6模块和CommonJS模块的区别？

在现代JavaScript开发中，模块系统是组织代码的基石。ES6模块（ESM）和CommonJS（CJS）是两种主流规范，它们在设计哲学、语法和运行时有显著不同。理解这些差异对于构建跨环境应用和选择合适的工具链至关重要。

语法与导入导出方式

CommonJS使用require()函数动态同步加载模块，使用module.exports或exports对象导出模块内容。它诞生于Node.js环境。

// CommonJS 导出
module.exports = { add, subtract };
exports.multiply = (a, b) => a * b;

// CommonJS 导入
const math = require('./math.js');
const { multiply } = require('./math.js');

ES6模块使用import和export关键字，语法是静态声明式的。它是ECMAScript语言标准的一部分。

// ES6 导出
export const add = (a, b) => a + b;
export default function subtract(a, b) { return a - b; }

// ES6 导入
import sub, { add } from './math.js';
import * as math from './math.js';

ES6模块支持命名导出和默认导出，并且导入绑定是只读的，类似于const声明。CommonJS导出的是值的拷贝（对于基本类型）或引用（对于对象），导入后可以修改其属性。

加载时机与性质

这是最核心的区别之一。CommonJS模块是动态的、同步的。require()可以在代码的任何地方（包括条件判断内）调用，模块在运行时被加载并执行，导出的是模块执行后最终的值。

// CommonJS 动态条件导入
if (condition) {
  const moduleA = require('./moduleA');
}

ES6模块是静态的。import声明必须位于模块顶层，无法在条件块或函数内使用。这意味着依赖关系在代码解析阶段（编译时）就能确定，这使得静态分析、摇树优化和循环引用处理更为可靠。

// ES6 导入必须静态
// if (condition) { import moduleA from './moduleA'; } // 语法错误

运行时行为与this指向

在Node.js环境中，CommonJS模块的顶层this指向module.exports，而ES6模块的顶层this是undefined。CommonJS模块的require.cache可以追踪已加载的模块，而ESM没有直接的等价物。

对于循环依赖的处理，两者机制也不同。CommonJS遇到循环依赖时，可能导出尚未执行完成的模块对象（一个不完整的副本）。ES6模块由于是静态分析，会创建指向被导入模块的“活的”只读绑定，通常能更安全地处理循环引用。

互操作与使用场景

在Node.js中，使用.mjs后缀或设置package.json中的type字段为"module"来启用ES6模块。在浏览器中，通过<script type="module">标签直接支持ESM。

当前，Node.js生态正从CommonJS向ES6模块过渡，许多工具（如Webpack、Rollup）都同时支持两者并进行转换。在纯前端项目中，ES6模块已是标准。在Node.js后端，新项目建议使用ESM以获得更好的兼容性和优化潜力，但在维护旧项目或使用某些仅支持CJS的库时，仍需使用CommonJS。