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

Question

I am absolutely new with phaser 3 .我对 Phaser 3 完全陌生。

I have installed the library with npm.我已经用 npm 安装了这个库。 Then I naively fetch the bundled file from node_modules .然后我天真地从node_modules获取捆绑的文件。

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

When I load index.html in the browser as file, it works fine.当我在浏览器中加载index.html作为文件时，它工作正常。 But now I have created a little v-host in my Apache and let it serve the files.但是现在我在我的 Apache 中创建了一个小 v-host 并让它提供文件。 This works too, but phaser yells at me:这也有效，但移相器对我大喊：

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

I have stolen start.js from the beginner tutorial and here it all starts:我从初学者教程中偷了start.js ，一切从这里开始：

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

I don't understand, why this changes when the library is self hosted, compared to being delivered by file:// .我不明白，与通过file://交付相比，为什么当库是自托管时会发生this变化。 What do I need to change here?我需要在这里改变什么？ Do I need a bundler like Webpack for this way (self hosted resources) of using it?我是否需要像 Webpack 这样的捆绑器才能以这种方式（自托管资源）使用它？

Answer 1

Well I don't know which file your are linking.好吧，我不知道您链接的是哪个文件。 the main phaser file is called phaser.js or phaser.min.js .主移相器文件称为phaser.js或phaser.min.js 。 I think this is the root of your problem.我认为这是你问题的根源。

The easy solution is to download the phaser javascript file into your webfolder, or link it from a cdn.简单的解决方案是将移相器 javascript 文件下载到您的 web 文件夹中，或从 cdn 链接它。 ( https://phaser.io/download/stable ) （ https://phaser.io/download/stable ）

If you (want to) use npm you will need a bundler like webpack, parcel , ... there are serverl templates out there.如果您（想要）使用npm ，您将需要像webpack、parcel 之类的捆绑程序......那里有 serverl 模板。 (like this one https://github.com/photonstorm/phaser3-project-template ). （像这个https://github.com/photonstorm/phaser3-project-template ）。

btw.: I'm no expert, but I would in general never have the node_modules directory in a webserver accessible folder (if not really needed, and if you are running apache, it is probably not needed), since this could create be a potential security risk.顺便说一句：我不是专家，但我通常不会在 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