追寻模块化的足迹：从CommonJS到ES Module 的演变史

2024-01-12 12:59:34

模块化的概念与重要性

模块化是软件开发中的一个重要理念，它允许开发者将应用程序划分为独立的、可重用的部分。这不仅有助于提高代码质量，还能使团队协作更为顺畅。在JavaScript的世界里，模块化技术经历了多个阶段的发展。

CommonJS: Node.js时代的模块系统

CommonJS 是一种服务器端JavaScript模块规范，广泛用于Node.js中。其核心概念是每个文件都是一个模块，并通过 module.exports 导出功能或变量，而其他模块则可以通过 require() 函数导入这些功能。

示例代码

// math.js 模块定义
function add(a, b) {
    return a + b;
}
module.exports = { add };

// 使用 math.js 的 module
const math = require('./math');
console.log(math.add(1, 2)); // 输出3

ES Module: 浏览器与Node.js的统一

随着JavaScript的发展，ES6引入了原生模块系统（ESM）。这种基于静态声明的模块系统，在浏览器和Node.js中均可使用。ES Modules通过 import 和 export 关键字实现模块的导入与导出。

示例代码

// math.mjs 模块定义
function add(a, b) {
    return a + b;
}
export { add };

// 使用 math.mjs 的 module
import { add } from './math.mjs';
console.log(add(1, 2)); // 输出3

CommonJS与ES Modules的差异

执行时间：CommonJS模块在运行时动态加载，而ES Modules则是静态分析依赖关系，在编译阶段就确定。
文件扩展名：为了确保浏览器能够正确识别并处理ESM，文件通常会使用 .mjs 扩展名。
循环引用：由于执行时机的不同，两者对循环引用的支持也存在差异。CommonJS允许通过缓存机制支持这种场景，而ES Modules则需要开发者额外设计以避免此类问题。