深入浅出 ES Module

概述

在 JavaScript 模块化发展历程中，为解决全局变量污染，代码依赖管理等问题，先后出现了 CommonJS（CJS）、AMD、CMD、UMD、ES6 Module（ESM）五大主流方案。不同方案因设计目标、运行环境（浏览器 / Node）的差异，形成了各自的语法特性与生态定位。

其中ES6 Module是 ES6 官方定义的标准化模块化方案，旨在统一浏览器与服务器端的模块化语法，解决传统模块化方案（如 CommonJS、AMD）的碎片化问题。

核心特性

• 静态化设计：模块的导入（import）与导出（export）声明必须在模块顶层，且导入导出的模块标识符（如文件路径）需是静态字符串，不能动态拼接（如 ·import(‘./’ + path)· 是不允许的）。这一特性让 JavaScript 引擎在编译阶段就能分析模块依赖关系，实现 Tree-Shaking（摇树优化，剔除未使用的代码）。
• 独立模块作用域：每个 ESM 模块都是一个独立的作用域，模块内声明的变量、函数、类默认不对外暴露，需通过export显式导出后，其他模块才能通过import导入使用，这样可以避免全局变量污染。
• 值引用特性：ESM 导入的模块成员是 “值的引用”（而非 CommonJS 的值的拷贝），若导出模块修改了导出的变量（如导出一个 let 声明的变量并后续修改），导入模块会同步感知到变化（需注意：基础类型值若用const声明，因不可修改，不会有此特性）。
• 异步加载：在浏览器环境中，ESM 默认通过 <script type="module"> 标签异步加载（相当于给 <script> 加了defer属性），不会阻塞 HTML 解析，且模块加载完成后会按依赖顺序执行。

基础语法

导出（export）

• 命名导出：导出多个独立的模块成员，导入时需用相同的名称接收（可通过as重命名）；
• 默认导出：每个模块最多只能有一个默认导出，导入时可自定义接收名称（无需加大括号）。

// 模块A：moduleA.js
// 1. 命名导出（方式1：声明时导出）
export const name = 'ES6 Module';
export function add(a, b) {return a + b;
}// 2. 命名导出（方式2：集中导出）
const age = 6;
const multiply = (a, b) => a * b;
export { age, multiply as multiplyFn }; // as重命名导出// 3. 默认导出（方式1：直接导出）
export default class ModuleClass {constructor() {this.version = '1.0.0';}
}// 4. 默认导出（方式2：先声明后导出）
const defaultObj = { type: 'module' };
export default defaultObj;

导入语法（import）

• 导入命名成员：需用大括号包裹导入的成员名称，与导出名称一致（可通过as重命名）；
• 导入默认成员：无需大括号，可自定义接收名称；
• 整体导入：用 * as 模块名 导入整个模块的所有导出成员，访问时需通过 模块名.成员名 的方式；
• 导入执行：若导入模块仅需执行其代码（如执行初始化逻辑，无需使用其导出成员），可直接使用 import './moduleA.js'。’

// 模块B：moduleB.js
// 1. 导入命名成员（原样接收）
import { name, add } from './moduleA.js';
console.log(name); // 输出：ES6 Module
console.log(add(2, 3)); // 输出：5// 2. 导入命名成员（重命名接收）
import { age, multiplyFn as multiply } from './moduleA.js';
console.log(age); // 输出：6
console.log(multiply(2, 3)); // 输出：6// 3. 导入默认成员（自定义名称）
import ModuleClass from './moduleA.js'; // 无需大括号
const instance = new ModuleClass();
console.log(instance.version); // 输出：1.0.0// 4. 混合导入（命名成员+默认成员）
import ModuleClass, { name as moduleName } from './moduleA.js';
console.log(moduleName); // 输出：ES6 Module// 5. 整体导入
import * as ModuleA from './moduleA.js';
console.log(ModuleA.name); // 输出：ES6 Module
console.log(ModuleA.add(2, 3)); // 输出：5
console.log(new ModuleA.default().version); // 输出：1.0.0（默认成员需通过.default访问）// 6. 导入执行
import './moduleA.js'; // 仅执行moduleA.js的代码，不使用其导出成员

模块方案对比

CJS（CommonJS）

Node.js 原生支持的模块化方案，面向服务端，采用运行时动态加载，通过require导入、module.exports导出；

• 设计目标
  ◦ 解决 Node.js 服务端模块依赖管理问题，避免全局变量污染；
  ◦ 基于文件即模块理念，每个文件是独立模块，通过module.exports暴露成员，require加载模块。
• 特点
  • 运行时加载：运行时动态加载，代码执行到require语句时，才会读取目标文件、执行模块代码、返回module.exports对象；
  • 值传递：基础类型是值的拷贝， 对象类型则是引用传递，require时会将module.exports的属性值拷贝，后续导出模块修改基础类型值，导入模块不会同步变化；
  • 缓存模块：模块首次加载后，会缓存module.exports对象，后续require同一模块时，直接返回缓存结果，避免重复执行模块代码；
  • 运行环境：主要用于 Node.js，浏览器端需通过 Browserify、Webpack 等工具转换为全局变量或 ESM。

AMD（Asynchronous Module Definition）

面向浏览器端的异步模块化方案，解决浏览器加载模块时 “阻塞页面渲染” 问题，代表实现为 RequireJS；

• 设计目标
  • 解决浏览器端同步加载模块阻塞页面渲染问题，通过异步方式加载模块，加载完成后执行回调函数；
  • 支持依赖前置（提前声明所有依赖），确保模块执行时依赖已加载完成。
• 特点
  • 异步加载： 通过 <script> 标签动态创建请求加载模块，加载完成后触发回调函数，不阻塞 HTML 解析与页面渲染；
  • 依赖前置：模块定义时需提前声明所有依赖，如define([‘jquery’], …)，RequireJS 会先加载依赖模块，所有依赖加载完成后，再执行当前模块的工厂函数；
  • 运行环境：仅支持浏览器端，Node 端需通过amd-loader等工具转换；
  • 支持多种路径写法：支持相对路径（如./moduleA）、绝对路径（如/js/moduleA）、模块别名（如jquery）。

UMD（Universal Module Definition）

通用模块定义，兼容 ESM、CJS、AMD 三种方案，可在浏览器与 Node 端通用，主要用于第三方库发布。

• 设计目标
  ◦ 解决第三方库需适配多模块方案的问题，使用一套代码就能够同时兼容 ESM、CJS、AMD 三种方案，可在浏览器与 Node 端通用，避免为不同模块方案单独发布代码，降低维护成本。
• 特点
  • 多环境适配：可在Node和浏览器端使用，检测方式为 typeof define === 'function' && define.amd 检测 AMD 环境，typeof module === 'object' && module.exports 检测 CJS 环境，否则降级为全局变量；

ESM（ES6 Module）

ES6 官方标准化方案，兼顾浏览器与 Node 端，采用编译时静态加载，支持 Tree-Shaking，通过 import/export 语法实现。

• 设计目标
  • ES6 官方统一浏览器与 Node 端的模块化方案，解决传统方案碎片化问题；
  • 基于编译时静态加载设计，支持 Tree-Shaking。
• 特点
  • 编译时静态加载：JavaScript 引擎在编译阶段分析模块依赖，构建依赖树，不执行模块代码，因为是静态编译的时候做了分析，所以很自然的支持 Tree Shaking。
  • 值的引用传递：导入的成员是对导出模块成员的引用，若导出模块修改非const变量，导入模块会同步变化。
  • 默认启用严格模式：禁止未声明的变量使用。