JavaScript 模块系统的变迁：从 CommonJS 到 ES6 模块（ESM）

JavaScript 模块系统的发展是其语言演化的重要一部分。随着前端与后端技术的演进，模块化编程成为了构建复杂应用程序的基础

本文我们将回顾两大主流 JavaScript 模块系统的变迁：CommonJS（主要用于服务器端）和 ES6 模块（ESM）（浏览器端和服务器端的现代标准）。我们将探讨它们的设计理念、差异以及过渡的背景

一、CommonJS 模块系统

1. 背景与诞生

CommonJS 是一种服务器端的 JavaScript 模块系统，最早的目的是为了解决在 Node.js 环境中管理 JavaScript 代码的复杂性

由于 JavaScript 最初设计为浏览器脚本语言，因此它缺乏模块化的机制，导致代码重复和管理混乱

为了解决这些问题，CommonJS 提出了模块化规范，确保每个文件都有自己的作用域，并且可以安全地导出和导入其他文件的功能

2. 设计与特点

CommonJS 规范基于同步加载，并采用了以下几个关键特性：

• 模块导出：每个文件（模块）都有自己的作用域，模块的内容通过 module.exports 进行导出。例如：

// moduleA.js
module.exports = {
  greet: function () {
    console.log("Hello from module A");
  },
};

• 模块导入：其他模块可以通过 require() 函数加载并使用导出的内容。例如：

// app.js
const moduleA = require("./moduleA");
moduleA.greet();

• 同步加载：require() 是同步执行的，意味着模块会在加载时被立即执行，适用于服务器端应用，因为服务器端环境下通常无需考虑网络延迟

3. 使用场景

CommonJS 最著名的应用场景是 Node.js。Node.js 通过 CommonJS 模块系统，提供了一个非常灵活和强大的服务器端开发环境。它使得开发者能够按需引入模块，并通过 npm（Node 包管理器）共享和管理模块

由于 CommonJS 的同步特性，它特别适合于后端服务，尤其是文件系统和网络请求等操作

二、ES6 模块系统（ESM）

1. 背景与诞生

随着 JavaScript 在前端的广泛应用，开发者对模块化的需求逐渐增加。尽管 CommonJS 在服务器端取得了成功，浏览器端却需要不同的解决方案，因为浏览器无法直接支持 CommonJS 的同步 require() 方法

ES6（ECMAScript 2015）引入了 原生模块系统（ESM），它不仅解决了前端开发的模块化问题，还规范化了 JavaScript 的模块化方法。ES6 模块系统基于异步加载，并通过浏览器的原生支持，使得 JavaScript 的模块化更加标准化和高效

2. 设计与特点

ES6 模块（ESM）具有以下特点：

• 静态分析：ES6 模块是静态的，这意味着模块的导入和导出可以在编译时被分析。这种特性使得 JavaScript 引擎能够更有效地进行优化，提升执行性能

// moduleB.js
export function greet() {
  console.log("Hello from module B");
}

• 模块导入：导入语法采用 import 关键字，支持按需导入具体的函数、对象或变量：

// app.js
import { greet } from "./moduleB";
greet();

ES6 模块支持默认导出：

// moduleC.js
export default function greet() {
  console.log("Hello from module C");
}

默认导入使用：

import greet from "./moduleC";
greet();

• 异步加载：与 CommonJS 的同步加载不同，ESM 支持异步加载模块。这使得浏览器能够在需要时按需加载模块，从而提高了应用的性能和响应速度
• 严格模式：ES6 模块默认启用严格模式，这意味着模块内的代码不允许出现一些不规范的行为，如使用未声明的变量

3. 使用场景

ES6 模块不仅适用于浏览器端，还可以在 Node.js 中使用。现代的前端框架（如 React、Vue 和 Angular）都依赖于 ESM 模块来组织和加载代码

随着现代浏览器的普遍支持，ES6 模块在前端开发中成为了标准，能够带来更好的性能和更清晰的代码结构

Node.js 从版本 12 开始支持 ESM，逐渐实现与 CommonJS 的兼容，开发者可以选择使用 ES6 模块或继续使用 CommonJS

三、CommonJS 与 ES6 模块的对比

特性	CommonJS	ES6 模块 (ESM)
导入语法	const module = require('module');	import { module } from 'module';
导出语法	module.exports = ...;	export { ... }; 或 export default ...;
同步/异步	同步加载（适合服务器端）	异步加载（适合浏览器端）
作用域	每个模块有自己的作用域	模块内的变量和函数都在其作用域中
支持的环境	Node.js	现代浏览器和 Node.js（支持较新版本）
性能优化	无法在编译时优化	由于静态分析，可以进行优化
严格模式	非强制	默认为严格模式

四、过渡与兼容性

随着 JavaScript 语言的不断发展，开发者逐渐转向使用 ES6 模块，因为它不仅规范化了模块系统，还带来了更好的性能和开发体验。然而，过渡并非一蹴而就，尤其是在 Node.js 环境中，CommonJS 依然占据着主导地位。因此，Node.js 提供了对 CommonJS 和 ES6 模块的双重支持，允许开发者根据需要选择使用两者

Node.js 中的兼容性：在 Node.js 中，开发者可以通过 .mjs 文件扩展名明确使用 ES6 模块，或者通过 type: "module" 在 package.json 中启用 ESM 支持。如果项目依赖于 CommonJS 模块，可以通过 import 导入 CommonJS 模块，反之亦然

五、结语

从 CommonJS 到 ES6 模块，JavaScript 的模块化系统经历了显著的变革。CommonJS 为服务器端提供了强大的模块化支持，而 ES6 模块则为现代 Web 开发带来了更加规范、高效的解决方案

随着浏览器和 Node.js 对 ESM 的逐步支持，未来 JavaScript 开发将更加依赖于这种标准化的模块化方法

无论是在前端应用还是服务器端开发中，理解并熟练使用这些模块化工具将有助于开发更清晰、更高效的代码，同时适应快速变化的 JavaScript 生态系统

---

JS 模块化

1、IIFE 模式：JQuery 2、CommonJS 约定：module.exports 和 require 关键字 3、AMD 4、ES6 模块化：import 和 export 关键字