coolie入门6-coolie 实例演示
经过前面 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、源码下载
https://github.com/cloudcome/coolie-example/releases/tag/1.1.1
</>