1模块标记

coolie-cli 的模块构建方式应该是比较特殊的一类，与 webpack 一样，都是另辟蹊径。

  • webpack：依赖模块放到数组里，数组索引值就是模块 ID。
  • coolie-cli：依赖模块全局标记 ID（三十六进制, 0-z）。
    coolie-cli 可以将长长的物理路径压缩成最短的字符，达到压缩率最大化，而不是将模块直接合并。
  1. // module1.js
  2. define(function(require, exports, module){
  3.     module.exports = 'module1';
  4. });
  6. // module2.js
  7. define(function(require, exports, module){
  8.     module.exports = 'module2';
  9. });
  11. // main.js
  12. define(function(require, exports, module){
  13.     var module1 = require('./long/long/long/path/to/module1.js');
  14.     var module2 = require('./long/long/long/path/to/module2.js');
  16.     alert(module1 + module2);
  17. });

1.1普通的合并构建

  1. // main.js
  2. define('./main.js',[
  3.     './long/long/long/path/to/module1.js',
  4.     './long/long/long/path/to/module2.js'
  5. ],function(r,e,m){
  6.     var a = r('./long/long/long/path/to/module1.js');
  7.     var b = r('./long/long/long/path/to/module2.js');
  8.     alert(a+b);
  9. })
  10. define('./long/long/long/path/to/module1.js',[],function(r,e,m){m.exports='module1'})
  11. define('./long/long/long/path/to/module2.js',[],function(r,e,m){m.exports='module2'})

1.2coolie-cli 构建

  1. // main.js
  2. define('0',[
  3.     '1',
  4.     '2'
  5. ],function(r,e,m){
  6.     var a=r('1');
  7.     var b=r('2');
  8.     alert(a+b);
  9. })
  10. define('1',[],function(r,e,m){m.exports='module1'})
  11. define('2',[],function(r,e,m){m.exports='module2'})

相比普通的合并构建，约节省了 50% 的代码。当项目依赖的模块数量增加后，节省的字节数是多么恐怖！

正因为，coolie-cli 独特的压缩方式，才导致 coolie 模块加载器的配置异常简单。

2构建方式

默认情况下，coolie-cli 会将入口模块和依赖模块全部合并到一个文件内，这个过程和其他构建工具无异。即如上代码所示，main.js（入口模块）依赖了module1.js和module2.js两个模块，所以他们被合并在一起了。

聪明的 coolie-cli，同时还支持模块分块（公共模块自动抽离）和异步模块。

原文: https://coolie.ydr.me/introduction/module-build