多个模块加载

目录结构

我们的目录结构是这样的

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

如图:

img.png

依赖关系

依赖情况如下:

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

img.png

在控制台可以看到:

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 里看到:

img.png

多个模块构建

构建

生产环境下的代码已经写完了,然后我们来构建生产环境代码试试。切换到 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"
        ]
    }
}

目录结构

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

img.png

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

小结

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

  • 无须人为手动修改依赖关系,完全自动化,不需要 grunt、gulp 等这些工具了;
  • 开发环境不需要实时编译;
  • 使用简单,基本上是项目开发时一个配置,到项目结束都不需要修改。
9 条评论
作者
状态
  • 发布于 ,8 次更新
  • 最后更新于
  • 被浏览 2219 次
  • 被评论 9 次
  • 隶属于 文章 版块
  • 归纳于 NodeJS 分类
  • 收录于 跟我学 coolie 专辑
标签
二维码
目录