webpack学习笔记（1）-模块化

模块化

模块化是指把一个复杂的系统分解到多个模块以方便编码。

很久以前，开发网页要通过命名空间的方式来组织代码，例如 jQuery 库把它的API都放在了 window.$ 下，在加载完 jQuery 后其他模块再通过 window.$ 去使用 jQuery。 这样做有很多问题，其中包括：

命名空间冲突，两个库可能会使用同一个名称，例如 Zepto 也被放在 window.$ 下；
无法合理地管理项目的依赖和版本；
无法方便地控制依赖的加载顺序。
当项目变大时这种方式将变得难以维护，需要用模块化的思想来组织代码。

script 标签

最原始的模块实现方式是通过在页面中插入多个 script 标签。

<script src="//mycdn.com/moduleA.js"></script>
<script src="//mycdn.com/moduleB.js"></script>
<script src="//mycdn.com/main.js"></script>

全局的作用域

立即执行函数表达式

(function() {
  // foobar 并不会暴露在全局作用域
  var foobar = 'Hello IIFE!';
  console.log(foobar);
})()

命名空间

库名.类别名.方法名

var NameSpace = {}
NameSpace.type = NameSpace.type || {}
NameSpace.type.method = function(){}

CommonJS 与 Node.js 模块系统

• 一个文件为一个模块
• 通过 module.exports 暴露模块接口

exports.getSum = function(a, b) {
  return a + b;
}

• 通过 require 引入模块

const math = require('./math');

• CommonJS 规范的流行得益于 Node.js 采用了这种方式
• 同步执行
• 无法直接运行在浏览器环境下，必须通过工具转换成标准的 ES5。

AMD

• Async Module Definition
• 使用 define 定义模块
• 使用 require 加载模块

/ 定义一个求和的模块
define('getSum', ['math'], function(math) {
  return function(a, b) {
    console.log('sum: ' + math.sum(a, b));
  }
});

• 应用RequireJS
• 依赖前置，提前执行
• 异步加载依赖
• JavaScript 运行环境没有原生支持 AMD，需要先导入实现了 AMD 的库后才能正常使用

CMD

• Common Module Definition
• 一个文件为一个模块
• 使用define 来定义一个模块
• 使用require 来加载一个模块
• 应用（SeaJS)
• 尽可能懒执行

ES6 Module

• 一个文件一个模块
• export / import
• import()
• 目前无法直接运行在大部分 JavaScript 运行环境下，必须通过工具转换成标准的 ES5 后才能正常运行。

Webpack 支持

• AMD (RequireJS)
• ES Modules (推荐的主流)
• CommonJS（主流）