跟我学 coolie 之模块化 hello world
在开始 hello world 之前，先要学会使用以下工具。
nodejs、npm
安装 nodejs，官网：https://nodejs.org/（可以参考阿里云 ECS 使用心得1：使用 yum 安装 nodejs/npm 环境），在这里 nodejs 是以下工具的运行环境。
安装完成后，使用以下命令检验下：
node -v
npm -v
安装 coolie.cli
coolie.cli 是一个前端模块化管理和构建工具。cli 的意思是 comman line interface（命令行接口），后文会提到 coolie.js，它是前端使用的模块加载器，要加以区分。
coolie.cli：前端构建工具。coolie.js：前端模块加载器。
全局安装 coolie.cli，因为 coolie.cli 需要全局运行，因此需要全局安装他：
npm install -g coolie
安装完成后：
➜ coolie version
╔═════════════════════════════════════════╗
║ coolie@0.21.6 ║
║ The front-end development builder. ║
╚═════════════════════════════════════════╝
local version => 0.21.6
check update => wait a moment...
coolie.js => 0.14.5
coolie.cli => 0.21.6
这些字样，表示你的安装成功了。输入：
➜ coolie
╔═════════════════════════════════════════╗
║ coolie@0.21.6 ║
║ The front-end development builder. ║
╚═════════════════════════════════════════╝
coolie book => 打开 coolie book
coolie version => 输出版本号
coolie pull [path] => 下载 coolie.min.js 到指定目录
coolie alien [path] => 下载 alien/ 到指定目录
coolie config [path] => 在指定目录生成`coolie-config.js`
coolie json [path] => 在指定目录生成`coolie.json`
coolie build [path] => 在指定目录根据`coolie.json`配置文件执行构建HTML/JS/CSS
开始
下载 coolie.js
在你的工作目录，下载 coolie.js，使用
# 切换到你的工作目录
➜ coolie pull
╔═════════════════════════════════════════╗
║ coolie@0.21.6 ║
║ The front-end development builder. ║
╚═════════════════════════════════════════╝
pull coolie.min.js => https://raw.githubusercontent.com/cloudcome/coolie/master/coolie.min.js
pull coolie.min.js => /Users/zhangyunlai/development/github/coolie-example/webroot-dev/static/js/coolie.min.js
表明模块加载器已经下载完毕了。
新建 coolie-config.js
可以使用命令来创建：
coolie config
会以一问一答的形式询问你，然后根据你的回答来创建 coolie-config.js
➜ test coolie config
╔═════════════════════════════════════════╗
║ coolie@0.21.6 ║
║ The front-end development builder. ║
╚═════════════════════════════════════════╝
tips => 以下操作留空回车表示同意默认配置。
file path => /path/to/coolie-config.js
warning => 如果上述目录不正确，请按`ctrl+C`退出后重新指定。
1/2 => 请输入`base`值，默认为“./app/”：
`base`路径是相对于`coolie-config.js`所在的目录，即当前目录：
/path/to/
`base`即为入口模块的基准路径。
2/2 => 文件内容为：
coolie-config.js => coolie.config({
"base": "./app/"
}).use();
confirm => 确认文件内容正确并生成文件？（[y]/n）
√ => /path/to/coolie-config.js
上述的命令，1/2 表示一共有 2 个步骤，当前是第 1 步，最后会在当前目录生成coolie-config.js。当然，如果当前目录已经有重名的文件，那么会以警告提示你的。
最后可以看到文件的内容很简单，也可以手动新建。
base：入口模块的参考路径。base路径是参考coolie-config.js的。上述，模块加载与模块配置文件是在同一目录，那么base的值就是./，也表明了入口模块在当前目录。
这里表示了coolie.js、base与入口模块之间的路径关系：
base => 相对于 coolie-config.js
入口 => 相对于 base => 相对于 coolie-config.js + base
coolie-config.js 的内容为：
coolie.config({
"base": "./"
}).use();
新建 index.js
同样，在当前目录新建index.js：
define(function (require, exports, module){
alert('Hello world!');
});
文件内容足够简单，下面说明下各个关键词的意思：
define：定义一个模块。require：引用一个模块，开发环境下不能更改其名称。exports：模块出口对象。module：模块出口对象父级。
这里为什么要有exports和module（更多：exports 和 module.exports 的区别），此文不详述。
新建 html
然后，新建index.html
<!doctype html>
<meta charset="utf8">
<script coolie src="./coolie.min.js"
data-config="./coolie-config.js"
data-main="index.js"></script>
分别来解释 script 标签上的各个属性的意思：
coolie：表示该标签使用了 coolie.js，必填。src：模块加载的引用路径，必填。data-config：模块加载器配置文件，相对于coolie.js，必填。data-main：当前页面的入口模块，相对于coolie-config.js里的base配置，必填。
运行 index.html
使用浏览器打开刚刚完成编写的 index.html，可以看到预期要弹出的警告框。
打开浏览器控制台，可以看到模块的加载信息：
coolie modules
coolie.min.js:7 file:///path/to/index.js
coolie.min.js:7 past 7ms
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论