本文已收录在
Github
github.com/Geekhyt，感谢Star。
五分钟带你回顾前端模块化发展史
CSS 早在 2.1 的版本就提出了 @import 来实现模块化，但是 JavaScript 直到 ES6 才出现官方的模块化方案 ES Module。尽管早期 JavaScript 语言规范上不支持模块化，但这并没有阻止 JavaScript 的发展。官方没有模块化标准，那么我们就自己动手创建标准。社区里的前辈们创建并实现了规范，这些规范便是前端模块化发展之路上智慧的结晶。
模块化的价值
在 2020 年的今天来看，模块化应该具有以下价值：
- 可维护性
- 减少全局污染
- 可复用性
- 方便管理依赖关系
- 分治思想的实践
十年之前，模块化还只是使用闭包简单的实现一个命名空间。使用这种解决方式可以简单粗暴的处理全局变量和依赖关系等问题。
CommonJS
让我们把时间追溯到 2009 年 1 月，在这个普通的冬天里，万物开始生长。中国南极科学考察站昆仑站落成，成为南极海拔最高的科学考察站。在 JavaScript 社区中， Mozilla 的工程师 Kevin Dangoor 发起了 CommonJS 的提案。(最初叫ServerJS)
再到后来横空出世的 Node.js 采用 CommonJS 模块化规范，同时还带来了 npm (全球最大的模块仓库) 。
nodejs 中模块的实现并非完全按照 CommonJS 的规范来的，而是进行了取舍，并增加了少许特性。
CommonJS 规范在服务端表现出色，使得 JavaScript 在服务器端大放异彩，与传统服务器语言(PHP、Python)等产生抗衡甚至压倒之势。程序员们便萌发出了将它移植到浏览器端的想法。
然而由于CommonJS的模块加载是同步的。我们知道，服务器端加载的模块从内存或磁盘中加载，耗时基本可忽略。但是在浏览器端却会造成阻塞，白屏时间过长，用户体验不够友好。
因此，从CommonJS中逐渐产生了一些分支，也就是业内熟知的AMD、CMD等。
AMD规范
James Burke提出了 AMD 规范，RequireJS 也是他的代表作。他同时开发了 amdefine（在node中可以使用AMD规范的库）。
AMD 主要是为了解决 CommonJS 规范在浏览器端的不足：
- 缺少模块封装的能力
- 使用同步的方式加载依赖
-
export只能导出变量，导出函数需要用module.export(这通常不符合直觉)
AMD 规范定义了一个 define 全局方法用来定义和加载模块，RequireJS 后期也扩展了 require 全局方法用来加载模块 。其核心实现是内部的模块加载器。
CMD规范
@玉伯提出了 sea.js (CMD规范的实现)。
准确的说 CMD 是 SeaJS 在推广过程中对模块定义的规范化产物。
相比于AMD的异步加载，CMD更倾向于懒加载，规范本身也与CommonJS更贴近。
因为是懒加载机制，所以 sea.js 提供了 seajs.use 方法，来运行已经定义的模块。所有 define 的回调函数都不会立即执行，而是将所有的回调函数进行缓存，只有 use 之后，以及被 require 的模块回调才会执行。
RequireJS 和 sea.js 的区别
-
sea.js只有在require的地方，才会真正执行模块。 -
RequireJS会先运行所有的依赖，得到所有的结果后再执行回调。
AMD 和 CMD 区别
- 对于依赖的模块，
AMD是提前执行，CMD是延迟执行。 -
CMD推崇依赖就近，AMD推崇依赖前置。 -
AMD的API一个当多个用，职责单一。CMD中，每个API都简单纯粹。
来自@玉伯的回答
UMD
UMD 是 AMD 和 CommonJS 的综合产物。AMD 用于浏览器，CommonJS 用于服务器。UMD 则是两者的兼容模式，解决了跨平台问题。
实现原理：if-else
详情请移步githubUMD
ES Module
天下大势，分久必合。
十年之后，官方爸爸推出的 ES6 模块化方案，一统浏览器和服务器。采用了完全静态化的方式进行模块加载。
语法
模块导入
// 默认导入default模块
// main.js
import name from './module.js'
// module.js
const name = '前端食堂'
export default name// 如果想导入其他模块
// main.js
import { name, getName } from './module.js'
// module.js
export const name = '前端食堂'
export const getName = () => name// 同时导入
// main.js
import name, { getName } from './module.js'
// module.js
const name = '前端食堂'
export const getName = () => name
export default name// 重命名
// main.js
import * as mod from './module.js'
let name = ''
name = mod.name
name = mod.getName()
// module.js
export const name = '前端食堂'
export const getName = () => name// 对单独的变量进行重命名
import { name, getName as getModName }模块导出
// 第一种写法
export const name = '前端食堂'
// 第二种写法
export function getName() {
return name
}
export class Logger {
log(...args) {
console.log(...args)
}
}
// 第三种写法
const name = '前端食堂'
function getName() {
return name
}
class Logger {
log(...args) {
console.log(...args)
}
}
export {name, getName, Logger}
// 第四种写法
const name = '前端食堂'
export default name这里只提供了一些基本语法，更多语法请参考阮一峰老师的 《ECMAScript 6 入门》。
当然，不同的规范之中，被规范的语法也有所不同，这里推荐业内公认的语法规范airbnb。
这里列举出几个airbnb中模块导出/引入的规范。
1.如果模块只有一个输出值，就使用 export default ，如果模块有多个输出值，就不使用 export default ， export default 与普通的 export 不要同时使用。
2.模块导入时不要使用通配符。因为这样可以确保你的模块之中，有一个默认输出 （export default）。
// bad
import * as myObject from './importModule';
// good
import myObject from './importModule';ES Module与CommonJS的差异
1.语法 import/export require/module
2.CommonJS 模块输出的是一个值的拷贝(不会随原始值变化)，ES6 模块输出的是值的引用(会随着原始值变化)。
3.CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
写在最后
成天讨论这门语言好，或者那门语言坏的人，甚至是可悲的。既悲其一叶障目，更悲其大愚若智的自得心态。 ——《大道至简》
JavaScrit 至今仍有被人诟病的缺憾之处。但历史告诉我们，再多的阻力也阻挡不了真正热爱它的人们。
感谢为 JavaScript 模块化之路贡献的开发者们。
爱心三连击
1.看到这里了就点个「赞」支持下吧，你的赞是我创作的动力。
2.关注公众号「前端食堂」，你的前端食堂，记得按时吃饭！
3.特殊阶段，带好口罩，做好个人防护。
