MT移動(dòng)端的js模塊管理框架
MT是手機(jī)騰訊網(wǎng)前端團(tuán)隊(duì)開(kāi)發(fā)維護(hù)的一個(gè)專(zhuān)注于移動(dòng)端的js模塊管理框架。
github: https://github.com/mtjs/mt
為了方便大家我們還在http://git.oschina.net上放了一個(gè)鏡像：
http://git.oschina.net/luyongfugx/mt
為什么使用MT
-
無(wú)更新不下載
-
簡(jiǎn)單友好的模塊定義規(guī)范
-
簡(jiǎn)單易用的打包管理工具
-
強(qiáng)大的js增量更新代理服務(wù)
快速上手(可查看demo目錄下代碼)
安裝mtbuild
github, npm
$ npm install mtbuild -g
項(xiàng)目結(jié)構(gòu)
MT項(xiàng)目架構(gòu)一般如下圖所示，release文件夾存放本地打包生成的內(nèi)容，build.conf為打包配置文件。
編寫(xiě)模塊
AMD...
define('p1', ['p2', 'p3'], function (p2, p3) { var o = {
k: 'v' }; return o;
});
編寫(xiě)配置
頁(yè)面配置：參考實(shí)例，在test.html中會(huì)存在一段單獨(dú)的script標(biāo)簽，示意加載及打包配置。
<script type="text/javascript" id="file_config"> var g_config = { // 約定變量名為 g_config， script 標(biāo)簽 id 為 file_config jsmap:{ 'init': 'base.js', 'util': 'base.js', // 合并后指向同一個(gè)文件 'p1': 'page/p1.js', 'p2': 'page/p2.js', 'p3': 'page/p3.js' },
storeInc:{ 'store': true, // 使用本地存儲(chǔ) 'inc': true, // 使用增量更新 'proxy':true, 'debug': false // 調(diào)試模式 },
testEnv: false, // 標(biāo)識(shí)是否為測(cè)試環(huán)境 staticPath: '/release', // 此項(xiàng)目靜態(tài)文件路徑 和 下面域名拼接
serverDomain: 'http://localhost:6600', // 靜態(tài)文件服務(wù)器域名 buildType: 'project', // 標(biāo)識(shí)版本管理類(lèi)型 ver: '2014012000050' // 項(xiàng)目版本號(hào) }; </script>
打包配置：參考實(shí)例，創(chuàng)建一個(gè)build.conf的配置文件
{ './release/{pv}/base-{fv}.js': {
files: ['./js/init.js','./js/util.js']
}, './release/{pv}/page/p1-{fv}.js': {
files: ['./js/page/p1.js']
}, './release/{pv}/page/p2-{fv}.js': {
files: ['./js/page/p2.js']
}, './release/{pv}/page/p3-{fv}.js': {
files: ['./js/page/p3.js']
}
}
本地打包
打開(kāi)命令行工具，切換到項(xiàng)目目錄下，執(zhí)行命令：（第一個(gè)參數(shù)為頁(yè)面配置文件路徑，第二個(gè)為打包配置文件路徑）
$mtbuild test.html build.conf
看到下圖提示證明打包成功：（啟動(dòng)增量服務(wù)可忽略incResult的結(jié)果）
啟動(dòng)增量服務(wù)
可以使用demo目錄里的一個(gè)用nodejs 寫(xiě)的storeincServer
node storeincServer
效果演示
打開(kāi)chrome(必須支持localstorage),輸入地址:http://localhost:6600/test.html,可以看到請(qǐng)求的是全量的js
本地存儲(chǔ)里的內(nèi)容是49版本的：
修改demo里的幾個(gè)js內(nèi)容，然后重新打包:
$mtbuild test.html build.conf
打開(kāi)chrome(必須支持localstorage),輸入地址:http://localhost:6600/test.html,這時(shí)候可以看到請(qǐng)求的內(nèi)容是增量的:
本地存儲(chǔ)里的內(nèi)容是50版本的：
查看網(wǎng)絡(luò)請(qǐng)求，發(fā)現(xiàn)請(qǐng)求的內(nèi)容是你本次修改的一些內(nèi)容：
說(shuō)明增量更新已經(jīng)起了作用，就是這么簡(jiǎn)單。具體原理可以看后面列車(chē)的增量更新算法設(shè)計(jì)。
還可以這么搞！
mtbuild離線生成增量更新文件
demo里的示例增量文件計(jì)算是靠storeincserver來(lái)做的，如果你沒(méi)法控制靜態(tài)資源服務(wù)器， 其實(shí)你可以用mtbuild來(lái)生成靜態(tài)增量更新文件，但是前臺(tái)的loader程序會(huì)根據(jù)用戶(hù)上次版本和本次版本相差為1的情況下才走增量更新，并且你需要配置proxy為false
storeInc:{ 'store': true, // 使用本地存儲(chǔ) 'inc': true, // 使用增量更新 'proxy':false,//是否使用代理 'debug': false // 調(diào)試模式 },
各種語(yǔ)言的增量更新計(jì)算服務(wù)
除了nodejs版本的storeincserver,我們還提供了java,php版本的增量更新計(jì)算服務(wù)，使用方法見(jiàn)文檔列表
seajs，requirejs兩大增量更新插件
如果你之前用了seajs或者用requirejs,現(xiàn)在不想改成mt,我們也提供了這兩個(gè)模塊管理器的增量更新插件，代碼在js里的seajs和requirejs目錄里面，使用方法參看后面的文檔列表
只使用core.js，不用增量更新
如果你覺(jué)得增量更新意義不大，但是覺(jué)得我們的mt模塊管理器還不錯(cuò)想用，那么你可以直接使用core.js，不引入storeincload.js即可！
在自己的項(xiàng)目里面使用增量更新
如果你覺(jué)得我們這里的增量更新不錯(cuò)，但是不想使用mt,也不想使用seajs,requirejs這些東西，只是想在自己的項(xiàng)目里面加入增量更新功能，那么請(qǐng)直接使用js/makemerge文件夾里的makein.js,merge.js。 其中makeinc.js是用來(lái)計(jì)算兩個(gè)文件的增量的，merge.js則是用來(lái)根據(jù)增量文件和原文件合并成新版文件的