文章出處

應用了seajs的模塊化js文件不能像普通js文件一樣直接合并和壓縮,具體可以看這里為什么 SeaJS 模塊的合并這么麻煩。下面演示了如何使用VS2012一鍵發布應用了seajs的asp.net項目,需要用到的工具有nodejs、grunt、msbuild等。

項目目錄結構

其中base.js是一個公用的JS庫,pulg-a.js,pulg-b.js是基于base的公用插件。

對于開發環境的項目,在瀏覽器中訪問Index.html 會加載base.js、sea.js、 common.js、 plug-a.js、plug-b.js。

對于發布后的項目,在瀏覽器中訪問Index.html只會加載 seas.js、base.js、common.js。

插件pulg-a.js代碼如下:

define(function (require, exports, module) {
    var base = require("./base");
	exports.run = function(){
	    alert("a");
	}
});

插件pulg-b.js代碼如下:

define(function (require, exports, module) {
    var base = require("./base");
	exports.run = function(){
		alert("b")
	}
});

common.js 包含了項目中所有插件,代碼如下:

define(function(require, exports, module){
	exports.a = require("./plug-a.js");
	exports.b = require("./plug-b.js");
});

Index.html是調用頁面,代碼如下:

<body>
    <script src="js/sea.js"></script>
    <script>

        seajs.use("./js/common.js", function (common) {

            common.a.run();
        });

    </script>
</body>

在VS2012的解決方案資源管理器中右擊項目選擇發布后會自動合并plug-a.js、plug-b.js為common.js,然后使用uglify分別壓縮base.js和common.js

發布后的項目目錄結構:

下載示例代碼


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 AutoPoster 的頭像
    AutoPoster

    互聯網 - 大數據

    AutoPoster 發表在 痞客邦 留言(0) 人氣()