ESM 模块（ECMAScript Module）详解

Isenberg
144 阅读6分钟

ECMAScript 模块（ECMAScript Modules，简称 ESM）是 JavaScript 语言官方标准化的模块系统，自 ECMAScript 2015（ES6）起正式引入，并在后续版本中不断完善。作为现代 Web 开发的基石，ESM 不仅解决了长期以来 JavaScript 缺乏原生模块化支持的问题，还为构建高性能、可维护的前端和后端应用提供了统一标准。

 

一、JavaScript 模块化的历史演进

在 ESM 出现之前，JavaScript 社区长期缺乏官方模块系统，开发者依赖各种“约定”或工具实现模块化：

  • 全局变量模式：将功能挂载到全局对象（如 window.MyLib），极易造成命名冲突。
  • IIFE（立即调用函数表达式） ：通过闭包实现私有作用域，但无法跨文件共享。
  • CommonJS：Node.js 采用的同步 require/module.exports 模式，适合服务端，但无法直接用于浏览器。
  • AMD（Asynchronous Module Definition） ：如 RequireJS，支持异步加载，但语法复杂。
  • UMD（Universal Module Definition） ：兼容 CommonJS、AMD 和全局变量的混合方案。

这些方案互不兼容，导致生态碎片化。开发者不得不依赖打包工具（如 Webpack、Browserify）将模块转换为目标环境可执行的代码。这种“编译时模块系统”虽解决了问题，但也带来了构建复杂度高、启动慢等弊端。

ESM 的出现，标志着 JavaScript 终于拥有了语言层面、运行时支持、跨平台统一的模块标准。

 

二、ESM 的核心语法与特性

ESM 采用声明式语法，强调静态结构和显式依赖。

1. 导出（Export）

命名导出（Named Exports）

// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator { /* ... */ }


// 或批量导出
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
export { subtract, multiply };

默认导出（Default Export）

// App.js
export default class App {
  // 一个模块只能有一个 default export
}

✅ 关键区别：命名导出可有多个，导入时需用相同名称（或重命名），默认导出无名称，导入时可任意命名

2. 导入（Import）

导入命名导出

import { PI, add } from './math.js';
import { subtract as minus } from './math.js'; // 重命名
import * as MathUtils from './math.js'; // 导入所有为命名空间对象

导入默认导出

import App from './App.js'; // 无需花括号

混合导入

import React, { useState, useEffect } from 'react';

副作用导入（仅执行模块，不导入绑定）

import './polyfills.js'; // 初始化全局补丁

3. 动态导入（Dynamic Import）

ES2020 引入 import() 表达式，支持运行时按需加载：

// 条件加载
if (user.isAdmin) {
  const adminModule = await import('./admin.js');
  adminModule.init();
}


// 路由懒加载（React/Vue 中常见）
const HomePage = lazy(() => import('./HomePage'));

⚠️ 注意：import() 返回 Promise，而静态 import 必须位于顶层作用域。

 

三、ESM 的核心特性与设计哲学

1. 静态分析（Static Analyzability）

ESM 的 import/export 语句必须是顶层的、字面量的，不能出现在条件语句或函数中：

// ❌ 非法
if (condition) {
  import utils from './utils.js'; // SyntaxError
}

这一限制使得引擎能在代码执行前解析整个依赖图，带来三大优势：

  • Tree Shaking：打包工具可精准移除未使用的导出（如 Rollup、Webpack）
  • 循环依赖检测：在编译阶段发现潜在问题
  • 性能优化：浏览器可并行预加载依赖

2. 实时绑定（Live Bindings）

ESM 导出的是绑定（binding） ，而非值的拷贝：

// counter.js
export let count = 0;
export function increment() { count++; }


// main.js
import { count, increment } from './counter.js';
console.log(count); // 0
increment();
console.log(count); // 1 —— 自动同步！

这与 CommonJS 的“值拷贝”形成鲜明对比，避免了状态不一致问题。

3. 单例语义（Singleton Semantics）

每个模块在单个运行时环境中只执行一次，后续导入返回同一实例：

// config.js
console.log('Config loaded!');
export const settings = { theme: 'dark' };


// a.js 和 b.js 都 import config.js
// "Config loaded!" 仅打印一次

这保证了模块状态的全局唯一性，适用于配置、缓存等场景。

 

四、ESM 在浏览器中的运行机制

1. 启用方式

在 HTML 中通过 <script type="module"> 启用：

<script type="module" src="./main.js"></script>
<!-- 或内联 -->
<script type="module">
  import { greet } from './utils.js';
  greet();
</script>

🔒 安全限制：

模块脚本默认启用 CORS，跨域需服务器设置 Access-Control-Allow-Origin

无法在 file:// 协议下运行（需本地服务器）

2. 加载与执行流程

当浏览器遇到模块脚本时：

  1. 解析依赖：递归解析所有 import 语句，构建依赖图
  2. 并行下载：通过 HTTP/2 多路复用并行请求所有模块
  3. 拓扑排序：按依赖顺序确定执行顺序（无依赖的先执行）
  4. 执行模块：每个模块仅执行一次，导出绑定供其他模块使用

💡 性能优势： 无需打包即可按需加载，浏览器缓存粒度更细（单个模块级别）

3. MIME 类型要求

服务器必须为 .js 文件返回正确的 MIME 类型：

Content-Type: application/javascript

否则浏览器会拒绝执行。

 

五、ESM 在 Node.js 中的支持

Node.js 自 v12 起原生支持 ESM，但需注意与 CommonJS 的互操作性。

1. 启用方式

  • 文件扩展名 .mjs
  • 或在 package.json 中设置 "type": "module"
  • 或使用 --input-type=module 标志运行字符串代码

2. 与 CommonJS 互操作

ESM 导入 CommonJS

// CommonJS 模块导出的是 module.exports 对象
import pkg from 'lodash'; // 默认导入整个对象
import { debounce } from 'lodash'; // 命名导入（需支持）

⚠️ 限制：CommonJS 模块的动态属性无法被静态分析，命名导入可能失败。

CommonJS 导入 ESM（Node.js v14.13+）

// 使用 async/await
const myModule = await import('./my-esm-module.js');

3. 路径解析差异

ESM 必须使用完整路径（包括扩展名）：

// ✅ 正确
import { foo } from './foo.js';
import { bar } from './bar/index.js';


// ❌ 错误（Node.js 不自动补全 .js）
import { foo } from './foo';

🛠 解决方案：使用 --experimental-specifier-resolution=node 或构建工具处理。

 

六、ESM vs CommonJS：关键差异对比

特性ESMCommonJS
加载时机异步（浏览器并行加载）同步（Node.js 逐行执行）
导出本质实时绑定（Live Binding）值拷贝（Copy of Value）
this 指向undefinedmodule.exports
循环依赖支持（绑定未初始化时为 undefined）支持（返回部分初始化对象）
Tree Shaking原生支持需工具模拟
顶层 await支持（ES2022）不支持（需 IIFE 包裹）

 

七、ESM 的实际应用场景

1. 前端开发：Vite、Snowpack 等现代构建工具

Vite 利用浏览器原生 ESM，实现无打包开发：

  • 开发阶段直接 serve 源码
  • 依赖预构建为 ESM
  • HMR 基于模块图精准更新

2. 微前端架构

通过动态 import() 实现子应用按需加载：

const loadMicroApp = async (name) => {
  const app = await import(`https://cdn.com/${name}/entry.js`);
  app.bootstrap();
};

3. CDN 直接分发

现代 CDN（如 Skypack、esm.sh）将 npm 包自动转换为 ESM：

import React from 'https://esm.sh/react';
import { createRoot } from 'https://esm.sh/react-dom/client';

4. Web Workers 与 Service Workers

Workers 支持 ESM 模块：

// 主线程
const worker = new Worker('./worker.js', { type: 'module' });


// worker.js
import { heavyTask } from './utils.js';

 

八、未来展望

ESM 生态仍在快速发展：

Import Maps：允许在 HTML 中定义模块标识符映射，解决裸模块（bare specifiers）问题

<script type="importmap">
{
  "imports": {
    "lodash": "/node_modules/lodash-es/lodash.js"
  }
}
</script>
  • Top-Level Await：已在 ES2022 标准化，简化异步模块初始化
  • JSON Modules：提案阶段，允许直接 import data from './config.json'

 

结语

ECMAScript 模块不仅是 JavaScript 语言的一次重要进化，更是现代 Web 开发生态的基础设施。它通过静态分析、实时绑定、单例语义等设计，为构建高性能、可维护的应用提供了坚实基础。随着浏览器和 Node.js 的全面支持，以及 Vite 等工具的普及，ESM 正逐步取代历史遗留的模块方案，成为事实上的标准。

对于开发者而言，深入理解 ESM 的工作机制，不仅能写出更高效的代码，更能充分利用现代工具链的优势，在工程化实践中游刃有余。正如 TC39 委员会所倡导的：“ESM is the future of JavaScript modularity.” —— 拥抱 ESM，就是拥抱 JavaScript 的未来。

avatar
文章
阅读
粉丝