webpack 往右一点之 “模块这个东西”

为什么会考虑模块？

　　webapp，页面初始化和使用过程中会加载越来越多的javascript代码

　　－－－ 给前端的开发流程和资源组织带来挑战

　　－－－前端需要模块系统

模块系统是干什么的呢？

　　模块的定义

　　　　　依赖

　　　　　导出

现有的模块规范有哪些？

　　commonjs

　　　　例子： 服务器端的nodejs

　　　　思想： 允许模块通过require方法来同步加载所要依赖的其他模块，然后通过exports或module。exports来导出需要暴漏的接口

　　　　缺点：不能非阻塞并行加载多个模块

　　amd

　　　　主要接口： define（id？，dependencies？，factory）对于依赖的模块提前执行

　　　　缺点：代码的阅读和书写比较困难，不通用

　　　　优点：并行加载多个模块，适合在浏览器中异步加载模块

　　　　例子： curl，requirejs

　　cmd

　　　　和amd很相似，尽量保持简单，兼容性好

　　　　define（function（require，exports，module）｛

　　　　　　var $ = require('jquery');

　　　　　　exports.xxx

　　　　　　module.exports=

　　　　｝）；

　　　　模块的加载逻辑很重？

　　　　例子：seajs

　　es6模块

　　　　思想： 静态化，在编译时就能确定模块的依赖关系，以及输入和输出的变量

　　　　　　import ‘jquery’

　　　　　　export function（）｛｝

　　　　　　module “localmodule”｛｝

　　　　缺点： 兼容性

　　　　例子：babel

理想的模块系统是怎么样的呢？

　　1. 可以兼容多种模块风格

　　2. css、图片、字体等也需要模块化

　　　　资源会以各种方言的形式存在，比如coffeescript、less、sass、众多的模版库等

　　　　如何做到让require能加载各种资源？

　　　　　　静态分析

　　　　　　　　在编译的时候，对整个代码进行静态分析，分析出各个模块的类型和他们依赖关系，然后将不同类型

　　　　　　　　的模块提交给适配的加载器来处理

模块的加载？

　　极端模式：每个模块文件单独加载

　　　　　　　把所有模块打包成一个文件然后只请求一次

　　分块传输模式：按需进行懒加载

　　　　　　　　　需要一个对整个代码库中的模块进行静态分析、编译打包的过程