前端模块系统的发展史

前端模块系统

script 标签

模块系统在 JavaScript 出来的时候就已经存在了，之前的前端加载 JavaScript 的方式就是使用 <script> 标签，例如：

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

每一个文件都被看成一个模块，通常这些模块都是暴露在全局作用域下，也就是定义在 window 对象中，当然你也可以使用命名空间来组织这些模块。这样做必须要考虑 js 模块的加载顺序，而且容易造成变量冲突，版本控制也是一个问题。

CommonJS 规范

现在我么使用的 Node.js 就是遵循的 CommonJS 规范(它的 package.js 就是一个最好的例子)，该规范允许 require 方法同步加载所要依赖的其它模块，然后通过 exports 导出。这种方式在服务端可以，但是在浏览器环境中，是会阻塞加载的，浏览器资源是异步加载的。

require('../io.js');
export.myFunction=function() {};
moulde.exports=someVal;

AMD (Asynchronous Module Definition)规范

它是通过 define(id?,dependencides?,factory)这个主要接口，在声明模块的时候指定所有的依赖 dependencides,并将形参传到 factory 中，对于依赖的模块提前执行，依赖前置。

define("module",["dep1","dep2"],function(d1,d2){
  return someExportedVal;
});
require(["module","../io"],function(module,io){....});

它适合在浏览器中异步加载模块，可以并行加载多个模块

CMD (Common Module Definition)规范

CMD 和 AMD 很相似，他通过 SPM 打包，可以很容易在 Node.js 中运行，依赖就近，延迟执行，但是模块的加载逻辑偏重。

define(function(require, exports,module){
  var $=require('jquery');
  var Spinning = require('spinning');
  export.something = ...
  
});

UMD (Universal Module Definition)规范

类似于 CommonJS 和 AMD 的语法糖，是模块定义的跨平台解决方案。

ES6 模块

ECMAScript6 标准，它偏静态化的，在编译时能够确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 都实在运行时确定这些东西的。但现在的浏览器端还没有实现该标准。

Webpack 眼中的模块

Webpack 会对所有的静态资源进行分析，所以在 Webpack 看来，不光是 Javascript 是模块，图片、CSS、字体、SVG、HTML 模板都是模块，我会在后面的文章中专门来分析 Webpack。当然，不光是 Webpack，Node.JS 也可以通过 require 的来加载这些模块。下面官方的这张截图就能说明 webpack 对模块的认识。