ECMAScript模块模式
JavaScript 模块化主题的关系地图，串联 ESM、CommonJS、浏览器与 Node.js 运行时。
#type / synthesis
#status / growing
#resource / javascript
#resource / ecmascript
[!info] related notes
- 所属 MOC: ecmascript-moc, JavaScript的工程化与运行时
- 原子概念: es6-module-import-export, commonjs-amd-umd, html-js-scripts
- 宿主环境: javascript-in-browser, javascript-in-nodejs
- Node 配置: package-json
ECMAScript模块模式
这篇笔记负责串联模块化主题，不再在总览页重复写所有语法细节。
模块化到底在解决什么
当代码开始拆成多个文件时，会立刻遇到：
- 变量污染
- 依赖关系不透明
- 加载顺序难管理
- 宿主环境解析规则不同
模块化的本质，就是把“拆文件”和“依赖关系”变成明确规则。
这组主题的四层结构
1. 语言层：ESM
- es6-module-import-export
- 这是现代 JavaScript 的主线模块语法
2. 历史层：CommonJS / AMD / UMD
- commonjs-amd-umd
- 主要用来理解旧代码、Node.js 历史和浏览器兼容演进
3. 宿主加载层
- html-js-scripts 解释浏览器里的脚本标签与模块脚本
- javascript-in-browser / javascript-in-nodejs 解释不同运行时怎样看待模块
4. 项目层
- JavaScript的工程化与运行时 负责把模块化放回真实项目上下文
推荐阅读顺序
- es6-module-import-export
- commonjs-amd-umd
- html-js-scripts
- javascript-in-browser
- javascript-in-nodejs
一句话对比
- 学现代开发，先抓 ESM
- 学旧项目与历史演进，补 CommonJS / AMD / UMD
- 学实际加载与运行边界，回到浏览器和 Node.js 笔记