经过前面 5 篇文章,基本完全介绍了 coolie 的使用方法和运行原理,本文着重以一个简单的例子入手,简要总结下 coolie 的使用方法。

1、简单实例

分别计算圆形的周长(入口1:length.js)和圆形的面积(入口2:area.js),然后有一个公共的工具库(utils.js)。目录结构如下:

- webroot-dev 开发环境目录
|-- static
|    |-- js
|   |   |-- app
|   |   |    |-- length.js
|   |   |   `-- area.js
|    |   |-- utils.js
|   |   |-- coolie.min-1.1.1.js      模块加载器
|   |   `-- coolie-config.js  模块加载器配置
|   `-- css
|        |-- font.css
|        |-- img.css
|        `-- style.css
|-- views
|   |-- length.html
|   `-- area.html
|-- coolie.json    前端构建配置
`-- readme.md
- webroot-pro    生产环境目录

length.html

<!DOCTYPE html>
<!--
 - 计算圆周长
 - @author ydr.me
 - @create 2015-03-24 16:55
 -->
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>计算圆周长</title>
    <!--coolie-->
    <link rel="stylesheet" href="/static/css/style.css"/>
    <!--/coolie-->
</head>
<body ontouchstart="">
<h1>计算圆周长:</h1>

圆半径:<input type="text" value="0" id="input"/><br>
圆周长:<span id="output">0</span>

<script coolie src="/static/js/coolie.min.js"
        data-config="./coolie-config.js"
        data-main="./length.js"></script>

</body>
</html>

area.html

<!DOCTYPE html>
<!--
 - 计算圆面积
 - @author ydr.me
 - @create 2015-03-24 16:55
 -->
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>计算圆面积</title>
    <!--coolie-->
    <link rel="stylesheet" href="/static/css/style.css"/>
    <!--/coolie-->
</head>
<body ontouchstart="">
<h1>计算圆面积:</h1>

圆半径:<input type="text" value="0" id="input"/><br>
圆面积:<span id="output">0</span>

<script coolie src="/static/js/coolie.min.js"
        data-config="./coolie-config.js"
        data-main="./area.js"></script>

</body>
</html>

length.js

/*!
 * 计算圆的周长
 * @author ydr.me
 * @create 2015-03-24 16:54
 */


define(function (require, exports, module) {
    'use strict';

    var utils = require('../utils.js');
    var $output = document.getElementById('output');

    document.getElementById('input').onkeyup = function () {
        var r = utils.parseFloat(this.value);

        $output.innerHTML = String(2 * utils.PI * r);
    };
});

注意:在script标签上添加coolie属性来标识这个脚本是给 coolie.cli 来构建使用的,保证替换不会出错。

area.js

/*!
 * 计算圆的面积
 * @author ydr.me
 * @create 2015-03-24 16:54
 */


define(function (require, exports, module) {
    'use strict';

    var utils = require('../utils.js');
    var $output = document.getElementById('output');

    document.getElementById('input').onkeyup = function () {
        var r = utils.parseFloat(this.value);

        $output.innerHTML = String(utils.PI * Math.pow(r, 2));
    };
});

2、加载器配置

/webroot-dev/static/js/coolie-config.js

coolie.config({
    base: "./app/"
}).use();

3、构建配置

/webroot-dev/coolie.json:

{
  "js": {
    "src": [
      "./static/js/app/**/*.js"
    ],
    "coolie-config.js": "./static/js/coolie-config.js",
    "dest": "./static/js/",
    "chunk": []
  },
  "css": {
    "dest": "./static/css/"
  },
  "html": {
    "src": [
      "./views/**/*.html"
    ],
    "minify": true
  },
  "resource": {
    "dest": "./static/res/"
  },
  "dest": {
    "dirname": "../webroot-pro/",
    "host": "",
    "versionLength": 32
  },
  "copy": []
}

4、前端构建

coolie build webroot-dev

构建过程

➜  coolie build webroot-dev 

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


                 1/5 => copy files

                 2/5 => build main
                  √  => /static/js/app/area.js
                  √  => /static/js/app/length.js
                  ×  => unchunk modules

                 3/5 => overwrite config
                  √  => base: "./app/"
                  √  => version: "{
                          "area.js": "e633541fdaad38d5a0a86b24c3ad419c",
                          "length.js": "cac2241d618488f567abef6c7c99dd0d"
                        }"
                  √  => callbacks: 0
                  √  => /../webroot-pro/static/js/coolie-config.a08fb1c42a015ae88579ff31af1593bd.js

                 4/5 => build html css
                  √  => /static/fonts/glyphicons-halflings-regular.eot
                  √  => /static/fonts/glyphicons-halflings-regular.woff2
                  √  => /static/fonts/glyphicons-halflings-regular.woff
                  √  => /static/fonts/glyphicons-halflings-regular.ttf
                  √  => /static/fonts/glyphicons-halflings-regular.svg
                  √  => /static/img/apic9517.png
                  √  => /../webroot-pro/static/css/255990a3b6b5b76cf3488ffb76157d45.css
                  √  => /../webroot-pro/static/js/ba1c8824da1cb2b0d3f7e94f2aea8b8d.js
                  √  => /views/area.html
                  √  => /views/length.html
                  √  => /index.html

                 5/5 => generator relationship map
                  √  => /../webroot-pro/relationship-map.json

       build success => copy 7 file(s),
                        build 2 main file(s),
                        build 0 js file(s),
                        build 3 html file(s),
                        build 6 css file(s),
                        build 0 resource file(s),
                        past 191 ms

构建前后目录结构

- webroot-dev 开发环境目录【不变】
- webroot-pro 生产环境目录
|-- static
|    |-- js
|    |   |-- app
|    |   |    |-- area.e633541fdaad38d5a0a86b24c3ad419c.js
|    |   |    `-- length.cac2241d618488f567abef6c7c99dd0d.js
|    |   |-- ba1c8824da1cb2b0d3f7e94f2aea8b8d.js 模块加载器(已经版本管理)
|    |   `-- coolie-config.a08fb1c42a015ae88579ff31af1593bd.js 模块加载器配置
|    `-- css
|        `-- 255990a3b6b5b76cf3488ffb76157d45.css
|-- views
|   |-- length.html
|   `-- area.html
`-- relationship-map.json 资源引用关系地图

length.js

length.cac2241d618488f567abef6c7c99dd0d.js,length 入口模块版本控制:

/*coolie@0.22.4*/
define("0",["1"],function(t,e,n){"use strict";var u=t("1"),i=document.getElementById("output");document.getElementById("input").onkeyup=function(){var t=u.parseFloat(this.value);i.innerHTML=String(2*u.PI*t)}});
define("1",[],function(t,a,e){"use strict";a.parseFloat=function(t){t=parseFloat(t);return isNaN(t)?0:t};a.PI=Math.PI});

area.js

area.e633541fdaad38d5a0a86b24c3ad419c.js,area 入口模块版本控制:

/*coolie@0.22.4*/
define("0",["1"],function(t,e,n){"use strict";var u=t("1"),i=document.getElementById("output");document.getElementById("input").onkeyup=function(){var t=u.parseFloat(this.value);i.innerHTML=String(u.PI*Math.pow(t,2))}});
define("1",[],function(t,a,e){"use strict";a.parseFloat=function(t){t=parseFloat(t);return isNaN(t)?0:t};a.PI=Math.PI});

coolie-config.js

coolie-config.a08fb1c42a015ae88579ff31af1593bd.js 模块加载配置文件:

/*coolie@0.22.4*/
coolie.config({
    base:"./app/",
    debug:!1,
    cache:!0,
    version:{
        "area.js":"e633541fdaad38d5a0a86b24c3ad419c",
        "length.js":"cac2241d618488f567abef6c7c99dd0d"
    }
}).use();

relationship-map.json

relationship-map.json 资源引用关系:

{
    "views/area.html": {
        "css": {
            "static/css/255990a3b6b5b76cf3488ffb76157d45.css": [
                "static/css/font.css",
                "static/css/img.css",
                "static/css/style.css"
            ]
        },
        "js": {},
        "main": "static/js/app/area.js",
        "deps": [
            "static/js/utils.js"
        ]
    },
    "views/length.html": {
        "css": {
            "static/css/255990a3b6b5b76cf3488ffb76157d45.css": [
                "static/css/font.css",
                "static/css/img.css",
                "static/css/style.css"
            ]
        },
        "js": {},
        "main": "static/js/app/length.js",
        "deps": [
            "static/js/utils.js"
        ]
    },
    "index.html": {
        "css": {},
        "js": {},
        "main": ""
    }
}

area.html

这里为了演示,取消了代码压缩

<!DOCTYPE html><html><head lang="zh-cn"> <meta charset="UTF-8"> 
<title>计算圆面积</title> 
<link rel="stylesheet" href="/static/css/255990a3b6b5b76cf3488ffb76157d45.css">
</head><body ontouchstart=""><h1>计算圆面积:</h1>圆半径:
<input type="text" value="0" id="input"/><br>圆面积:
<span id="output">0</span><script 
src="/static/js/ba1c8824da1cb2b0d3f7e94f2aea8b8d.js" 
data-config="./coolie-config.a08fb1c42a015ae88579ff31af1593bd.js" 
data-main="./area.js"></script></body></html>
<!--coolie@0.22.4-->

length.html

这里为了演示,取消了代码压缩

<!DOCTYPE html><html><head lang="zh-cn"> 
<meta charset="UTF-8"> <title>计算圆周长</title> 
<link rel="stylesheet" href="/static/css/255990a3b6b5b76cf3488ffb76157d45.css">
</head><body ontouchstart=""><h1>计算圆周长:</h1>
圆半径:<input type="text" value="0" id="input"/><br>
圆周长:<span id="output">0</span>
<script src="/static/js/ba1c8824da1cb2b0d3f7e94f2aea8b8d.js" 
data-config="./coolie-config.a08fb1c42a015ae88579ff31af1593bd.js" 
data-main="./length.js"></script></body></html>
<!--coolie@0.22.4-->

5、源码下载

fhttps://github.com/cloudcome/coolie-example/releases/tag/1.1.1