《Go 后端开发者学 TypeScript：ES Module了解》

1. ES Module 是什么？

ES Module（简称 ESM）是 JavaScript 官方推出的模块化标准。

一句话理解：以前 JavaScript 代码都堆在一起，现在可以拆成多个文件，通过 import 和 export 相互调用。

例如：

javascript 复制代码

// math.js：提供加法功能
export function add(a, b) {
  return a + b;
}

csharp 复制代码

// main.js：使用加法功能
import { add } from "./math.js";

console.log(add(1, 2)); // 3

这就是 ES Module。

2. 为什么会出现 ES Module？（历史）

你本科应该学过 HTML、CSS、JavaScript 三件套。

早期前端开发基本就是：

css 复制代码

index.html
style.css
main.js

HTML 通过 <script> 引入 JavaScript：

xml 复制代码

<script src="main.js"></script>

当时网页比较简单，一个 JS 文件就能完成很多功能。

但后来网站越来越复杂，比如淘宝、京东这样的应用，可能有成千上万个 JS 文件。

这时出现了一个问题：JavaScript 最初没有标准的模块系统，代码不好拆分和管理。

于是逐渐出现了几种解决方案：

2009

CommonJS 出现

主要用于 Node.js，使用 require() 和 module.exports 管理模块。

2015

ES6 正式引入 ES Module

JavaScript 语言终于有了官方模块化标准：import / export。

2017+

浏览器逐步原生支持 ESM

后来 Node.js 也逐渐完善支持，ESM 成为现代 JavaScript 开发的主流方案。

3. CommonJS 和 ES Module 有啥区别？

其实解决的是同一个问题：如何在不同 JS 文件之间共享代码。

CommonJS（老方式）

javascript 复制代码

// math.js
module.exports = {
  add: (a, b) => a + b
};

csharp 复制代码

// main.js
const { add } =
  require("./math");

ES Module（标准方式）

css 复制代码

// math.js
export const add =
  (a, b) => a + b;

csharp 复制代码

// main.js
import { add }
  from "./math.js";

你只需要知道：

require / module.exports：CommonJS。
import / export：ES Module。

现在学习 React、Vue、TypeScript，主要接触的是 ES Module。

4. 那 TypeScript、Node.js、ES Module 是什么关系？

这是你需要建立的知识框架：

技术	解决什么问题
HTML	定义页面结构
CSS	控制页面样式
JavaScript	实现页面交互和逻辑
TypeScript	给 JavaScript 增加类型检查
Node.js	让 JavaScript 能在浏览器之外运行
ES Module	让 JavaScript 代码能够模块化组织
npm	管理 JavaScript 项目的依赖包
Vite / Webpack	处理项目构建、模块和资源

其中 ES Module 是 JavaScript 的一部分，浏览器和 Node.js 都可以使用，并不是某个单独的框架。

5. 你现在应该怎么理解？

以前学的前端三件套没有过时，只是现代前端在上面增加了更多工程化工具。

javascript 复制代码

HTML + CSS + JavaScript
          │
          ▼
ES6+（现代 JavaScript 语法）
          │
          ├── ES Module（模块化）
          ├── Promise / async / await（异步）
          ├── let / const（变量声明）
          └── 解构、箭头函数等
          │
          ▼
TypeScript（类型系统）
          │
          ▼
React / Vue（UI 框架）
          │
          ▼
Vite / npm（工程化工具）

这是便于学习的知识路线，并非这些技术严格的依赖关系。

总结：ES Module 就是 JavaScript 的模块管理机制，2015 年随 ES6 标准正式推出。你之前学的 JavaScript 负责写逻辑，而 ES Module 负责把这些逻辑拆分、组织起来，让大型项目更容易开发和维护。