回顾

上一篇文章中,利用 Seajs 对 2048 游戏进行了模块化。现在我们可以看到,在页面中使用seajs.use("game/main") 就能够自动加载其余的2个js文件。

2048网络请求

构建的意义

但是在实际的开发当中,通常会利用工具把多个 js 文件进行合并和压缩,减少服务器的请求次数,降低服务器的压力。

然而,使用传统的压缩工具对 CMD 模块进行压缩并不奏效,原因在于我们在写CMD模块的时候写的都是“匿名模块”,所以在使用普通工具合并之后 seajs 并不能识别出每一个“匿名模块”。因此,在合并之前还需要多一个步骤,就是将我们手写的 CMD 模块使用构建工具转换为 Modules/Transport 格式:

1
2
3
define("id", ["dep-1", "dep-2"], function(require, exports, module) {
// code
})

第一个参数id 用于识别各个模块。第二个参数指明该模块所依赖的模块,第三个就是原来写的函数。

构建过程

spm3 介绍

spm(static package manager) 静态包管理工具,可以使用它来对CMD模块进行构建。spm3 是 spm 的新版本,它集成了spm-build-deps 的功能,可以直接使用它来构建。

spm3 与 spm2 的差异非常大,了解更多可以看《spm3 发布通告》《spm@3.0 和 spmjs.org 的未来》 两篇文章。

去掉 CMD 模块的包装

spm3 当中,支持的书写规范从 CMD 模块 转向了 CommonJS。因此在构建之前,要先把原 CMD 模块的 define 包装去掉。构建之后 spm3 会自动在代码外添加

1
define("id", ["dep-1", "dep-2"], function(require, exports, module)

包装(如果没有去掉,构建后会发现原 define 外又添加了一层 define,会导致代码不能执行)。

安装 spm3

要安装 spm3 先要安装 nodejs(这个应该大家都安装了吧)。然后,打开命令行工具安装 spm

1
npm install spm -g

输入

1
spm -v

出现版本号3.x.x安装成功。

创建 package.json

spm 使用与 npm 同样的文件 package.json 来描述要构建的项目。

package.json 可以手动创建,也可以用 npm init 等方法去创建。

1
2
3
4
5
6
7
8
9
10
{
"name": "2048",
"version": "1.0.0",
"description": "2048 with seajs",
"author": "acwong",
"license": "MIT",
"spm": {
"main": "static/game/main.js"
}
}

spm 字段是包含与 spm 构建相关的一些属性。这里我们把入口文件定义为 main.js (默认为 index.js)。其余的属性可以参考spm3官网的介绍

build

在项目的目录打开命令行工具,输入构建命令

1
spm build

等待一段时间,构建完成。

构建完成

构建完成之后,可以发现项目目录下多了一个文件夹 dist,这个就是存放构建后代码的地方。现在只要在页面文件中改动一下构建后的路径,就可以运行游戏了。

1
2
3
4
5
seajs.config({
base: "../dist/",
});
// 构建后入口文件的id
seajs.use("2048/1.0.0/static/game/main");

打开游戏,可以发现原来的3个 js 文件,现在只剩下 main.js 一个了。

2048构建后网络请求

这里可以查看最终的代码。

最后

由于 spm3 从 CMD 模块转向了 CommonJS 所以会导致一个问题,去掉 define 之后线下文件不能直接打开调试,所以 Seajs 退出了一个 seajs-wrap 的插件可以动态添加

1
2
3
4
5
6
7
8
define(function(require, exports, module) {})
```

seajs-wrap 在 *sea.js* 之后引入。

```html
<script src="path/to/sea.js"></script>
<script src="path/to/seajs-wrap.js"></script>

虽然有了这个插件,但是我认为还是不太便于使用,希望未来的版本可以有更好的解决方案。了解更多请戳…

这里只是简单谈谈我自己的一次实践过程,seajs还有更多强大的功能等着我们去学习。

感谢您的阅读,有不足之处请为我指出。

参考

  1. Develop A Package – spmjs.io
  2. 为什么要有约定和构建工具
  3. 为什么 SeaJS 模块的合并这么麻烦
  4. seajs-wrap 中文文档

本文地址 http://blog.acwong.org/2014/11/16/2048-with-seajs-and-spm3/