構建seajs業務模塊之grunt VS spm build

時間 2019-11-10

標籤構建 seajs 業務模塊 grunt spm build 欄目 Node.js 简体版

原文原文鏈接

在最開始,我並不知道grunt能夠構建CMD模塊.(如下spm指代spm build)css

當時正困惑於如何用spm方便的構建業務模塊,後來看到@twinstony (感謝@twinstony的分享)使用grunt-cmd-xxx插件構建了CMD模塊,跟着demo本身作了測試,的確能夠構建,可是有一個問題:html

grunt 方式不能把依賴的外部css(好比非項目中的jquery插件css)打包進來,而spm能夠.node

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

而grunt並無作這件事情,也許能夠經過另外一個grunt插件完成.git

另,include這個參數是針對js模塊的,對於css 而言則是"all"github

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

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

而spm把不少東西都封裝好了,只需配置簡單幾個參數便可,符合seajs簡單一致的設計原則.數組

其實spm底層也是調用了grunt-cmd-transport以及其餘模塊,但把一些繁雜的配置幫咱們處理好了服務器

以前對於spm的困惑是:

1.打包出的模塊id只能是family/version/name麼? --一般業務模塊並不須要這類命名

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

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

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

示例代碼下載連接:

https://github.com/stoneChen/seajs-backbone-test/tree/master

(如下全部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服務的方式.

以seajs-backbone做爲根目錄