Nodejs javascript 模块加载器——coolie

Nodejs javascript 模块加载器——coolie

1、javascript模块化

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

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

2、javascript模块加载器

2.1、coolie 优势

  • coolie （苦力）是作者在近期书写的一款模块加载器，相比市面上的其他模块加载器，有以下优势：
  • 轻量，良好的身材，仅支持高级现代浏览器，没有繁多的路径别名，和 NodeJS 一样，仅支持本地模块。
  • 小巧，尽量少的接口（2个接口）和配置（2个配置）。
  • 优雅，合理的接口和配置。
  • 安全，尽量不侵入全局变量（2个，分别是 define 和 coolie），放心编程。
  • 方便，配套的发布构建工具，为之量身打造。
  • 省心，一键构建，无须人工干预，没有繁多和难以理解的构建配置。

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'
});

注意点

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

2.5、coolie 使用

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

注意点

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

3、模块构建工具

see

3.1、介绍

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

3.2、优势

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

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

3.3、特点

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

4、链接


10 回复

Nodejs JavaScript 模块加载器——Coolie

1. JavaScript模块化

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

目前，主流的模块化规范是AMD、CommonJS等，这些规范有着良好的设计和优雅的接口，已经被广泛接受。例如，RequireJS和SeaJS就是支持这些规范的模块化加载器。

2. JavaScript模块加载器

2.1 Coolie 优势

Coolie（苦力）是一款由作者近期编写的模块加载器，它具有以下几个优势：

  • 轻量：仅支持高级现代浏览器，没有繁多的路径别名，仅支持本地模块。
  • 小巧：只有两个接口和两个配置。
  • 优雅：合理的接口和配置。
  • 安全：尽量不侵入全局变量，仅包含两个全局变量（define 和 coolie）。
  • 方便：配套的发布构建工具，为其量身打造。
  • 省心：一键构建，无需人工干预，简化了复杂的构建配置。
2.2 本地开发环境

在开发环境下，Coolie要求显式地写明模块路径，不能省略文件后缀。例如，模块入口文件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的配置可以通过coolie.config来设置，包括基础路径base和模块文件版本version：

coolie.config({
    // 入口模块的基准路径
    base: './',
    
    // 模块文件版本，用于清除文件缓存
    version: 'abc123'
});

注意：

  • base参数配置，与Sea.js有所不同。
  • base参数是相对于coolie.js所在路径的。
  • base参数也是入口模块的相对路径。
  • version版本号在开发环境下可以为空，构建时会自动更新版本号以清除生产环境下的缓存。
2.5 Coolie 使用

使用Coolie加载模块需要手动调用.use()方法：

// 运行入口模块路径
coolie.use('./index.js');

注意：

  • 参数是入口模块路径，而不是入口模块名称。
  • 如果在<script>标签中设置了data-main属性，则可以省略.use()参数。例如：
    <script src="./coolie.js" data-main="./index2.js"></script>

3. 模块构建工具

Coolie配套的模块构建工具已在npmjs官方上线，可以在GitHub上找到更多API说明。

3.1 介绍

Coolie构建工具旨在提供一种优雅、易用且安全的方式来构建和压缩模块。

3.2 优势

Coolie构建工具的优势包括：

  • 优雅的API。
  • 易于使用，生成详细的配置文件。
  • 不修改任何源文件。
  • 压缩所有可压缩的内容。
3.3 特点

更多API说明，请移步GitHub项目：

通过上述内容，你可以了解Coolie作为一个轻量、简洁的JavaScript模块加载器的特点和使用方法。


觉得构建很奇怪，模块id是0，1，2这样的序号，那么这是要求页面上只能use一个js不然会有模块id重名？

连核心匹配的正则都是seajs的，还是乖乖用seajs吧，方便

cube 来围观 ，https://github.com/node-cube/cube AMD，CMD写起来多类，要像node一样写，才省心

这名字起的，作践自己嘛

lithe

commonjs

互粉吧，啥也别说了。打酱油的路过。

学习

怎么加载相关的Css?

这样写死路径,重构的时候是不是很麻烦呢?

Node.js JavaScript 模块加载器——coolie

Coolie 是一个轻量级的模块加载器，适用于现代浏览器。它旨在提供一个简单、优雅的接口，同时保持最小的侵入性。Coolie 的主要特点是支持本地模块，简化了模块的加载和构建过程。

2.2、本地开发环境

在开发环境中，你需要明确地指定模块路径和依赖项。Coolie 不允许省略文件扩展名和模块 ID。

模块入口：./index.js

define(function (require) {
    var num = require('./abc.js');
    var text = require('text!./def.txt');

    alert(num + text); // => "123这里是一串纯文本"
});

依赖模块：./abc.js

define(function (require, exports, module) {
    module.exports = 123;
});

依赖文本：./def.txt

这里是一串纯文本

2.3、生产环境下

在生产环境下，Coolie 会优化模块 ID 和路径，以提高性能并减少文件大小。

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 提供了简单的配置选项，如基础路径和版本号。

coolie.config({
    base: './',
    version: 'abc123'
});

2.5、Coolie 使用

在运行 Coolie 时，需要手动调用 .use() 方法来加载入口模块。

coolie.use('./index.js');

如果 <script> 标签中设置了 data-main 属性，可以省略 .use() 方法中的参数。

<script src="./coolie.js" data-main="./index2.js"></script>

总结

Coolie 是一个简洁、高效的模块加载器，适合于现代浏览器的开发和生产环境。它通过提供清晰的 API 和配置选项，帮助开发者更高效地管理模块和构建项目。

回到顶部