轉載自:https://github.com/spmjs/spm/wiki/Hello-spm%EF%BC%9A%E4%BD%BF%E7%94%A8-spm-%E5%92%8C-SeaJS-%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%E4%B8%AD%E5%9E%8B%E9%A1%B9%E7%9B%AE

現在我們要正兒八經開始開發一個叫 hello-spm 的專案了，別笑，雖然只是個為了讓你更好的瞭解 SPM 而杜撰出來的專案，但也五臟俱全。

在正式開始之前，我還是要囉嗦一句，所有的範例程式碼都是基於 SeaJS 的， 請確保你已經知道該怎麼使用 SeaJS 了。

建立專案目錄

我們先來看看專案的整體結構

hello-spm/  assets/   hello/   util/   sea-modules/   package.json  index.html    

• 考慮到真實的專案通常包含前後端的程式碼，所有前端程式碼放在 assets/ 。
• hello 和 util 是為本專案編寫的模組。
• sea-modules/ 用於存放安裝和部署的模組。如果你的專案基本都是基於 SeaJS 和 SPM 的，你可以把這個目錄放置在和專案目錄平級的路徑下，以便各專案公用。
• package.json 為模組打包部署的總體配置。
• index.html 為專案頁面。

安裝需要的模組

顯然，我們需要用到 seajs 和 jquery，所以要使用 spm install

開啟命令列工具，將路徑切換至 sea-modules/ ，執行：

spm install seajs spm install [email protected] 

建立模組

回想一下 index.html 執行的效果，多處用到了隨機數，例如 "hello spm !" 的單個字元大小，字串出現在頁面中的位置以及字串在頁面上停留的時間。

我們把這樣一個可產生指定範圍的隨機整數的工具方法放到 util 模組中。

下面我們來 初始化 這個模組。

命令列工具路徑切換至 util/ ，執行：

spm init 

util/  examples/  src/  tests/  package.json  README.md 

• examples/ 用於存放演示檔案。
• src/ 為模組原始碼，打包後的檔案會存放到和 src/ 平級的 dist/ 目錄下。
• test/ 用於存放測試用例，你可以使用 jasmine 等工具來保障程式碼的質量。
• package.json 為本模組打包部署的配置。

我們的 hello-spm 實在有點簡單，所以演示程式碼僅保留了 src/ 和 package.json 這兩個必備部分。

src/ 中只有 util.js 一個檔案， 原始碼非常簡單，如下：

define(function(require, exports) {     exports.random = function(min, max){         return min + Math.round(Math.random() * (max - min))     } }) 

拆分子模組

接下來我們處理相對複雜一些的 hello 模組，他要做這麼幾件事情：

• 建立字元大小隨機的 "Hello SPM !" 字串。
• 隨機顯示到頁面上。
• 一段時間後自動消失。

這個模組複雜到需要拆分成多個子模組來進行開發 (好吧，我承認這純粹是教程需要)。使用 spm init 初始化後，在 src/ 中除了預設建立的 hello.js，還需要手工建立一個 handle-text.js 檔案。

hello.js 完成大部分的主體功能，而 handle-text.js 專門負責處理傳入字串的隨機字元大小。

hello.js 的原始碼如下：

define(function(require, exports, module) {     var $ = require('$')     var random = require('util').random     var handleText= require('./handle-text')          function Hello(){         this.render()         this.bindAction()         seajs.log('new Hello() called.')     }          Hello.prototype.render = function(){         this.el = $('<div style="position:fixed;'              + 'left:' + random(0,70) + '%;'             + 'top:' + random(10,80)+ '%;">'             + handleText('Hello SPM !')             + '</div>').appendTo('body')     }          Hello.prototype.bindAction = function(){         var el = this.el         setTimeout(function(){ el.fadeOut() }, random(500,5000))     }          module.exports = Hello }) 

注意 ：

• var random = require('util').random 是模組方法的引用。
• var handleText= require('./handle-text') 是子模組的引用。
• 在 Hello 類的構造器中，我們還使用 seajs.log 打了一句日誌。

更多 require 的說明可檢視 SeaJS 的 模組標識

handle-text.js 的原始碼如下：

define(function(require, exports, module) {     var $ = require('$')     var random = require('util').random          function handleText(text){         var min = random(30,70)         var max = random(50,120)         var rt = ''         for(var i = 0, len = text.length; i < len; i++){             rt += '<span style="font-size:' + random(min, max) + 'px;">' + text[i] + '</span>'         }         return rt     }          module.exports = handleText }) 

編寫開發時頁面

開發過程中，我們就常常需要編寫一些測試用例，或者演示頁面。

這種情況下我們希望模組是不需要打包的，並且可以檢視日誌，以便除錯。

本例中，我們並沒有為單個模組建立單元測試或者演示頁面。簡單起見，我們在 index.html 頁面中編寫了一些開發時的程式碼，程式碼如下：

<div style="text-align:center;font-size:48px;color:#999;"> Press the space key !</div> <script src="assets/sea-modules/seajs/1.3.0/sea-debug.js"></script> <script>     seajs.config({         alias:{             '$':'gallery/jquery/1.8.3/jquery.js',             'util':'../../util/src/util.js'         }     })     seajs.use(['$','./assets/hello/src/hello.js'],function($, Hello){          $(document).keypress(function(ev){             if(ev.which == 32){                 new Hello()             }         })     }) </script> 

注意：

• 引用 sea-debug.js，可以開啟 debug 功能。
• jquery（即 $ ）作為 DOM 操作最常使用的模組，總是需要通過 seajs.config 手工配置別名，確保專案內的統一。比如 1.8.3 版本。
• seajs.use 中的 '$' 為頂級 模組標識，相對於 seajs 的 base 路徑, './assets/hello/src/hello.js' 為相對標識，相對於當前頁面 url。

現在執行 indexg.html 就能看到效果了，原始碼上做任何的改動也能立馬體現，開啟除錯工具，你還能看到打出的 log。

打包部署

打包配置

結束編碼測試工作後，我們就要準備將模組打包部署，以供正式環境使用了。打包相關的配置都寫在每個模組的 package.json 中了。

先來看看 util 模組的 package.json

{     "name":"util",     "parent":"../package.json",     "output":{"util.js":"."} } 

• name 為模組名
• parent 指定用於繼承的父級配置，路徑相對於該配置檔案。當你專案中的模組有大量公共配置的時候推薦使用此項.
• output 指定了將 src/util.js 及其模組內的依賴打包為 dist/util.js 。當然，這裡 src/util.js 沒有模組內依賴。

再接著看 hello 模組的 package.json

{     "name":"hello",     "parent":"../package.json",     "output":{"hello.js":"."},     "dependencies": {         "$": "$",         "util":"hellospm/util/0.0.1/util"     } } 

然後我們還有一個 parent package.json

{     "root": "hellospm",     "version": "0.0.1" } 

絕大部分和 util 模組的配置一樣，只是多了一項 dependencies，需要注意的是：

jquery 作為一個特殊的模組，打包的時候並不指定具體的依賴，僅寫上 "$": "$" 即可。

回顧一下，就是因為這個原因，我們在剛剛建立的 index-debug.html 中，還需要為 jquery 配置別名： '$':'gallery/jquery/1.8.3/jquery.js' 。

接下來我們將以 util 模組為例講解模組的打包部署（hello 模組的打包部署方式完全一樣）。

打包

命令列進入到 util/ ，執行：

spm build 

SPM 會在 util/dist/ 目錄建立 util.js 和 util-debug.js 兩個檔案。有興趣的讀者可以開啟 util-debug.js 看看打包後的檔案和原始碼有何不同。

部署

為了方便演示，我們準備把打包好的模組部署到本地。

進入 util/ ，執行命令：

spm deploy --to=../sea-modules 

sea-modules/     hellospm/      util/   0.0.1/       util.js       util-debug.js  ... 

編寫正式頁面

勝利就在眼前，我們終於要完成這個專案了。現在我們要把測試用的 index.html 轉換成線上正式執行的 index.html，程式碼如下：

<div style="text-align:center;font-size:48px;color:#999;"> Press the space key !</div> <script src="assets/sea-modules/seajs/1.3.0/sea.js"></script> <script>     seajs.config({         alias:{             '$':'gallery/jquery/1.8.3/jquery.js'         }     })     seajs.use(['$','./assets/sea-modules/hellospm/hello/0.0.1/hello.js'],function($, Hello){          $(document).keypress(function(ev){             if(ev.which == 32){                 new Hello()             }         })     }) </script> 

注意 index.html 前後的一些區別：

• index 引用的是 sea.js。
• SPM 在對模組進行打包部署後，依賴關係已經處理好了，所以這裡我們只用在 seajs.config 中配置 jquery($) 。

結束語