Javascript代碼在發(fā)布到線上時都會做些處理可柿,如使用UglifyJS2,可顯著減少文件大小,并且能降低些許代碼的可讀性媒楼。帶來的不良后果是园匹,調試起來就不是很方便了雳刺,拋出個異常也很難分析出是哪個文件,哪個地方報錯了裸违,這個時候主角登場:Source Map掖桦。
進入正題,Egret項目使用TypeScript進行開發(fā)供汛,TypeScript項目在發(fā)布的時候會有以下兩個步驟:
- 1枪汪、TypeScript --> Javascript
tsc --sourceMap --outFile main.js file.ts file1.ts
- 2、Javascript --> ugly Javascript
uglifyjs main.js --source-map main.js.map --in-source-map main.js.map
以上兩個步驟都可以產(chǎn)生SourceMap怔昨,步驟二使用到了步驟一生成的SourceMap雀久,用了參數(shù)--in-source-map
。
Egret 發(fā)布項目的命令egret publish
事實上就包含了上面的兩個步驟趁舀,但對sourceMap的支持有些問題赖捌,所以做了一下修改。
先定位到當前EgretEngine的地址矮烹,一般是:
/Applications/EgretEngine.app/Contents/Resources/mac/egret
也可以通過下面的方式找出:
ls -l `which egret`
#輸出:lrwxr-xr-x 1 root admin 39 3 15 15:39 /usr/local/bin/egret -> /usr/local/lib/node_modules/egret/egret
cat /usr/local/lib/node_modules/egret/EgretEngine
#輸出:/Applications/EgretEngine.app/Contents/Resources/mac
主要修改了兩個文件:
- tools/lib/utils.js
替換掉minify方法
function minify(sourceFile, output) {
var defines = {
DEBUG: false,
RELEASE: true
};
//@terran
//UglifyJS參數(shù)參考這個頁面:https://github.com/mishoo/UglifyJS2
// var result = UglifyJS.minify(sourceFile, { compress: { global_defs: defines }, output: { beautify: false } });
var option = {
compress: { global_defs: defines },
output: { beautify: false }
}
if(file.exists(sourceFile+".map")){
console.log(sourceFile+".map");
option.outSourceMap = path.basename(sourceFile+".map")
option.inSourceMap = sourceFile+".map"
}
var result = UglifyJS.minify(sourceFile,option)
file.save(output, result.code);
file.save(sourceFile+".map", result.map);
}
- tools/lib/uglify-js/uglifyjs.js
放開了MOZ_SourceMap的注釋
var UglifyJS = vm.createContext({
sys : sys,
console : console,
MOZ_SourceMap : require("/usr/local/lib/node_modules/source-map")
});
此處用了到source-map
,需要使用npm安裝下:
npm install source-map -g
最后發(fā)布egret項目時巡蘸,使用命令:
egret publish --sourceMap true
便會生一個js.map文件,并且在生成的js的末尾也加了//# sourceMappingURL=main.min.js.map
擂送。
齊活