模块化演进

一、是什么

模块化是将复杂系统拆分为多个独立、可复用单元的开发方式，每个模块拥有自己的作用域与依赖关系。

常见模块规范：

• CommonJS（Node.js）
• AMD / CMD（浏览器早期方案）
• ES Module（ESM，标准模块化）

二、为什么

1. 解决全局污染问题
2. 提升代码复用性
   • 模块可独立开发
   • 支持按需加载
3. 依赖管理清晰

三、模块化发展历程

1. IIFE（立即执行函数）

(function () {
  var a = 1;
})();

👉 缺点：无法解决依赖关系

2. CommonJS（同步加载）

const fs = require('fs');
module.exports = {};

特点：

• 同步加载
• 适用于 Node.js

3. AMD（异步加载）

define(['dep'], function (dep) {});

代表：RequireJS

4. ES Module（标准方案）

import { foo } from './foo.js';
export default foo;

特点：

• 静态分析（支持 TreeShaking）
• 浏览器原生支持
• 支持异步加载

四、核心原理

1. 依赖图（Dependency Graph）

构建工具会分析：入口文件 → import → 依赖 → 递归分析

2. 模块作用域隔离 每个模块：

   • 独立执行上下文
   • 避免变量污染

3. ES Module 静态结构

   👉 编译阶段确定依赖（关键点）

五、总结

模块化本质：

通过“依赖关系 + 作用域隔离”实现代码组织与复用