拳头大战开发历程1-编译配置

在开发这个游戏的过程中,忍不住要用上新的web技术,promise、await/async一个都不能少。

但是在Layabox中使用这些,并不是一件顺利的事情。
会碰到一堆报错,因为使用上了一些es6的属性和语法。

然后我进行了一次尝试,把tsconfig中的target从es5改为es6,这能编译通过,且Web端可以运行,但是当我把项目发布到微信小游戏里面的时候,却报Unhandled Promise rejection的错误。

经过查阅了大量的资料,发现有同学说直接用async和await可以在微信小游戏中运行,看了下编译出来的code.js可发现await编译成__awaiter的形式,经过查阅资料发现是target:es6的方式就是编译出来这样的形式,需要用es2017的方式进行编译才能保持直接生成。
我们需要进打开.laya/task.json往args中添加target:es2017

{"version":"0.1.0","command":"tsc","isShellCommand":true,"args":["-p",".","--outDir","bin/js","target", "es2017"],"showOutput":"silent","problemMatcher":"$tsc"}

可是这样弄了的话,还是有问题。
在ios10系统下最新的微信,直接就报了个语法错误,连小游戏的进不了。看来还有兼容性问题,不能直接调到es2017的编译方式。

最后,得益于参考了白鹭的编译选项(其实有点后悔没用白鹭,不过没关系Laya我也可以将他调教的顺顺贴贴,就是有些地方需要多折腾一下),发现了一些端倪,白鹭编译出来的js文件中还带有一个编译出来的__generator, 看了下编译选项使用的是es5,于是又回到了原点使用es5方式,但是promise不被支持,所以需要使用es2015.promise的lib,由于还用了一些Iterator的语法,和其他别的依赖。
修改最终的编译配置和编译命令为下面:
tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "lib": [
        "dom",
        "es2015",
        "es2015.collection",
        "es2015.iterable",
        "es2015.promise"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

task.json

{"version":"0.1.0","command":"tsc","isShellCommand":true,"args":["-p",".","--outDir","bin/js", "--target", "es5", "--downlevelIteration"],"showOutput":"silent","problemMatcher":"$tsc"}

这样,就可以很舒服的使用这些方便的js/ts特性啦~
虽然绕了不少弯路,但是还是学到了不少编译相关的东西~。

你可能感兴趣的:(拳头大战开发历程1-编译配置)