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/