Skip to content
全栈开发

JavaScript 模块

JavaScript 最初设计时并未包含模块化的概念，这在构建小型脚本时问题不大，但随着 Web 应用变得日益复杂，代码量的激增使得全局变量污染、命名冲突以及依赖关系管理变得异常困难。为了解决这些问题，开发者社区和标准组织不断探索，最终形成了现代 JavaScript 的模块系统。本文将简要回顾 JavaScript 模块化的演变过程，并详细介绍当前官方推荐的 ES Modules (ESM) 解决方案。

模块化的早期探索

在官方标准出现之前，开发者们创造了一些模式来模拟模块化。一种常见的早期方法是使用立即调用函数表达式 (IIFE)，通过函数作用域来封装代码，避免污染全局命名空间。开发者会将模块的代码包裹在一个 IIFE 中，并通过闭包暴露需要公开的接口。然而，这种方式并没有解决依赖管理的问题，模块间的依赖关系需要手动维护，加载顺序也需要开发者自行保证。

为了系统性地解决模块化问题，社区涌现了多种模块化规范。其中影响最广泛的是 CommonJS 和 Asynchronous Module Definition (AMD)。CommonJS 主要应用于服务器端环境，特别是 Node.js。它采用同步加载模块的方式，语法简洁明了，使用 require 导入模块，使用 module.exports 或 exports 导出接口。这种同步加载机制非常适合服务器环境，因为模块文件通常存储在本地磁盘，读取速度快。

与 CommonJS 不同，AMD 规范主要面向浏览器环境。考虑到浏览器加载脚本的网络延迟，AMD 采用了异步加载模块的方式，并允许指定回调函数在依赖加载完成后执行。RequireJS 是 AMD 规范最著名的实现库。其语法相对 CommonJS 更为复杂，使用 define 函数定义模块，并用 require 函数异步加载依赖。虽然解决了浏览器端的模块加载问题，但其异步特性和相对冗余的语法在一定程度上增加了开发复杂性。

ES Modules：官方的解决方案

随着 JavaScript 语言自身的发展，ECMAScript 组织在 2015 年发布的 ES6 (ECMAScript 2015) 标准中，正式引入了官方的模块化规范，通常称为 ES Modules 或 ESM。ES Modules 旨在提供一种统一的、简洁的、静态的模块化方案，既适用于浏览器环境，也适用于服务器端环境（如 Node.js）。它的设计目标是克服早期社区方案的局限性，并利用语言层面的支持提供更优的性能和开发体验。

ES Modules 的一个核心设计思想是静态化。这意味着模块的导入和导出关系在代码编译（或解析）阶段就能确定，而不是在运行时动态确定。这种静态结构为 JavaScript 引擎和构建工具（如 Webpack、Rollup）进行优化提供了可能，例如实现 Tree Shaking（摇树优化），从而有效减少最终打包代码的体积。

ES Modules 核心语法

ES Modules 引入了 export 和 import 两个关键字来处理模块的导出和导入。其语法设计简洁且易于理解。

模块可以通过 export 关键字导出变量、函数或类。导出分为两种主要方式：命名导出（Named Exports）和默认导出（Default Export）。命名导出允许一个模块导出多个绑定（变量、函数、类等），导入时需要使用确切的名称。例如：

utils.js
export const pi = 3.14159;
export function calculateCircumference(radius) {
  return 2 * pi * radius;
}


// main.js
import { pi, calculateCircumference } from './utils.js';
console.log(calculateCircumference(10)); // 输出约 62.8318

另一种导出方式是默认导出。每个模块只能有一个默认导出。默认导出在导入时可以指定任意名称。这通常用于导出一个模块的主要功能或类。

logger.js
export default function log(message) {
  console.log(`[LOG] ${message}`);
}


// main.js
import myLogger from './logger.js'; // 可以使用任意名称，如 import logService
myLogger('Application started.');

一个模块可以同时使用命名导出和默认导出。

相应的，import 关键字用于从其他模块导入绑定。导入命名导出时，需要使用花括号 {} 包裹具体的名称，且名称必须与导出的名称一致（可以使用 as 关键字重命名）。导入默认导出时，则直接指定一个名称。也可以同时导入默认导出和命名导出，或者使用 import * as name 的形式将模块所有命名导出导入为一个对象。

module.js
export const version = '1.0';
export default class App { /* ... */ }


// main.js
import App, { version as moduleVersion } from './module.js'; // 混合导入并重命名
import * as utils from './utils.js'; // 导入所有命名导出


console.log(`Version: ${moduleVersion}`);
const app = new App();
console.log(utils.pi);

需要注意的是，import 和 export 语句必须出现在模块的顶层作用域，不能在条件语句或函数内部使用。这是静态分析的基础。

ES Modules 的特点与优势

ES Modules 相比之前的社区方案具有显著的优势。首先是其静态结构带来的优化可能性。由于导入导出关系在编译时确定，工具可以精确分析代码依赖，实现 Tree Shaking，移除项目中未被实际使用的代码，这对于优化前端应用性能至关重要。

其次，浏览器对 ES Modules 提供了原生支持。通过在 <script> 标签上添加 type="module" 属性，浏览器就能识别并加载 ES Module 文件。这些模块脚本默认以 defer 的方式异步加载和执行，不会阻塞 HTML 文档的解析，有助于提升页面加载性能。

此外，每个 ES Module 都拥有独立的模块作用域。模块内部的顶级变量、函数或类不会自动添加到全局作用域，有效避免了全局变量污染和命名冲突问题，提高了代码的可靠性和可维护性。

ES Modules 对循环依赖的处理也更加健壮。虽然循环依赖仍然是需要谨慎处理的设计问题，但 ESM 的机制（导出绑定的实时引用而非值拷贝）可以在某些情况下更好地处理循环依赖场景，避免像 CommonJS 那样因加载顺序导致得到不完整的模块对象。

ES Modules 的应用

在现代浏览器环境中，使用 ES Modules 非常直接。只需在 HTML 文件中通过 <script type="module" src="path/to/module.js"></script> 的方式引入入口模块即可。浏览器会自动处理模块间的依赖加载。需要注意的是，通过 file:// 协议直接打开本地 HTML 文件加载模块可能会遇到 CORS 策略限制，通常建议通过本地 Web 服务器来运行和测试。

<!DOCTYPE html>
<html>
<head>
    <title>ES Module Example</title>
</head>
<body>
    <script type="module" src="main.js"></script>
</body>
</html>

Node.js 环境也提供了对 ES Modules 的稳定支持。开发者可以通过两种主要方式启用 ESM：将文件扩展名改为 .mjs，或者在项目的 package.json 文件中设置 "type": "module"。当设置为 "type": "module" 时，.js 文件默认被视为 ES Module。Node.js 还提供了与传统 CommonJS 模块的互操作机制，允许在 ES Module 中导入 CommonJS 模块，反之亦然（存在一些限制）。

// main.mjs 或在 package.json 中设置 "type": "module" 的 main.js
import fs from 'fs'; // 导入 Node.js 内建模块
import { someFunction } from './my-module.js'; // 导入自定义 ES Module


console.log('Reading file...');
fs.readFile('data.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});


someFunction();

下面使用 Mermaid 图示一个简单的模块依赖关系：

graph LR
    A[main.js] -- imports --> B(utils.js);
    A -- imports --> C(logger.js);
    B -- exports function --> A;
    C -- exports default function --> A;

这个图展示了 main.js 模块依赖于 utils.js 和 logger.js 模块，并从它们导入了所需的功能。

小结

JavaScript 模块化的发展是前端和 Node.js 生态走向成熟的关键一步。从最初的 IIFE 模式，到社区驱动的 CommonJS 和 AMD 规范，再到最终由 ECMAScript 标准化的 ES Modules，开发者们不断追求更优的代码组织、依赖管理和性能优化方案。ES Modules 作为官方标准，凭借其静态分析、Tree Shaking 优化、浏览器原生支持以及简洁统一的语法，已成为现代 JavaScript 开发的事实标准。掌握 ES Modules 的原理和用法，对于编写可维护、可扩展、高性能的 JavaScript 应用至关重要。它不仅解决了历史遗留问题，也为 JavaScript 生态的未来发展奠定了坚实的基础。