模块化系统现状
WebPack 缘由
前端模块化现状
今天的web网站越来越像Web APP。
- 页面中的JS代码越来越多
- 浏览器提高的接口越来越丰富
- 越来越少的全页面重载-->页面中更多的代码。
最终：客户端代码中越来越多的代码。
这个时候，很大量的代码需要组织。模块化系统可以帮助我们把代码拆分为模块。
当下的模块化系统
目前，有很多定义依赖导出值的模块化系统
- script 标签的方式
- CommonJS
- AMD
- ES6 modules
script-标签样式
最开始原始的处理模块的方式。模块全存储在全局变量上面，来共享。
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="module3.js"></script>
存在的问题
- 全局冲突
- 自己维护模块的依赖
- 模块文件的顺序很重要
- 在大型项目中，手动解决依赖很难维护。
CommonJS(同步require）
CommonJS使用同步的require方法来载入一个模块，在exports上面添加属性，或者设置module.exports的值来返回模块对象。
require("module");
require("../file.js")
exports.doStuff = function(){}
module.exports = someValue;
NodeJS就是使用的这个包管理系统。
优点
- 服务端的模块可以重用
- 目前有大量的模块按照这种规范书写（npm系统）
- 使用简单
缺点
- 同步串行的依赖解决方式不适合网络的异步特点
- 不能多模块并行加载
实现
- node.js
- browserify
AMD(异步模块定义－异步的require)
浏览器上，和同步的模块系统相比，一个异步的模块化系统才更适用。
require(["module", "../file"],function(module, file){/*...*/}) define("mymodule",["dep1","dep2"],function(d1,d2){
return someExportedValue;
})
优点
- 适合网络的异步请求
- 并行载入多个模块
缺点
- 很难读写
实现
- requirejs
ES6 模块
ES6新添了模块语法
import "jquery"
export function doStuff(){}
module "localModule" {}
优点
- 很容易静态分析
- 标准支持
缺点
- 浏览器还未完全支持
- 现存的这种格式的模块还很少
