coolie 入门之前端开发工程的最佳实践
为了更好的使用 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文件所在的目录。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： node 模块 marked
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论