Seajs 实践(二)—— 使用 spm3 构建项目

回顾

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

构建的意义

可是在实际的开发当中，一般会利用工具把多个 js 文件进行合并和压缩，减小服务器的请求次数，下降服务器的压力。

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

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 会自动在代码外添加

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

包装(若是没有去掉，构建后会发现原 define 外又添加了一层 define，会致使代码不能执行)。

安装 spm3

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

npm install spm -g

输入

spm -v

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

建立 package.json

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

package.json 能够手动建立，也能够用 npm init 等方法去建立。

{
  "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

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

spm build

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

构建完成

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

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

打开游戏，能够发现原来的3个 js 文件，如今只剩下 main.js 一个了。

这里能够查看最终的代码。

最后

因为 spm3 从 CMD 模块转向了 CommonJS 因此会致使一个问题，去掉 define 以后线下文件不能直接打开调试，因此 Seajs 推出了一个 seajs-wrap 的插件能够动态添加

define(function(require, exports, module) {})

seajs-wrap 在 sea.js 以后引入。

<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/