轉 ： Hello spm：使用 spm 和 SeaJS 開發一箇中型項目

來源：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 而杜撰出來的項目，但也五臟俱全。

咱們提供了在線演示：http://fool2fish.github.com/hello-spm 。 堅決果斷的猛擊空格鍵，就會有有趣的事情發生了。

你能夠檢出源碼：https://github.com/spmjs/hello-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 gallery.jquery@1.8.3 

這時你會發現 sea-module/ 中多了 seajs 和 jquery 兩個模塊。其中 seajs 爲最新版本， 而 jquery 則是咱們安裝時指定的 1.8.3 版本。其中 jquery 目前的 root 是 gallery，因此會增長一個 gallery 目錄。

建立模塊

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

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

下面咱們來 初始化 這個模塊。

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

spm init 

spm 會在 util/ 中建立如下文件：

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 !" 字符串。
• 隨機顯示到頁面上。
• 一段時間後自動消失。

這個模塊複雜到須要拆分紅多個子模塊來進行開發 (好吧，我認可這純粹是教程須要)。

命令行工具路徑切換至 hello/ ，運行：

spm init 

使用 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':'http://www.cnblogs.com/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。

如今運行 index.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" } 

其中因爲咱們 hello 和 util 模塊的 root 和 version 是同樣的，咱們就能夠把他放到 parent 的配置中。

絕大部分和 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/ 會新增 util 模塊：

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($) 。