06-模块化与工程化

章节目标：围绕“06-模块化与工程化”建立知识主干，能说清关键机制，并能用最小代码或真实案例验证结论。

学习要求

• 阅读时把“概念、适用场景、常见错误、验证方法”分别记下来。
• 带代码的内容至少运行一次，再主动修改一个条件观察结果。
• 学完后选择三个主题，不看原文向别人讲清楚。

完整目录（54 篇）

• CommonJS 和 ESModule（ESM）
• 实现
• 实现的不同
• 循环引用处理的区别
• ES6 模块的静态分析特性
• ES6的运用
• ESM 单例
• JavaScript-TypeScript 循环依赖完全指南
• AMD规范
• JavaScript的模块讲解
• Javascript模块化编程
• require.js的用法
• 模块的写法
• ES6 模块与 CommonJS 模块的差异
• ES6 模块加载 CommonJS 模块
• Module 的加载实现
• Node.js加载ES6 模块
• 循环加载
• 浏览器加载
• Module 的语法
• export default命令
• export 与 import 的复合写法
• export 命令 1
• export 命令
• export使用注意事项
• import as 整体加载
• import {} 命令
• import()
• 严格模式
• 同时使用默认import和import
• 模块继承
• 跨模块常量
• Ts、babel、webpack中的模块转换
• Webpack 转译 Typescript 现有方案
• webpack处理ts模块
• UMD（Universal Module Definition）
• umd标准格式
• 注意事项
• import如何加载模块
• 手写一个支持 import-export 的 ESM 加载器
• 支持 export default 和默认导入的简易 ESM 加载器实现。
• 第七章：实现 top-level await 支持
• 第九章：实现基础打包器 CLI，模拟 Rollup-Vite 的打包流程
• 第五章：手写一个支持 import-export 的简易 JS 打包器
• 第八章：实现动态导入（import()）与异步代码分割（Code Splitting）
• 第六章：实现简易 Tree Shaking（只打包被使用的 export）
• 第十一章：支持 .json 模块加载（兼容 import 与 require）
• 第十三章：生成 HTML 可视化模块依赖图（可点击查看内容）
• 第十二章：生成模块依赖图可视化（支持 Graphviz 和 HTML）
• 第十四章：支持多入口打包 + 模块共享分析（MPA - 微前端模式）
• 第十章：支持 CommonJS 模块打包（与 ESM 混用）
• 第四章：用 AST 工具 Acorn 精准解析
• 模块具有 单例（Singleton）
• 请描述如何使用 ES6 的模块系统