kissy工程构建器 -bee,最开始我也是用的这个,但是发现生成的demo执行失败,只加载了css,然后js模块并没有加载进来。
一、首先看dev_index.html
这里有几个需要注意的地方:
base 是引用文件的路径。
name-demo 实际上并没有这个目录名称,但是没关系,我们就把它看做是自己取的名字,然后给ignorePackageNameUri 设置为 true ,就可以解决这个目录名不对的问题。
debug 为了方便测试,我们将默认选择.min.js 改成选择.js ,只要给这个参数设置为true即可。
二、找到index.js文件
这个文件并没存在多大的问题,但是就是执行不成功,又不报错。
那就分析下这段代码的意思,毕竟demo中就是引用的这个文件
首先定义模块名为 index.js,bee-demo/这个是html中name的名字,还必须一致。
然后相应的加载了header和article模块,因为在后面我们需要通过require的方式将这个两个模块的功能引入到这个index.js中来。
定义一个函数包含两个模块中的初始化代码执行,然后通过返回值给这个定义的函数赋值,让这个函数进行来执行整个的代码,这么做的原因是实现模块分离,在html中只需要引用index.js减少http请求。
三、分析下article.js
选择article.js而不选择header.js 是有原因的,因为这个出现问题的坑就在这个文件里面,折腾了我那么久╰_╯。
看到我的注释估计也猜到了出问题的是些什么东西。
在generator-bee之后,根本就没有一个模块叫runtime的"kg/xtemplate/3.3.3/runtime"
这个东西根本就没有,更别说后面的
var XTemplate = require("kg/xtemplate/3.3.3/runtime");
var html = new XTemplate(tpl).render({
title:'this is article',
content:'render by kg/xtemplate'
});
把这个鬼东西注释后,再执行生成的demo就会发现奇迹,终于ok了。