在最開始,我並不知道grunt可以構建CMD模組.(以下spm指代spm build)

當時正困惑於如何用spm方便的構建業務模組,後來看到@twinstony (感謝@twinstony的分享)使用grunt-cmd-xxx外掛構建了CMD模組,跟著demo自己做了測試,的確可以構建,但是有一個問題:

grunt 方式不能把依賴的外部css(比如非專案中的jquery外掛css)打包進來,而spm可以.

其原因是,spm會根據別名配置依次(./sea-mpdules -> ~/.spm/cache -> -> 源)查詢並下載依賴,最後將依賴的css依賴打包進來(通過seajs.imporStyle).

而grunt並沒有做這件事情,也許可以通過另一個grunt外掛完成.

另,include這個引數是針對js模組的,對於css 而言則是"all"

還有一個不是問題的問題:

用grunt方式構建,引數配置項太多了,有時候找問題不太好找.或者說是過於靈活了,有時使開發者們無所適從.

而spm把很多東西都封裝好了,只需配置簡單幾個引數即可,符合seajs簡單一致的設計原則.

其實spm底層也是呼叫了grunt-cmd-transport以及其他模組,但把一些繁雜的配置幫我們處理好了

之前對於spm的困惑是:

1.打包出的模組id只能是family/version/name麼?  --通常業務模組並不需要這類命名

2.打包出的模組路徑只能是直接輸出到dist目錄下? --不能像grunt那樣,構建出來的目錄結構與原始檔的目錄結構一致麼?

3.輸出目錄不能指定麼,只能是dist麼? --如果可以指定,就可以直接省略掉部署環節(本地部署)

經過摸索與諮詢,得出一個可行的解決方案,感謝@popomore 的指點

示例程式碼下載連結:

(以下所有spm命令均在sea-modules的上一層目錄下,即js下執行,package.json設定在這裡)

A.所有模組部署在專案中.

以下以一個簡單的示例(需要對backbone有一定了解)演示.

上圖是目錄結構.

sea-modules是spm預設的模組安裝目錄名.

為了開發方便,不必每次檢視效果都要spm build一番,在開發階段不使用spm打包程式碼,除源上的已成熟的元件外(可通過spm install安裝都本地),均使用匿名模組檢視頁面效果.

上圖是我把seajs結合backbone做的一個demo.

等所有功能開發完畢後,現在頁面引入模組檔案是這樣的

seajs.use('start.js');

接著,進入打包階段.

{

    "family": "test",

    "version": "0.0.1",

    "name": "spmTest",

    "spm": {

        "idleading": "_output/",

        "source": "sea-modules",

        "output": [

            "start.js",

            "app/gettingStart.js",

            "app/index.js",

            "app/userlist.js",

            "collection/C_userlist.js",

            "model/M_gettingStart.js",

            "model/M_index.js",

            "model/M_user.js",

            "view/V_gettingStart.js",

            "view/V_index.js",

            "view/V_user.js",

            "view/V_userlist.js"

        ],

        "alias": {

            "$": "jquery/jquery/1.7.2/jquery",

            "$-debug": "jquery/jquery/1.7.2/jquery-debug",

            "jquery": "jquery/jquery/1.7.2/jquery",

            "jquery-debug": "jquery/jquery/1.7.2/jquery-debug",

            "select2": "jquery/select2/3.4.5/select2-zh-cn",

            "select2-css": "jquery/select2/3.4.5/select2.css",

            "select2-css-debug":"jquery/select2/3.4.5/select2-debug.css",

            "underscore": "gallery/underscore/1.5.2/underscore",

            "backbone": "gallery/backbone/1.1.0/backbone"

        }

    }

}

以上為package.json配置.

然後終端執行

spm build -O sea-modules/_output

如上圖,然後_output目錄就會被建立,相應目錄結構的模組就會依次生成好.

然後改變頁面上引入模組的路徑,只需新增一個字首即可:

seajs.use('_output/start.js');  //開發階段是seajs.use('start.js');

之前開發好的功能,現在一樣能夠跑通,而且執行效率會更高.

下面,講一下其中的注意點

package.json重點是idleading,source,output的配置

"idleading": "_output/",

        "source": "sea-modules",

        "output": [

            "start.js",

            "app/gettingStart.js",

            "app/index.js",

            "app/userlist.js",

            "collection/C_userlist.js",

            "model/M_gettingStart.js",

            "model/M_index.js",

            "model/M_user.js",

            "view/V_gettingStart.js",

            "view/V_index.js",

            "view/V_user.js",

            "view/V_userlist.js"

        ],

1.idleading如果不配置,那麼生成出來的id就是family/version/name這種形式,這個值怎麼配,需要與source,output配合,最終達到的效果就是最終載入這個模組的路徑(require或use的引數)與生成的id值要一致,至於為什麼,請參考https://github.com/seajs/seajs/issues/930

2.source指定從當前目錄下的哪個目錄"查詢"需要被構建的模組,這個官方文件有說明

3.output指定具體要被構建的模組,這裡很重要,數組裡的每個路徑怎麼寫,生成出來的目錄結構就是怎麼樣的.我曾經試過,將他們寫成

"output": [

            "start.js",

            "app/*.js",

            "collection/*.js",

            "model/*.js",

            "view/*.js"

        ],

但是前面提到那個css打包問題又出現了,而且模板檔案也不打包了,好像是合併操作都失效了的感覺.這個就不知為何了,曾經提過issue,說是不支援這種寫法.

4.執行build命令時指定 -O 的值,指定輸出目錄, 這個除了這種方式,不知道怎麼在配置檔案中解決,也提過issue,貌似需要自己實現.

5.還有一個奇怪的警告:

為啥會去找sea-debug?(後補:transport任務會轉換source下所有檔案,而sea-debug當然不是cmd模組,但是壓縮版的sea.js也不是啊,怎麼不警告?)

還有一點,下面那個152 files,貌似是對souce下的所有檔案都進行transport了,但目標並不是全部,也就是說,實際上output的配置在transport後才起作用,是不是有些不太合理?

這樣打包好後,結合seajs-debug,seajs-debug用於測試環境,線上除錯,以及map控制時間戳,就能很好的管理所有模組了

ps:關於seajs的預設base,還有這種情況在:

本demo中即屬於這種情況.

構建輸出目錄在sea-modules/_output下

訪問backbobe-test.html檢視最終效果

個人建議將工程程式碼在webstorm(@7.0+)中開啟,webstorm會自動啟動一個web服務,或者其他能夠啟動web服務的方式.

B.業務模組部署在專案中,其他模組包括seajs本身及其外掛部署在靜態資源伺服器見附件,構建時,只需將idleading做適當轉換即可,總之要保證require或use時的路徑和id一致

構建輸出目錄在sea-modules/_output2下

訪問backbobe-test-outer.html檢視最終效果

這種情況下需要啟動兩個web服務,一個webstorm的,一個靜態資源伺服器的,個人建議使用nodejs的anywhere啟動.

接下來附上幾幅效果圖

A1.開發階段:

A2.構建好後:

A3.構建好後,使用seajs-debug除錯:

B1.公用模組外部部署,開發階段:

B2.公用模組外部部署,構建好後:

B3.公用模組外部部署,構建好後除錯:

程式碼下載地址:

歡迎大家指出不正確或不合理的地方~