面试题：JavaScript中CommonJS与ES6 Modules的差异

Question

请阐述JavaScript里CommonJS和ES6 Modules在模块导入导出方式、加载机制以及适用场景上有哪些不同之处。

Answer 1

模块导入导出方式

• CommonJS：使用exports或module.exports导出，require导入。例如：

// 导出
exports.fun = function() {}
module.exports = {
    data: 'value'
};

// 导入
const module = require('./module');

• ES6 Modules：使用export和import关键字。例如：

// 导出
export const data = 'value';
export function fun() {}

// 导入
import { data, fun } from './module.js';

加载机制

• CommonJS：运行时加载，模块加载是同步的，只有等到模块加载完成后才能执行后续代码。它是值的拷贝，即导出的值是在导出时确定的，之后模块内部对导出值的修改不会影响到导入方。
• ES6 Modules：编译时加载（静态加载），在代码解析阶段就确定了模块的依赖关系，使得编译器可以在编译阶段进行优化。它是值的引用，模块内部对导出值的修改会反映到导入方。

适用场景

• CommonJS：适用于Node.js服务器端开发，因为Node.js是单线程的，同步加载模块不会阻塞I/O操作，符合其运行机制。同时，CommonJS也常用于旧版本JavaScript项目的模块化开发。
• ES6 Modules：适用于浏览器端以及现代JavaScript项目开发。静态加载特性使得浏览器可以提前解析模块依赖，进行预加载和优化，提高性能。在构建工具（如Webpack、Rollup）的支持下，ES6 Modules在前端开发中得到广泛应用。