1-1 模块系统介绍

1.<script>标签加载

<script src="module1.js"></script>

<script src="module2.js></script>

<script src="module3.js></script>

(1) 多个文件的变量冲突

(2) 文件按序加载

(3) 程序依赖关系不明确，难维护

2.CommonJS

允许模块通过require方法来同步加载所要依赖的其他模块，然后通过exports 或者 module.exports 到导出开发的方法。

require('jquery');

require('./../module01.js');

exports.doSomething = function() {};

module.exports = {};

(1) 同步加载，好使长，且不能并行加载多模块

3.AMD(Asynchronous Module Definition)

通过define(id, dependences, factory), 声明模块的时候指定所有的依赖，当作参数传递到factory中，，对依赖进行前置执行。

define('module', ['dep01', 'dep02'], function(dep01, dep02) {

   return obj;

});

require(['module', './../file'], function(module, file) {

  // code execute

});

(1) 适合浏览器异步加载，可以并行加载多模块

(1) 定义模块复杂，增加开发成本

(2) 模块化应用独立，通用性较差

4.CMD(Common Module Definition)

5.UMD(Universal Module Definition)

以上两种接触较少，不比较

6.ES6 模块

增加了javascript语言层面的模块体系定义。

最大的静态化，以便编译时能确定模块的依赖关系，以及输入和输出的变量。

CommonJS 和 AMD 都只能在运行是定义这些。

import 'jquery';

export function functionName() {}

module 'localModule' {}

新兴语法，支持性较差。

Webpack特点总结：