JavaScript 语言的演进从未停止，其中最重要的一环便是模块化。模块化让我们可以将复杂的应用拆分成可管理、可复用的小块代码。
在众多模块规范中，ECMAScript Modules (ESM) 凭借其官方地位和设计上的诸多优势，已经成为现代 JavaScript 项目的黄金标准。
🎯 什么是 ESM？
ESM，全称 ECMAScript Modules，是自 ES6（2015 年）规范以来，JavaScript 语言官方推出的、标准化的模块系统。
它主要通过两个简洁且强大的关键字来定义模块的导入和导出关系：
- **
export**：用于将模块内部的变量、函数、类等暴露给外部世界。
- **
import**：用于从其他模块中引入所需的内容。
核心语法回顾
ESM 提供了两种主要的导出方式：命名导出和默认导出。
| 语法类型 |
导出示例 |
导入示例 |
特点 |
| 命名导出 |
export const PI = 3.14; |
import { PI } from './math.js'; |
可以导出多个，导入时需使用相同的名称且加 {}。 |
| 默认导出 |
export default function App() {} |
import MyApp from './App.js'; |
每个模块只有一个，导入时可随意命名且不加 {}。 |
🆚 为什么选择 ESM？与 CommonJS 的区别
在 ESM 成为标准之前，Node.js 生态系统主要依赖 CommonJS (CJS) 模块系统（使用 require() 和 module.exports）。ESM 的设计哲学与 CJS 有着本质的区别，这些区别是其强大优势的来源。
1. 静态加载 vs. 动态加载
| 特性 |
ESM (import/export) |
CommonJS (require/module.exports) |
| 加载时机 |
静态加载（Static） |
动态加载（Dynamic） |
| 原理 |
编译时确定模块依赖关系。 |
运行时加载和解析依赖。 |
静态加载意味着 JavaScript 引擎和构建工具可以在代码执行之前（即编译阶段）就解析出模块之间的所有导入和导出关系。
2. Tree Shaking 成为可能 🌳
这是 ESM 相比 CJS 最核心的优势。
因为 ESM 是静态加载的，构建工具（如 Webpack、Vite、Rollup）可以：
- 在编译阶段，准确分析出哪些
export 的代码在其他模块中从未被 import 过。
- 将这些未使用的代码（Dead Code）在最终的打包文件中移除。
这个过程被称为 Tree Shaking（摇树优化）。
JavaScript 语言的演进从未停止，其中最重要的一环便是模块化。模块化让我们可以将复杂的应用拆分成可管理、可复用的小块代码。
在众多模块规范中，ECMAScript Modules (ESM) 凭借其官方地位和设计上的诸多优势，已经成为现代 JavaScript 项目的黄金标准。
🎯 什么是 ESM？
ESM，全称 ECMAScript Modules，是自 ES6（2015 年）规范以来，JavaScript 语言官方推出的、标准化的模块系统。
它主要通过两个简洁且强大的关键字来定义模块的导入和导出关系：
- **
export**：用于将模块内部的变量、函数、类等暴露给外部世界。
- **
import**：用于从其他模块中引入所需的内容。
核心语法回顾
ESM 提供了两种主要的导出方式：命名导出和默认导出。
| 语法类型 |
导出示例 |
导入示例 |
特点 |
| 命名导出 |
export const PI = 3.14; |
import { PI } from './math.js'; |
可以导出多个，导入时需使用相同的名称且加 {}。 |
| 默认导出 |
export default function App() {} |
import MyApp from './App.js'; |
每个模块只有一个，导入时可随意命名且不加 {}。 |
🆚 为什么选择 ESM？与 CommonJS 的区别
在 ESM 成为标准之前，Node.js 生态系统主要依赖 CommonJS (CJS) 模块系统（使用 require() 和 module.exports）。ESM 的设计哲学与 CJS 有着本质的区别，这些区别是其强大优势的来源。
1. 静态加载 vs. 动态加载
| 特性 |
ESM (import/export) |
CommonJS (require/module.exports) |
| 加载时机 |
静态加载（Static） |
动态加载（Dynamic） |
| 原理 |
编译时确定模块依赖关系。 |
运行时加载和解析依赖。 |
静态加载意味着 JavaScript 引擎和构建工具可以在代码执行之前（即编译阶段）就解析出模块之间的所有导入和导出关系。
2. Tree Shaking 成为可能 🌳
这是 ESM 相比 CJS 最核心的优势。
因为 ESM 是静态加载的，构建工具（如 Webpack、Vite、Rollup）可以：
- 在编译阶段，准确分析出哪些
export 的代码在其他模块中从未被 import 过。
- 将这些未使用的代码（Dead Code）在最终的打包文件中移除。
这个过程被称为 Tree Shaking（摇树优化）。
- CJS 无法实现 Tree Shaking： 因为 CJS 的
require() 可以在程序运行的任何时刻动态地根据条件判断加载模块，构建工具无法在编译阶段预测其依赖，因此无法安全地移除代码。
- ESM 的价值： Tree Shaking 极大地减小了最终的打包体积，对于前端性能优化至关重要，特别是对于大型应用。
3. 异步支持（动态 Import）
虽然 ESM 是静态加载的，但它也提供了一个强大的动态导入功能：import() 函数。
JavaScript
// 只有当用户点击按钮时，才加载 chart.js 模块
document.getElementById('btn').addEventListener('click', () => {
import('./chart.js').then((module) => {
module.drawChart();
});
});
import() 返回一个 Promise，这使得模块可以按需 (On-Demand) 或条件性地加载，非常适合实现代码分割 (Code Splitting) 和懒加载，进一步优化应用性能。
🌐 ESM 在不同环境下的运行
ESM 的目标是成为所有 JavaScript 运行环境的统一标准。
1. 浏览器环境 🖥️
现代浏览器通过内置支持 ESM。你只需在 <script> 标签中添加 type="module" 属性即可直接运行 ESM 文件，无需任何构建工具或打包器。
HTML
<script type="module" src="./main.js"></script>
这种原生支持正在推动“无打包 (No-Bundle)” 开发模式的兴起，Vite 等工具就利用了这一特性来提供极速的开发体验。
2. Node.js 环境 ⚙️
Node.js 生态正在从 CJS 逐步过渡到 ESM。要在 Node.js 中使用 ESM，你有两种主要方式：
- 使用
.mjs 扩展名： 将文件扩展名从 .js 改为 .mjs，Node.js 会自动将其识别为 ESM 模块。
- 配置
package.json： 在项目的 package.json 中添加 "type": "module"，这样所有 .js 文件默认都会被视为 ESM。
总结
ESM 不仅仅是一种新的语法，它是 JavaScript 语言走向成熟和高性能的重要标志。
- 编译时优化： 静态加载能力带来了高效的 Tree Shaking。
- 统一标准： 无论是浏览器还是 Node.js，都在朝着 ESM 统一迈进。
- 灵活强大： 动态
import() 支持代码分割和懒加载。
掌握和使用 ESM 是现代 JavaScript 开发者的必备技能，它是构建高性能、可维护大型应用的基础。
