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 文件所在的目录。

以上是 coolie 入门之前端开发工程的最佳实践 的全部内容, 来源链接: www.h5w3.com/234350.html

回到顶部