跟我学 coolie 多模块加载与构建

Question

多个模块加载

目录结构

我们的目录结构是这样的

src
|-- index.js
|-- path1
|	|-- 1.js
|	`-- path2
|		|-- 2.js
|		`-- path3
|			`-- 3.js
|-- index.html
|-- coolie.js
|-- coolie-config.js
`-- coolie.json

如图：

依赖关系

依赖情况如下：

index.js => ./path1/1.js => ./path2/2.js => ./path3/3.js

代码

index.js

define(function (require, exports, module){
    require('./path1/1.js');
    console.log(module.id);
    alert('Hello world!');
});

path1/1.js

define(function (require, exports, module){
    require('./path2/2.js');
    console.log(module.id);
});

path1/path2/2.js

define(function (require, exports, module){
    require('./path3/3.js');
    console.log(module.id);
});

path1/path2/path3/3.js

define(function (require, exports, module){
    console.log(module.id);
});

运行

安装本地静态服务器（sts），当然你也可以使用其他的静态服务器。

npm i -g sts

切换到 src 目录，执行

sts 19092

浏览器会自动打开，并弹出 hello world

在控制台可以看到：

coolie modules
coolie.min.js:7 module http://localhost:19098/index.js
coolie.min.js:7 module http://localhost:19098/path1/1.js
coolie.min.js:7 module http://localhost:19098/path1/path2/2.js
coolie.min.js:7 module http://localhost:19098/path1/path2/path3/3.js
coolie.min.js:7 past 82ms
3.js:2 http://localhost:19098/path1/path2/path3/3.js
2.js:3 http://localhost:19098/path1/path2/2.js
1.js:3 http://localhost:19098/path1/1.js
index.js:3 http://localhost:19098/index.js

在 network 里看到：

多个模块构建

构建

生产环境下的代码已经写完了，然后我们来构建生产环境代码试试。切换到 src 目录，执行：

coolie build

输出：

   ╔═════════════════════════════════════════╗
   ║   coolie@0.21.6                         ║
   ║   The front-end development builder.    ║
   ╚═════════════════════════════════════════╝

                 1/5 => copy files

                 2/5 => build main
                  √  => /Users/zhangyunlai/development/test/coolie-demo/src/index.js
                  ×  => unchunk modules

                 3/5 => overwrite config
                  √  => base: "./"
                  √  => version: "{
                          "index.js": "90a5f192d59e3c1bb9ad4c83928fa1a6"
                        }"
                  √  => callbacks: 0
                  √  => /Users/zhangyunlai/development/test/coolie-demo/dest/coolie-config.f91f4f0c69bfad8202bb897fd1968e5b.js

                 4/5 => build html css
                  √  => /Users/zhangyunlai/development/test/coolie-demo/src/index.html

                 5/5 => generator relationship map
                  ×  => unuse main file: index.js
                  √  => /Users/zhangyunlai/development/test/coolie-demo/dest/relationship-map.json

       build success => copy 0 file(s),
                        build 1 main file(s),
                        build 0 js file(s),
                        build 1 html file(s),
                        build 0 css file(s),
                        build 0 resource file(s),
                        past 164 ms

依赖分析

我们先来看下 relationship-map.json 内容是否正确：

{
    "index.html": {
        "css": [],
        "main": "index.js",
        "deps": [
            "path1/1.js",
            "path1/path2/2.js",
            "path1/path2/path3/3.js"
        ]
    }
}

不错，依赖分析还是正确的。切换到dest目录，打开一个静态服务器：

cd ../dest
sts 19093

此时浏览器会自动打开，并弹出“Hello world”。此时，我们看看控制台：

index.0910eb5c7b2f40e3.js:5 3
index.0910eb5c7b2f40e3.js:4 2
index.0910eb5c7b2f40e3.js:3 1
index.0910eb5c7b2f40e3.js:2 0

看下index.90a5f192d59e3c1bb9ad4c83928fa1a6.js源代码：

/*coolie@0.21.6*/
define("0",["1"],function(l,o,e){l("1");console.log(e.id);alert("Hello world!")});
define("1",["2"],function(n,o,e){n("2");console.log(e.id)});
define("2",["3"],function(n,o,e){n("3");console.log(e.id)});
define("3",[],function(n,o,e){console.log(e.id)});

如上，代码很清晰明了，一行一个模块。此时的依赖关系是这样的：

0 => 1 => 2 => 3

此时的对应关系是

0 <=> index.js
1 <=> path1/1.js
2 <=> path1/path2/2.js
3 <=> path1/path2/path3/3.js

版本管理

现在来看下 coolie-config.f91f4f0c69bfad8202bb897fd1968e5b.js：

/*coolie@0.21.6*/
coolie.config({base:"./",debug:!1,cache:!0,version:{
"index.js":"90a5f192d59e3c1bb9ad4c83928fa1a6"}}).use();

非常正确。

资源引用关系

看看 relationship-map.json：

{
    "index.html": {
        "css": {},
        "js": {},
        "main": "index.js",
        "deps": [
            "path1/1.js",
            "path1/path2/2.js",
            "path1/path2/path3/3.js"
        ]
    }
}

目录结构

最后来看下构建前后的目录结构：

无用的文件，不会带到构建目录，保持纯净。

小结

coolie 在处理 JS 模块的依赖分析、构建上：

• 无须人为手动修改依赖关系，完全自动化，不需要 grunt、gulp 等这些工具了；
• 开发环境不需要实时编译；
• 使用简单，基本上是项目开发时一个配置，到项目结束都不需要修改。