一、模块化基础概念

• 掌握 模块化的定义：将复杂程序拆分为独立模块，每个模块有明确的输入与输出。

• 理解 模块与脚本的区别：模块具有私有作用域、支持显式导入导出，而脚本在全局执行并可能污染全局环境。

• 了解 前端模块化的发展背景：从早期无模块体系到现代 ES6 模块，解决命名冲突、依赖管理等问题。

二、主流模块规范演进

• 掌握 ESModule 的基本语法：使用 export 和 import 进行具名导出/导入，以及 export default 实现默认导出。

• 理解 CommonJS 规范：Node.js 中通过 require() 同步加载模块，module.exports 或 exports 输出接口。

• 了解 AMD 与 CMD 规范：AMD（如 RequireJS）采用异步加载，适合浏览器环境；CMD（如 SeaJS）整合 CommonJS 与 AMD 特性，按需加载。

三、ES6 模块核心机制

• 掌握 编译时静态分析：ESModule 在编译阶段确定依赖关系，支持静态优化，不允许动态表达式用于 import。

• 理解 动态引用机制：ESModule 输出的是对值的引用，模块内部变化会反映在导入方；CommonJS 输出值的拷贝，不会随原模块变化更新。

• 了解 import.meta、import() 动态加载等高级特性，以及模块作用域中顶层 this 为 undefined 的行为。

四、模块在实际环境中的加载方式

• 掌握 浏览器中如何通过 <script type="module"> 加载模块，自动启用严格模式且支持跨域 CORS。

• 理解 Node.js 中 .mjs 文件与 package.json 的 type: "module" 配置，实现 ESModule 支持。

• 了解 CommonJS 与 ESModule 互操作规则：ESM 可整体导入 CJS 模块，CJS 需使用 import() 异步加载 ESM。

五、工程化中的模块实践

• 掌握 使用 Webpack 或 Vite 等工具进行模块打包与路径别名配置。

• 理解 导入映射（import maps）的作用：实现裸模块名导入、版本隔离、资源重定向等。

• 了解 循环依赖问题及其处理策略，在开发中避免强耦合模块设计。