模块系统：CommonJS vs. ES Modules - 全面指南

在不断发展的 JavaScript 开发世界中，模块化是构建可扩展和可维护应用程序的基石。历史上，两种模块系统一直占据主导地位：CommonJS 和 ES Modules (ESM)。了解它们之间的区别、优点和缺点对于任何 JavaScript 开发人员来说都至关重要，无论是在使用 React、Vue 或 Angular 等框架的前端工作，还是在使用 Node.js 的后端工作。

什么是模块系统？

模块系统提供了一种将代码组织成称为模块的可重用单元的方法。每个模块封装了一个特定的功能，并且仅公开其他模块需要使用的部分。这种方法促进了代码重用、降低了复杂性并提高了可维护性。可以将模块视为构建块；每个块都有一个特定的用途，您可以将它们组合起来创建更大、更复杂的结构。

使用模块系统的优点：

• 代码重用性：模块可以在应用程序的不同部分甚至不同的项目中轻松地重复使用。
• 命名空间管理：模块创建自己的作用域，防止命名冲突和意外修改全局变量。
• 依赖项管理：模块系统使管理应用程序不同部分之间的依赖项更容易。
• 提高可维护性：模块化代码更容易理解、测试和维护。
• 组织：它们帮助将大型项目组织成逻辑的、可管理的单元。

CommonJS：Node.js 标准

CommonJS 成为 Node.js 的标准模块系统，Node.js 是用于服务器端开发的热门 JavaScript 运行时环境。它旨在解决在创建 Node.js 时 JavaScript 中缺少内置模块系统的问题。Node.js 采用了 CommonJS 作为其组织代码的方式。这一选择对如何在服务器端构建 JavaScript 应用程序产生了深远的影响。

CommonJS 的主要特性：

• require()：用于导入模块。
• module.exports：用于从模块导出值。
• 同步加载：模块是同步加载的，这意味着代码在继续执行之前等待模块加载完成。

CommonJS 语法：

以下是 CommonJS 的使用示例：

模块 (math.js)：

// math.js
function add(a, b) {
 return a + b;
}

function subtract(a, b) {
 return a - b;
}

module.exports = {
 add: add,
 subtract: subtract
};

用法 (app.js)：

// app.js
const math = require('./math');

console.log(math.add(5, 3)); // 输出：8
console.log(math.subtract(10, 4)); // 输出：6

CommonJS 的优点：

• 简单性：易于理解和使用。
• 成熟的生态系统：在 Node.js 社区中得到广泛采用。
• 动态加载：支持使用 require() 动态加载模块。这在某些情况下很有用，例如根据用户输入或配置加载模块。

CommonJS 的缺点：

• 同步加载：在浏览器环境中可能会出现问题，同步加载会阻塞主线程并导致用户体验不佳。
• 非浏览器原生：需要在浏览器中使用捆绑工具，如 Webpack、Browserify 或 Parcel。

ES Modules (ESM)：标准化的 JavaScript 模块系统

ES Modules (ESM) 是 JavaScript 的官方标准化模块系统，随 ECMAScript 2015 (ES6) 一起引入。它们旨在提供一种一致高效的方式来组织 Node.js 和浏览器中的代码。ESM 为 JavaScript 语言本身带来了原生模块支持，从而消除了对外部库或构建工具来处理模块化的需求。

ES Modules 的主要特性：

• import：用于导入模块。
• export：用于从模块导出值。
• 异步加载：模块在浏览器中异步加载，提高了性能和用户体验。Node.js 也支持 ES Modules 的异步加载。
• 静态分析：ES Modules 是可静态分析的，这意味着可以在编译时确定依赖项。这使得可以使用树摇（删除未使用的代码）等功能并提高性能。

ES Modules 语法：

以下是 ES Modules 的使用示例：

模块 (math.js)：

// math.js
export function add(a, b) {
 return a + b;
}

export function subtract(a, b) {
 return a - b;
}

// 或者，另一种方法：
// function add(a, b) {
//  return a + b;
// }
// function subtract(a, b) {
//  return a - b;
// }
// export { add, subtract };

用法 (app.js)：

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // 输出：8
console.log(subtract(10, 4)); // 输出：6

命名导出 vs. 默认导出：

ES Modules 支持命名导出和默认导出。命名导出允许您从模块中导出多个具有特定名称的值。默认导出允许您将单个值作为模块的默认导出导出。

命名导出示例 (utils.js)：

// utils.js
export function formatCurrency(amount, currencyCode) {
 // 根据货币代码格式化金额
 // 示例：formatCurrency(1234.56, 'USD') 可能会返回 '$1,234.56'
 // 实现取决于所需的格式和可用的库
 return new Intl.NumberFormat('en-US', { style: 'currency', currency: currencyCode }).format(amount);
}

export function formatDate(date, locale) {
 // 根据区域设置格式化日期
 // 示例：formatDate(new Date(), 'fr-CA') 可能会返回 '2024-01-01'
 return new Intl.DateTimeFormat(locale).format(date);
}

// app.js
import { formatCurrency, formatDate } from './utils.js';

const price = formatCurrency(19.99, 'EUR'); // 欧洲
const today = formatDate(new Date(), 'ja-JP'); // 日本

console.log(price); // 输出：€19.99
console.log(today); // 输出：（根据日期而异）

默认导出示例 (api.js)：

// api.js
const api = {
 fetchData: async (url) => {
 const response = await fetch(url);
 return response.json();
 }
};

export default api;

// app.js
import api from './api.js';

api.fetchData('https://example.com/data')
 .then(data => console.log(data));

ES Modules 的优点：

• 标准化：JavaScript 原生，确保在不同环境中的行为一致。
• 异步加载：通过并行加载模块来提高浏览器中的性能。
• 静态分析：启用树摇和其他优化。
• 更适合浏览器：为浏览器设计，带来更好的性能和兼容性。

ES Modules 的缺点：

• 复杂性：与 CommonJS 相比，设置和配置起来可能更复杂，尤其是在较旧的环境中。
• 需要工具：通常需要 Babel 或 TypeScript 等工具进行转译，尤其是在针对较旧的浏览器或 Node.js 版本时。
• Node.js 兼容性问题（历史）：虽然 Node.js 现在完全支持 ES Modules，但在从 CommonJS 迁移时，最初存在兼容性问题和复杂性。

CommonJS vs. ES Modules：详细比较

以下表格总结了 CommonJS 和 ES Modules 之间的主要区别：

特性	CommonJS	ES Modules
导入语法	require()	import
导出语法	module.exports	export
加载	同步	异步（在浏览器中），同步/异步（在 Node.js 中）
静态分析	否	是
原生浏览器支持	否	是
主要用例	Node.js（历史上）	浏览器和 Node.js（现代）

实用示例和用例

示例 1：创建可重用的实用程序模块（国际化）

假设您正在构建一个需要支持多种语言的 Web 应用程序。您可以创建一个可重用的实用程序模块来处理国际化 (i18n)。

ES Modules (i18n.js)：

// i18n.js
const translations = {
 'en': {
 'greeting': 'Hello, world!'
 },
 'fr': {
 'greeting': 'Bonjour, le monde !'
 },
 'es': {
 'greeting': '¡Hola, mundo!'
 }
};

export function getTranslation(key, language) {
 return translations[language][key] || key;
}

// app.js
import { getTranslation } from './i18n.js';

const language = 'fr'; // 示例：用户选择了法语
const greeting = getTranslation('greeting', language);
console.log(greeting); // 输出：Bonjour, le monde !

示例 2：构建模块化 API 客户端 (REST API)

与 REST API 交互时，您可以创建一个模块化的 API 客户端来封装 API 逻辑。

ES Modules (apiClient.js)：

// apiClient.js
const API_BASE_URL = 'https://api.example.com';

async function get(endpoint) {
 const response = await fetch(`${API_BASE_URL}${endpoint}`);
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 return response.json();
}

async function post(endpoint, data) {
 const response = await fetch(`${API_BASE_URL}${endpoint}`, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify(data)
 });
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 return response.json();
}

export { get, post };

// app.js
import { get, post } from './apiClient.js';

get('/users')
 .then(users => console.log(users))
 .catch(error => console.error('Error fetching users:', error));

post('/users', { name: 'John Doe', email: 'john.doe@example.com' })
 .then(newUser => console.log('New user created:', newUser))
 .catch(error => console.error('Error creating user:', error));

从 CommonJS 迁移到 ES Modules

从 CommonJS 迁移到 ES Modules 可能是一个复杂的过程，尤其是在大型代码库中。以下是需要考虑的一些策略：

• 从小处着手：首先将较小、不太关键的模块转换为 ES Modules。
• 使用转译器：使用 Babel 或 TypeScript 等工具将代码转译为 ES Modules。
• 更新依赖项：确保您的依赖项与 ES Modules 兼容。许多库现在都提供 CommonJS 和 ES Module 版本。
• 彻底测试：在每次转换后彻底测试您的代码，以确保一切按预期工作。
• 考虑混合方法：Node.js 支持一种混合方法，您可以在同一项目中同时使用 CommonJS 和 ES Modules。这对于逐步迁移代码库很有用。

Node.js 和 ES Modules：

Node.js 已经发展到完全支持 ES Modules。您可以在 Node.js 中使用 ES Modules，方法是：

• 使用 .mjs 扩展名：具有 .mjs 扩展名的文件被视为 ES Modules。
• 将 "type": "module" 添加到 package.json：这告诉 Node.js 将项目中的所有 .js 文件视为 ES Modules。

选择正确的模块系统

在 CommonJS 和 ES Modules 之间进行选择取决于您的特定需求以及您正在开发的环境：

• 新项目：对于新项目，特别是那些同时针对浏览器和 Node.js 的项目，ES Modules 通常是首选，因为它们具有标准化性质、异步加载功能和对静态分析的支持。
• 仅限浏览器的项目：对于仅限浏览器的项目，ES Modules 是明显的赢家，因为它们具有原生支持和性能优势。
• 现有 Node.js 项目：将现有的 Node.js 项目从 CommonJS 迁移到 ES Modules 可能是一项重要的工作，但为了长期可维护性和与现代 JavaScript 标准的兼容性，值得考虑。您可以探索一种混合方法。
• 旧项目：对于与 CommonJS 紧密耦合并且迁移资源有限的旧项目，坚持使用 CommonJS 可能是最实用的选择。

结论

了解 CommonJS 和 ES Modules 之间的区别对于任何 JavaScript 开发人员来说都至关重要。虽然 CommonJS historically 一直是 Node.js 的标准，但由于其标准化性质、性能优势和对静态分析的支持，ES Modules 正迅速成为浏览器和 Node.js 的首选。通过仔细考虑项目的需求以及您正在开发的环境，您可以选择最适合您要求的模块系统，并构建可扩展、可维护且高效的 JavaScript 应用程序。

随着 JavaScript 生态系统的不断发展，了解最新的模块系统趋势和最佳实践对于取得成功至关重要。继续尝试 CommonJS 和 ES Modules，并探索各种可用的工具和技术，以帮助您构建模块化和可维护的 JavaScript 代码。