FED

©FrontEndDev.org
2015 - 2024
web@2.22.0 api@2.20.0

coolie入门5-前端开发工程的最佳实践

为了更好的使用 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文件所在的目录。