自托管 Phaser 3 库：这是未定义的吗？

Question

我对 Phaser 3 完全陌生。

我已经用 npm 安装了这个库。 然后我天真地从node_modules获取捆绑的文件。

<body>
    <script src="./node_modules/phaser/dist/phaser-arcade-physics.js"></script>
    <script src="./js/start.js"></script>
</body>

当我在浏览器中加载index.html作为文件时，它工作正常。 但是现在我在我的 Apache 中创建了一个小 v-host 并让它提供文件。 这也有效，但移相器对我大喊：

Uncaught TypeError: this.texture is undefined
    setFrame http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:138726
    setTexture http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:138699
    Image http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:29328
    <anonymous> http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:168386
    create http://game.localhost/personwar/js/start.js:34
    [...]
    DOMContentLoaded http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:86811
    Game http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:154945
    <anonymous> http://game.localhost/personwar/js/start.js:17

我从初学者教程中偷了start.js ，一切从这里开始：

function create () {
    console.log('this', this);
    this.add.image(0, 0, 'bg').setOrigin(0, 0);
    ...
}

我不明白，与通过file://交付相比，为什么当库是自托管时会发生this变化。 我需要在这里改变什么？ 我是否需要像 Webpack 这样的捆绑器才能以这种方式（自托管资源）使用它？

Answer 1

好吧，我不知道您链接的是哪个文件。 主移相器文件称为phaser.js或phaser.min.js 。 我认为这是你问题的根源。

简单的解决方案是将移相器 javascript 文件下载到您的 web 文件夹中，或从 cdn 链接它。 （ https://phaser.io/download/stable ）

如果您（想要）使用npm ，您将需要像webpack、parcel 之类的捆绑程序......那里有 serverl 模板。 （像这个https://github.com/photonstorm/phaser3-project-template ）。

顺便说一句：我不是专家，但我通常不会在 web 服务器可访问文件夹中拥有node_modules目录（如果不是真的需要，并且如果您正在运行 apache，则可能不需要），因为这可能会创建一个潜在的安全风险。

自托管 Phaser 3 库：这是未定义的吗？

问题描述

1 个解决方案

解决方案1
0 2022-01-29 15:25:36

自托管 Phaser 3 库：这是未定义的吗？

问题描述

1 个解决方案

解决方案1 0 2022-01-29 15:25:36

解决方案1
0 2022-01-29 15:25:36