cocos2d-js 3.0编译WEB版若干问题

https://github.com/faint2death/cocos2d-js/blob/master/closure-compiler.md

  1. 如何生成编译调试版本

随着神经猫的风靡,越来越多的童鞋开始用cocos2d-js做微信小游戏,cocos2d-js提供了可裁剪、混淆压缩的编译方式:

cocos compile -p web -m release
cocos2d-js使用了google closure compiler做混淆压缩,不过如果你编码稍微不注意,很可能编译出来的代码会运行出错,而这个代码实在没法看和调试,给排错照成很大困扰。

cocos提供了生成sourcemap文件的选项,只需用如下命令编译即可:

cocos compile -p web -m release --source-map
要生成sourcemap,jdk的版本必须是1.7,这个在cocos2d-js-v3.0-rc2/tools/cocos2d-console/plugins/project_compile/build_web/init.py里定义了,但脚本里对1.6版本jdk的童鞋做任何提示。不过sourcemap对closure compiler压坏的代码调试没啥帮助,林顺推荐了一个方法,就是改build.xml里的debug选项为true:

<?xml version="1.0"?>
<taskdef name="jscomp" classname="com.google.javascript.jscomp.ant.CompileTask"
         classpath="/home/magic/cocos2d-js-v3.0-rc2/tools/cocos2d-console/bin/../plugins/project_compile/build_web/bin/compiler-1.7.jar"/>

<target name="compile">
    <jscomp compilationLevel="advanced" 
            warning="quiet"
            debug="true" 
            output="/home/magic/project/test/publish/html5/game.min.js"


然后删除game.min.js,重新生成:

/home/magic/apache-ant-1.9.4/bin/ant -f /home/magic/project/test/publish/html5/build.xml
新生成的game.min.js有很多$符号,但函数名、变量名等和源码一致,不过代码没有换行,都合在一起,需要用sublime的JsFormat插件等工具(线上可以用:http://jsbeautifier.org/)做一下美化,然后调试就比较方便,看看closure compiler到底把哪压坏了。chrome下debug信息大概如下:

debug

  1. 阻止closure compiler混淆特定变量名

就是在该行代码上面加一行:

/** @expose */
比如cocos2d-js 3.0 rc2发布后,发现编译混淆后,又出现如下错误:

Error: res/click.mp3 greater than 5
panda连夜看了代码后,给了一个解决方案,在CCAudio.js中,修改下面的代码:

        /** @expose */
        sourceNode.onended = function(){
            self._stopped = true;
        };

这个bug是因为onended变量名被混淆后事件注册失败。

  1. 经验教训

var k = {name : ‘value’}; 这里的name如果加了引号,一准被closure compiler压坏
对象成员取值不要用k’name’],这样也容易被closure compiler压坏,要用k.name
不想closure compiler混淆的变量名,在其上面加/** @expose */

  1. 参考文档

http://www.cocoachina.com/bbs/read.php?tid=216020

生成了sourcemap 也把 debug 该成true 然后怎样调试 game.min.js 文件 是直接点击index.html 吗

删除game.min.js,然后执行:

/home/magic/apache-ant-1.9.4/bin/ant -f /home/magic/project/test/publish/html5/build.xml

路径的名字根据你自己的情况修改。

我已经重新生成了 然后点击里面的index.js 还是无法运行

你的打包成的 web 运行的时候黑屏解决了吗?如解决能否告知1,2

正常发布就行 混淆也能行 但是 需要 把你 编译好的文件 放到一个 服务器上 就可以了