第2章{2-2 kissy工程构建器 — Bee }

来源：互联网发布：掷茭杯的算法编辑：程序博客网时间：2024/06/06 12:40

kissy工程构建器 — Bee

为了方便演示Kissy的模块加载机制，我们先使用generator-bee工具生成Kissy标准工程。

PS：Kissy新手，建议先使用Bee生成标准工程，然后体会Kissy的loader，不然很容易会有挫败感，直呼Kissy文档坑爹...

Bee生成的文件和demo，是可以保证立马跑起Kissy的loader代码。

安装 generator-bee

工具依赖于NodeJs和npm，二者的安装可以看info文章，这里不再累述。

先安装 yeoman（前端工作流脚手架）和 gulp (前端构建打包工具)： npm install yo gulp -g

再安装 bee： npm install generator-bee -g

npm 天朝网络稳定性很差，如果安装失败，请使用 npm clean （清理npm缓存）后再安装。

mac下别忘记加 sudo 。

如果一直安装不成功，没关系，请clone https://github.com/minghe/bee-demo

使用 Bee 生成目录和代码

创建个名为bee-demo的目录，进入该目录，运行如下命令：

yo bee

会生成如下目录结构：

在浏览器中运行 demo/dev_index.html 看看，如果你看到如下图所示的效果，表示已经运行成功。

看不懂 demo/dev_index.html 中的代码？没关系，下面几节我们会详细说明背后究竟发生了什么。

<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta charset="UTF-8">

<script src="http://g.alicdn.com/kissy/k/1.4.8/??seed-min.js,import-style-min.js" data-config="{combine:true}"></script>


<script>
KISSY.config({
packages: [
{
name: 'bee-demo',
base: 'http://demo.apebook.org/bee-demo/build',
ignorePackageNameInUri: true,
combine: false
}
]}
);
</script>


<script>
KISSY.importStyle('bee-demo/index.css');
</script>
</head>
<body>

<header></header>

<article></article>


<script>
KISSY.use('bee-demo/index');
</script>

</body>
</html>

0 0