coolie 入门之如何书写 CMD 模块

Question

开发环境

开发环境下，模块的书写非常的方便、简洁。总览如下：

define(function(require, exports, module){
    require('./some/module.js');
    module.exports = 123;
});

具体细节如下：

1、一个文件一个模块

开发环境下，一个文件必须是一个模块，管理方便，颗粒化，文件路径就是模块 ID。

- js
|-- a.js 一个文件一个模块
|-- b.js
|-- c.js
|-- d.js
`-- ...

2、不写模块 ID

开发环境下，不能写模块的 ID，模块加载器会自动以模块文件所在的地址为模块 ID，这也是为什么一个文件里只能写一个模块的原因了。

define('不要在此写模块 ID', function(require, exports, module){
    // code
});

3、不显式模块依赖

开发环境下，不需要显示书写模块的依赖，直接使用require即可。

define('不要在此写模块 ID', [
    // 这么写是不推荐的
    './path/to/a.js',
    './path/to/b.js'
], function(require, exports, module){
    // code
});

4、require 关键字不能更换

在加载模块的时候，会以require关键字作为提取模块依赖的匹配，因此不能修改它。exports和module可以修改。

define(function(requireabc, exports, module){
    // 不能将`require`关键字替换
    var a = requireabc('./path/to/a.js');
});

5、模块依赖必须是显式

模块依赖中不能包含变量，也不能重写require关键字。

define(function(require, exports, module){
    // 模块依赖地址不能包含变量等信息
    var md = window.a  ? './path/to/a.js' : './path/to/b.js';
    var a = require(md);
});

6、依赖模块必须为本地相对地址

模块依赖必须为本地相对地址，并且不推荐将模块地址的文件后缀省略，因为模块为 js 文件，因此默认的文件后缀为.js。

define(function(require, exports, module){
    // 不能写绝对路径的模块
    // 允许的模块地址为
    // ./path/to/a.js
    // path/to/a.js
    // /path/to/a.js
    var a = require('./path/to/a.js');
});

7、模块出口必须在 module.exports 上

模块的出口地址是 exports，它是一个空对象，因此可以直接在上面添加属性和方法，如：

exports.name = 'cloudcome';
exports.sayName = function(){
    alert(this.name);
};

如果模块的出口是一个函数，那么就必须覆盖 exports：

module.exports = function(name){
    alert(name);
};

8、文本模块

文本模块直接写文本内容即可。但需要注意的是，模块加载器只加载文本模块，而不会去执行响应的文本操作，如将 css 内容插入到页面上、或者将 html 模板文件渲染成 html 内容，这些事情需要相应的脚本来做，如 alien 中的modification模块的importStyle方法来导入 css 内容，以及Template模块将 html 模板渲染成 html 内容。

// 纯文本引入
require('text!./some.txt');

// css 文本，构建时会压缩`some.css`
require('css!./some.css');

// html 文本，构建时会压缩`some.html`
require('html!./some.html');

生产环境

生产环境无需关心，从开发环境到生产环境，由coolie代劳，它将模块路径、内容都进行压缩，并且对所有依赖模块进行合并。相关的coolie操作，后文详述。
如下图，是一个典型的生产环境代码：

图示中，第一个模块为入口模块，入口模块的 ID 为 0，依赖了 1,2,3,4,5 共 5 个模块，第 3-7 行分别对应了 1,2,3,4,5 这 5 个模块。其中第1行为 coolie 的构建时间。