Вызов ts передал js код в модуль из html - PullRequest
Новая
       37

Вызов ts передал js код в модуль из html

0 голосов
/ 10 июля 2019

Я недавно начал экспериментировать с TypeScript, JavaScript и Phaser3.Мой код TypeScript переносится в один файл JavaScript (с использованием системы) в виде модулей.Я использую событие window.onload, чтобы запустить мой код, все это работало нормально, пока я использовал пространства имен.После того, как нужно было добавить оператор импорта (импорт стороннего плагина), все сломалось.После этого я переключился с пространств имен на модули (добавил импорт / экспорт + удаленные пространства имен).И, очевидно, это также означает, что мои модули упакованы в блоки системного реестра, поэтому «глобальный» код (часть window.onload) не выполняется при загрузке.=> Проект не запускается ...: (*

Вопрос: Как я могу запустить мой код сейчас? (Я уже искал / пробовал несколько вещей, но мои знания web / html / javascriptне достаточно глубоко, чтобы понять точную проблему, я думаю).

Вы можете найти источник здесь . (VSCode) Он также содержит сервер> Начать отладку (Launch Program), просмотритена локальный хост: 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 - После добавления импорта BootConfig не был определен для Boot.ts. После добавления экспорта / импорта были найдены типы. НО> my window.onload didn 'выполнить (потому что теперь это модуль ..)

Как мне сохранить текущие настройки модуля, но запустить игру? (что означает выполнение кода в BootConfig.runApp ())

...