Koa-demo NPM | npm.io

koa-demo

简介

koa-demo助力前端开发，提供动静结合的前端项目server功能；配合狸猫使用，可以将demo项目模板翻译成VM、PHP、Node等目标项目模板，促进前后端分离。

安装使用

在tap中使用（推荐）

tap命令行工具集成了koa-demo，支持通过命令行启动前端项目server，具体请参考tap文档。

作为lib中使用

通过tnpm安装：

tnpm install koa-demo

在nodejs代码中使用：

var koa = require('koa');
var app = koa();
var demo = require('koa-demo');
app.use(demo({
  path: '/Users/xhowhy/dev/tm/detail-m'
}));
app.listen(3000);

特性

静态资源访问

koa-demo支持基本的静态资源访问，用来在本地访问项目静态资源，例如：

http://127.0.0.1/demo/index.html
http://127.0.0.1/src/seed.js
http://127.0.0.1/src/base.css

动态页面开发

koa-demo基于nunjucks、feloader和if提供了动态页面开发的功能，可以用在动态demo的开发过程中，动态文件以.ntpl为扩展名：

http://127.0.0.1/src/page/index.ntpl?param=1

模板语法请参考狸猫(Civet)制定的标准模板语法。

模板转换

当动态页面开发完成后，可以通过狸猫(Civet)对项目模板进行转换，转换成VM、PHP等项目模板。

整体设计

npm.io

快速上手

项目目录总览

以tm/sample为例，基于koa-demo开发的项目，具有以下目录结构：

└── src                      #源码目录                  
    ├── global.json            #mui-seed 【FELoader也需要依赖该文件分析依赖关系】
    ├── index.css              #页面css文件
    ├── index.js               #页面js文件
    ├── mod1.css               #模块css文件
    ├── mod1.js                #模块js文件
    ├── mod1.ntpl              #模块模板文件
    ├── page                   
    │   ├── index.ntpl         #页面模板文件
    │   └── layout
    │       └── index.ntpl     #页面layout模板文件
    ├── seed.js                #项目依赖关系（用于同步加载）
    └── seed.json              #项目依赖关系（用于异步加载）
├── data                     #模拟模板数据目录
    ├── page                   
    │   └── index.json         #页面数据文件
    └── mod1.json              #模块数据文件

创建page和layout模板

在src目录下创建page目录，在page目录下创建index.ntpl文件
在src/page目录下创建layout目录，在layout目录下创建index.ntpl

引入子模板和layout

在src下创建mod1.ntpl，在page/index.ntpl通过{% template "mod1" %}引入
在page/layout/index.ntpl中补充完整的html框架代码后，在<body>和</body>之间添加{{page_placeholder}}
修改page/index.ntpl后，就可以访问你创建的页面：http://127.0.0.1:3000/src/page/index.ntpl

assets按需加载用法（feloader）

新增seed文件
1. 在项目根目录下新增global.json，内容为最新版的mui-seed，用来引入公共组件（例如kissy、mui）
2. 通过gulp-code的依赖生成功能（dep），生成项目依赖文件seed.json
在模板中声明依赖，例如：
- 在mod1.ntpl中声明依赖mod1.js：{% require "sample/mod1", "head" %}
- 在mod1.ntpl中声明依赖mod1.css：{% require "sample/mod1.css", "head" %}
- 在page/index.ntpl中依赖index.js：{% require "sample/index", "foot" %}
- 在page/index.ntpl中依赖index.css：{% require "sample/index.css", "foot" %}
  注：
  ① 第二个分组参数决定assets的输出位置（“head” or “foot”，目前仅支持这两这种）；
  ② 针对css，如果不带第二个参数，内置的默认值为“head”；
  ③ 针对js，如果不带第二个参数，内置的默认值为“foot”。
插入assets占位
- 说明：css的占位在页头，js的占位在页尾
- 步骤：
  1. 在src/page/layout/index.ntpl中的head标签之间添加{% injectStyle "head" %}，在</body>标签前添加{% injectScript "foot" %}
  2. 这时候再访问http://127.0.0.1:3000/src/page/index.ntpl，就可以看到页头和页尾分别插入了模板中依赖的css和js
  注：
  ① injectScript、injectStyle的参数“head”或“foot”必带