弊端

模块化最大的弊端：HTTP请求数增加，上线时必须合并文件

什么是模块化

模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。

可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的存在。对于软件行业来说：解耦软件系统的复杂性，使得不管多么大的系统，也可以将管理，开发，维护变得“有理可循”。

模块化一些专业的定义为：模块化是软件系统的属性，这个系统被分解为一组高内聚，低耦合的模块。那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码，其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。

模块化系统：

  1. 定义封装的模块
  2. 定义新模块对其他模块的依赖
  3. 支持对其他模块的引入

规范：

  1. CommonJS
  2. AMD（Asynchronous Module Definition）
  3. CMD（Common Module Definition）

模块化打包

前端构建工具吐槽与parcel极简入门

Browserify

使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。

jspm

工作在SystemJs(模块加载器)通用模块之上，与NPM和GitHub协同合作的浏览器包管理工具

systemjs

模块加载器，可以导入任何流行格式的模块(CommonJs、UMD、AMD、ES6)，它是工作在 ES6模块加载polyfill 之上，它能够很好的处理和检测所使用的格式。也能使用插件转换es6（用 Babel 或者 Traceur）或者转换TypeScript 和 CoffeeScript代码。

AMD

规范

CMD 推崇依赖就近，AMD 推崇依赖前置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// CMD  
define(function(require, exports, module) {  
    var a = require('./a')  
    a.doSomething()  
    // ...
    var b = require('./b') // 依赖就近书写  
    b.doSomething()  
    // ...   
})  
  
// AMD
define(['./a', './b'], function(a, b) {
    a.doSomething()  
    // ...
    b.doSomething()  
   // ...  
})