Question

我最近开始尝试TypeScript，JavaScript和Phaser3。我的TypeScript代码作为模块被编译为单个JavaScript文件（使用系统）。我使用window.onload事件来启动我的代码，只要使用命名空间，这一切都可以正常工作。在必须添加导入语句（导入第三方插件）之后，一切都中断了。之后，我从名称空间切换到模块（添加了导入/导出+删除了名称空间）。显然这也意味着我的模块包装在系统注册表块中，因此“全局”代码（window.onload部分）不会在加载时执行。 =>项目无法运行...：（

问题：如何立即启动代码？（我已经查找/尝试了几件事，但是我对web / html / javascript的了解还不足以解决我猜到的确切问题）。

您可以找到源here。（VSCode）它还包含一个服务器>开始调试（启动程序），浏览到localhost：1234。

代码：

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Phaser3 - Hello World</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/system.js"></script>
    <script type="text/javascript" src="js/phaser.js"></script>
    <script src="js/nineslice.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script>

    </script>
</head>

<body>
    <div id="phaser-app"></div>
</body>

</html>

Boot.ts

import { BootConfig } from "./MainScene";

//namespace HelloPhaser
//{
    window.onload = () => {
        BootConfig.runApp();
    }
//}

MainScene.ts

import { Plugin as NineSlicePlugin } from 'phaser3-nineslice'

//namespace HelloPhaser
//{
    export class BootConfig
    {
        static runApp()
        {
            var game = new Phaser.Game({
                    title: "Hello Phaser 3",
                    width: 600,
                    height: 960,
                    type: Phaser.AUTO,
                    parent: "phaser-app",
                    plugins: {
                        global: [NineSlicePlugin.DefaultCfg]
                    },
                    physics: {
                        default: "arcade",
                        arcade: {
                            gravity: {
                                y: 0
                            },
                            debug: true
                        }
                    },
                    scale: {
                        mode: Phaser.Scale.FIT,
                        autoCenter: Phaser.Scale.CENTER_BOTH
                    },
                    scene: MainScene
            });
        }
    }

    export class MainScene extends Phaser.Scene
    {
        constructor()
        {
            super({key:"MAIN", active:true})
        }

        create()
        {
            this.add.text(0, 0, "HELLO PHASER 3");
        }
    }
//}

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {

    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "system",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     "outFile": "bin/js/app.js",                       /* Concatenate and emit output to single file. */
     "outDir": "bin/js",                        /* Redirect output structure to the directory. */
     "removeComments": true,                /* Do not emit comments to output. */

    "strict": true,                           /* Enable all strict type-checking options. */
     "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
  },

  "include": [
    "./src/**/*"
  ],

  "files": [
    "./tsDefinitions/nineslice.d.ts",
    "./tsDefinitions/phaser.d.ts"
  ]
}

小回顾： -使用命名空间+可以正常运行代码，而无需对nineslice插件进行必要的导入 -添加导入后，未为Boot.ts定义BootConfig。添加导出/导入后，找到了类型。但是>我的window.onload没有执行（因为它现在是一个模块。）

如何保持当前的“模块”设置，但启动游戏？（这意味着要执行BootConfig.runApp（）中的代码）

从html

0 个答案: