如何从我发布的npm包中访问图像和声音？

编程问答 2022-06-13

问题描述

背景

我做了一个简单的游戏，学习如何使用Phaser 3和TypeScript。当我在本地加载并运行游戏时，该游戏即可运行。我已经将游戏变成了托管在github上的软件包，您可以看到它here。我的想法是将游戏作为包装加载到电子应用中。

所以我用TypeScript样板制作了一个电子应用程序，并导入了我的游戏。

某些代码

这就是我将包装放入电子renderer.ts文件中的方式

renderer.ts 

import * as Phaser from "phaser";
import config from "@joe-lloyd/flappy-bird-phaser/lib";

const game = new Phaser.Game(config);

问题

我的游戏在我启动时会加载，但由于出现大量错误而崩溃，提示无法访问资产。

enter image description here

我觉得我缺少一些根本性的东西。看来我的资产路径错误。相对于包的导入未读取资产感到奇怪。我需要以其他方式捆绑我的资产吗？

编辑1

我已在包裹的构建过程中添加了一条公共路径，因此看起来像这样

"build:package": "parcel build index.ts  --public-url ./lib --out-dir lib"

这给我的电子应用程序带来了更好的结果。我有一条道路的一部分现在使（一点）更有意义了。

enter image description here

如您所见，我仍然缺少这一部分\node_modules\@joe-lloyd\flappy-bird-phaser\

解决方法

将整个缺失的路径添加到公共路径的顶部

我对这个答案不满意，但是如果以后有人碰到trhis，我会予以张贴。我会很乐意接受更扎实的东西。

我在电子应用程序中纠正资产路径的方法是调整公共路径以包括节点模块和程序包名称。

构建过程现在看起来像这样

"build:package": "parcel build index.ts --public-url ./node_modules/@joe-lloyd/flappy-bird-phaser/lib --out-dir lib"

再次，我希望更稳定的东西，但这可以消除我的错误。

assetsjavascriptnpmnpm