为了更好的使用 coolie 进行构建工作和前端项目的合理划分,以下是前端开发工程的最佳实践。

1、划分原则

将前端开发工程分为两部分,一部分是开发环境(dev,development)下,一部分是生产环境(pro,production)下的。如此,前端开发工程一级目录为:

- webroot-dev 开发环境根目录
- webroot-pro 生产环境根目录

2、归类原则

首先,按照功能分为静态资源根目录和模板根目录。二级目录即是:

- webroot-dev
|-- static 静态资源根目录
|-- views 模板根目录
`-- readme.md

然后,按照资源的类型进行归类,比如样式、脚本、图片、字体等。三级目录即是:

- webroot-dev
|-- static
|    |-- js 脚本根目录
|    |-- css 样式根目录
|    |-- img 图片根目录
|    `-- fonts 字体根目录
|-- views
`-- readme.md

最后,在脚本目录,按照业务出口和业务依赖,划分四级之后的目录(以脚本为例,样式、图片、字体可以参考脚本的划分原理):

- webroot-dev
|-- static
|    |-- js
|    |    |-- app 业务模块入口模块
|    |    |    |-- admin 后台模块
|    |    |    `-- front 前台模块
|    |    |        |-- page1.js 页面1的模块入口
|    |    |        `-- page2.js 页面2的模块入口
|    |    |-- libs 开发脚本模块库
|    |    `-- widget 项目依赖模块
|    |        |-- admin 后台依赖模块
|    |        |-- front 前台依赖模块
|    |        `-- common 通用依赖模块
|    |-- css
|    |-- img 
|    `-- fonts
|-- views
`-- readme.md

3、模块加载器配置

coolie.config({
    // base 目录标记了模块入口文件的参考目录
    // base 目录地址相对于页面的模块加载器目录,详见第4点。
    // 加载器目录:/static/js/coolie.min.js
    // base 目录:/static/js/app/
    "base": "./app/"
}).use(); // use 表示开始使用模块加载器

4、模板文件

为了更好的配合 coolie 进行前端构建,模板(html)页面需要这样来书写:

<!DOCTYPE html>
<!--
 - home
 - @author ydr.me
 - @create 2014-12-04 16:18
 -->
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<!-- 注意点1 -->
<!--coolie-->
<link rel="stylesheet" href="/static/css/libs/0-normalize.css"/>
<link rel="stylesheet" href="/static/css/libs/1-base.css"/>
<link rel="stylesheet" href="/static/css/libs/2-unit-alert.css"/>
<link rel="stylesheet" href="/static/css/libs/2-unit-badge.css"/>
<link rel="stylesheet" href="/static/css/libs/2-unit-breadcrumb.css"/>
<link rel="stylesheet" href="/static/css/libs/2-unit-form.css"/>
<link rel="stylesheet" href="/static/css/libs/2-unit-grid.css"/>
<link rel="stylesheet" href="/static/css/libs/2-unit-label.css"/>
<link rel="stylesheet" href="/static/css/libs/2-unit-table.css"/>
<link rel="stylesheet" href="/static/css/libs/2-unit-text.css"/>
<link rel="stylesheet" href="/static/css/libs/3-font-icon.css"/>
<!--/coolie-->
<!--coolie-->
<link rel="stylesheet" href="/static/css/app/front/0-grid.css"/>
<link rel="stylesheet" href="/static/css/app/front/1-header.css"/>
<link rel="stylesheet" href="/static/css/app/front/2-footer.css"/>
<link rel="stylesheet" href="/static/css/app/front/3-container.css"/>
<!--/coolie-->
<title>主页 - 前端开发社区</title>
</head>
<body ontouchstart="" class="p-home">


<!-- 页面主体 -->


<!-- 注意点2 -->
<script src="/static/js/coolie.min.js"
        data-config="./coolie-config.js"
        data-main="./front/home.js"></script>

</body>
</html>
  • 注意点1:样式文件的前后使用<!--coolie--><!--/coolie-->来包裹,表示这一部分的样式文件会进行压缩合并和版本管理。
  • 注意点2:脚本文件使用coolie作为模块加载器,data 属性标明了模块加载器的一些配置信息。
    • data-config:模块加载器的配置文件,相对于模块加载器的目录。
    • data-main:当前页面的模块入口文件,相对于模块配置文件的base文件所在的目录。