javascript 模块加载器——coolie

野性酷女 2022-07-15 11:16 189阅读 0赞

# 1、javascript模块化 #

javascript 模块化是随着 javascript 的工作量逐步增加而产生的必然结果，近年来，javascript 模块化已经诞生了部分标准，也已经在下一代的 javascript 官方标准里提出了草案。

目前，主流的模块化规范是 AMD、CommonJS等，他们良好的规范，优雅的接口设计，合理的设计模式被很多前端开发工程师所接受，并且也有很多模块化加载器也支持他们，例如 requireJS、seaJS等。

# 2、javascript模块加载器 #

## 2.1、coolie 优势 ##

coolie （苦力）是作者在近期书写的一款模块加载器，相比市面上的其他模块加载器，有以下优势：

1.  轻量，良好的身材，仅支持高级现代浏览器，没有繁多的路径别名，和 NodeJS 一样，仅支持本地模块。
2.  小巧，尽量少的接口（2个接口）和配置（2个配置）。
3.  优雅，合理的接口和配置。
4.  安全，尽量不侵入全局变量（2个，分别是 define 和 coolie），放心编程。
5.  方便，配套的发布构建工具，为之量身打造。
6.  省心，一键构建，无须人工干预，没有繁多和难以理解的构建配置。

## 2.2、本地开发环境 ##

开发环境下，不显式模块ID和模块依赖，模块路径必须写完整：

模块入口：`./index.js`

// 开发环境不能写模块ID
    define(function (require){
        // 模块依赖，不能省略文件后缀
        var num = require('./abc.js');
        var text = require('text!./def.txt');
    
        alert(num + text);
        // => "123这里是一串纯文本"
    });

依赖模块：`./abc.js`

// 开发环境不能写模块ID
    define(function (require, exports, module){
        // 模块导出
        module.exports = 123;
    });

依赖文本：`./def.txt`

这里是一串纯文本

## 2.3、生产环境下：    ##

发布之后，模块入口：`./index.js?v=abc123`

define('0', ['1', '2'], function (a){
        var b = a('1');
        var c = a('2');
    
        alert(b+c);
        // => "123这里是一串纯文本"
    });
    define('1', [], function (a, b, c){
        c.exports = 123;
    });
    define('2', [], function (a, b, c){
        c.exports = '这里是一串纯文本';
    });

## 2.4、coolie配置 ##

coolie.config({
        // * 入口模块的基准路径，也可以写绝对路径
        // `base`是相对于`coolie.js`所在的路径的，因此只要`coolie.js`路径不变，配置文件无论被哪个文件引用都没关系
        // 可选，默认为`coolie.js`所在的路径
        base: './',
    
        // * 模块文件版本，用于清除文件缓存，常用于发布到生产环境上，具体细节查看`coolie`发布工具
        // 比如入口文件是`index.js`，那么实际请求的路径为`/path/to/index.js?_=abc123`
        // 可选，默认为空
        version: 'abc123'
    });

注意点

1.  `base`参数配置，与`sea.js`有些出入，请注意。
2.  `base`参数是相对于`coolie.js`所在路径的。
3.  `base`参数也是入口模块的相对路径。
4.  `version`版本号在开发环境下可以为空，构建时会自动更新版本号以便清除生产环境下的缓存。

## 2.5、coolie 使用    ##

// 运行入口模块路径，注意这里没有回调
    // 模块路径相对于`config.base`
    coolie.use('./index.js');

注意点

1.  必须手动调用`.use()`方法。
2.  参数是入口模块路径，不是入口模块名称。
3.  为了配置文件的重用性，当`coolie.js`所在的`script`指定了`data-main`属性，内联属性优先级最高，因此`.use`参数此时可以为空。 如：`<script src="./coolie.js" data-main="./index2.js"></script>`，此时入口模块就为相对于`config.base`的`./index2.js`文件。 此种情况会在控制台输出提示。

# 3、模块构建工具    #

## 3.1、介绍    ##

配套的模块构建工具 coolie（苦力），已在 npmjs 官方上线。作者之前也使用过 spm3 打包，感觉还是太复杂了，后来自制了 apb，再后来就索性自己写了一整套东西，包括模块加载器和模块构建工具。尽量保持它们的良好身材，只做它们擅长和分内的事情。

## 3.2、优势 ##

相比其他构建工具，他有以下优势：

1.  优雅，大众化和易理解的API。
2.  易用，全部自动生成配置文件，每一步都有详细说明。
3.  安全，不修改任何源文件。
4.  极致，全部模块，压缩所有可压缩的内容，包括模块ID、模块依赖路径、局部变量等。

## 3.3、特点 ##

![20141029213657029387074909.jpg][]

更多API说明，请移步 github 项目，链接如下。

# 3、链接 #

*  coolie模块加载器：[https://github.com/cloudcome/coolie][https_github.com_cloudcome_coolie]
 *  coolie模块构建工具：[https://github.com/cloudcome/nodejs-coolie][https_github.com_cloudcome_nodejs-coolie]

[20141029213657029387074909.jpg]: http://qianduanblog.com/uploads/post/20141029213657029387074909.jpg
[https_github.com_cloudcome_coolie]: https://github.com/cloudcome/coolie
[https_github.com_cloudcome_nodejs-coolie]: https://github.com/cloudcome/nodejs-coolie