利器

工欲善其事，必先利其器。

在开始 hello world 之前，先要学会使用以下工具。

nodejs、npm

安装 nodejshttps://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

FED

跟我学 coolie 之 2 模块化 hello world

利器