Egret 如何发布Source Map

Javascript代码在发布到线上时都会做些处理,如使用UglifyJS2,可显著减少文件大小,并且能降低些许代码的可读性。带来的不良后果是,调试起来就不是很方便了,抛出个异常也很难分析出是哪个文件,哪个地方报错了,这个时候主角登场:Source Map。

进入正题,Egret项目使用TypeScript进行开发,TypeScript项目在发布的时候会有以下两个步骤:

  • 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

以上两个步骤都可以产生SourceMap,步骤二使用到了步骤一生成的SourceMap,用了参数--in-source-map

Egret 发布项目的命令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参数参考这个页面: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

最后发布egret项目时,使用命令:

 egret publish --sourceMap true 

便会生一个js.map文件,并且在生成的js的末尾也加了//# sourceMappingURL=main.min.js.map

齐活

你可能感兴趣的:(Egret 如何发布Source Map)