JavaScript 模块化

模块化规范的发展

CommonJS

NodeJs 的模块化规范

AMD（Asynchronous Module Definition） 与 RequireJs

AMD 是浏览器端模块化规范，RequireJs 是 AMD 规范的实现。

CMD（Common Module Definition） 与 Sea.js

CMD 是浏览器端模块化规范，Sea.js 是 CMD 规范的实现

AMD 和 CMD 的关系

都是js的模块化规范，并且都用在浏览器端。

AMD 是 RequireJs 普及过程中被创造出来的。

CMD 是 Sea.js 普及过程中被创造出来的。

二者的主要区别是，CMD 推崇就近依赖，AMD 推崇依赖前置。

CommonJS 和 AMD 的关系

都是运行时加载，也就是运行时确定模块的依赖关系。

二者的区别：

1. CommonJS 是服务端模块规范，AMD 是浏览器端模块规范。
2. CommonJS 是同步加载，AMD 是异步加载。
3. 第3条看不懂，待完善

ESM（ES6 module）

js语言层面的模块规范。

是浏览器和服务器通用解决方案。

ESM与其它规范的区别

CommonJS、AMD、CMD都是运行时加载。

ESM是编译时加载，同时也提供运行时加载。

参考

前端JavaScript模块化规范进化论

前端构建工具的发展

前端运行时模块化

• RequireJs AMD 规范
• sea.js CMD 规范

自动化工具

• Grunt 基于配置
• Gulp 基于代码和文件流

模块化

• browserify 基于CommonJs规范只负责模块化
• rollup 基于ES module，tree shaking优化代码，支持多种规范导出，可通过插件集成压缩、编译、commonjs 语法 等功能

工程化

• webpack 大而全的模块化构建工具
• parcel 极速 0 配置的模块化构建工具
• snowpack/vite ESM运行时模块化构建工具

参考

前端构建这十年