简述前端模块化发展史

什么是前端模块化？

模块化： 是具有特定功能的一个对象（ 广义理解 ）
模块定义的流程：
1.定义模块（对象）
2.导出模块
3.引用模块
好处：可以存储多个独立的功能块，复用性高
种类：

AMD（ require.js）
CMD ( sea.js )
Common.js

CommonJs用在服务器端，AMD和CMD用在浏览器环境
AMD定义一个模块：使用define来定义，用require来使用模块
Common.js：Node.js使用了Common.js的规范

ES5及之前是如何实现模块化的？

通过RequireJS实现：
CommonJS和AMD，是模块化的标准规范，而RequireJS就是AMD规范的最好实现.实现CommonJS规范的API是同步加载模块的，而实现AMD规范的API是则是异步加载模块，异步加载即非阻塞加载，更加适合浏览器端。官方文档对RequireJS的描述：
RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node.使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

ES6是如何实现模块化的?

通过自带的实现：
es6原生支持模块化了，通过import导入模块,export导出模块。这两个单词一直作为保留字，如今赋予它应有的身份出现了，丰富了js语言功能。传统的模块模式基于闭包，返回的“公有API”。这个“公有API”带有对内部变量和功能拥有闭包的方法。它经常这样表达：

模块greetingfn的定义：外边套一层父函数
function myName(name) {
//父函数myName
    function greetingfn() {
    //子函数greetingfn
        console.log( "myName " + name + "!" );
    }
 
    // 公有API---返回父函数里包裹的方法的指针。
    return {
        greetingfn: greeting
    };
}
使用：
var me = myName( "macrolam" );
me.greetingfn();            // myName macrolam!

export的使用

export关键字要么放在一个变量或函数声明的前面，要么就对象形式导出，代码如下：

export function fn() {
 // 导出函数
}
 
export var num = 42;
 // 导出变量
var arr = [1,2,3];
 
export { arr };

import使用

要导入一个模块，使用import语句
如果你想要导入一个模块的API中的特定命名成员到你的顶层作用域，使用这种语法：

import { foo, bar, baz } from "foo";

被罗列的标识符foo，bar和baz必须匹配在模块的API上的命名导出（这里将会发生静态分析和错误断言）。它们在你当前的作用域中被绑定为顶层标识符。

import { foo } from "foo";
foo();

对于一个小项目，没有多少页面（十几个）的PC端站点，没必要进行前端模块化开发；但是从维护性角度来说还是采用模块化好些。对于一个大项目，数据交互功能性动画频发的站点js代码大量涌现还是模块化更优。