PixiJS UI 和类型化信号之间的导入/导出

问题描述 投票：0回答：1

我的目标是使用 PixiJS UI（版本 2.1.2）将输入字段放置在由 PixiJS（版本 8.2.0）绘制的画布上。

仅包含 PixiJS 的部分工作正常，但我无法运行 @pixi/ui 的导入。 Firefox 是这样说的：“Uncaught SyntaxError：不明确的间接导出：信号” Chromium 是这样说的：

SyntaxError: The requested module 'typed-signals' does not provide an export named 'Signal' (at pixi-ui.mjs:9:209)
，并突出显示这一行：
import {Signal as v} from "typed-signals";
。

对于“typed-signals”库（版本2.5.0），只有一个文件index.js和index.d.ts，但没有带有显式导出语句的index.mjs。

据我了解 JavaScript 中的导入/导出主题，解决方法可能是自己编写一个带有重新导出语句的 index.mjs。但我想这不是让它发挥作用的预期方式。

这是我的 JavaScript 代码：

import { Application as Application, Text as Text } from 'pixi.js';
import { Button as Button } from '@pixi/ui';

(async () => {
// Draw a green canvas
const app = new Application();
await app.init({ width: 300, height: 300, backgroundColor: 0x00ff00 })
document.body.appendChild(app.canvas);

// Create a button
const button = new Button();
button.onPress.connect(() => console.log('Button pressed!') );
// [...] Do some other stuff
})();

这是我的带有导入映射的 HTML 代码：

<!doctype html>
<html>
<head>
<script type="importmap">
{"imports": {
    "pixi.js": "http://127.0.0.1:8080/public/node_modules/pixi.js/dist/pixi.mjs",
    "eventemitter3": "http://127.0.0.1:8080/public/node_modules/eventemitter3/dist/eventemitter3.esm.js",
    "earcut": "http://127.0.0.1:8080/public/node_modules/earcut/dist/earcut.min.js",
    "@pixi/colord": "http://127.0.0.1:8080/public/node_modules/@pixi/colord/index.mjs",
    "@pixi/colord/plugins/names": "http://127.0.0.1:8080/public/node_modules/@pixi/colord/plugins/names.mjs",
    "@xmldom/xmldom": "http://127.0.0.1:8080/public/node_modules/@xmldom/xmldom/lib/index.js",
    "parse-svg-path": "http://127.0.0.1:8080/public/node_modules/parse-svg-path/index.js",
    "ismobilejs": "http://127.0.0.1:8080/public/node_modules/ismobilejs/esm/index.js",
    "tweedle.js": "http://127.0.0.1:8080/public/node_modules/tweedle.js/dist/tweedle.es.js",
    "typed-signals": "http://127.0.0.1:8080/public/node_modules/@pixi/ui/node_modules/typed-signals/dist/index.js",
    "@pixi/ui": "http://127.0.0.1:8080/public/node_modules/@pixi/ui/dist/pixi-ui.mjs"
}}
</script>
</head>
<body>
<script src="myCanvasApp.js" type="module"></script>
</body>
</html>

我通过 

npm install [library name]
获得的 JavaScript 库。 似乎 @pixi/ui 带来了自己的“typed-signals”（在子文件夹中），因此“typed-signals”不在最新版本 3.0.0 中，而是在版本 2.5.0 中。我的导入地图考虑了这一点。

知道如何在 PixiJS UI 和类型信号之间进行导入/导出设置（...从而运行 PixiJS UI）吗？

javascript pixi.js
1个回答
0
投票

作为临时解决方法（达到短期目标并在画布上获得输入字段）我...

  1. 将Input.js复制到MyInput.js，

  2. 修改了MyInput.js中以下三行标题：

    import { Container as Container, Graphics as Graphics, isMobile as isMobile, Ticker as Ticker, Text as Text, Sprite as Sprite, Texture as Texture, NineSliceSprite as NineSliceSprite } from 'pixi.js';
    // var typedSignals = require('typed-signals');
    import { getView as getView } from 'view.mjs';

  3. 从整个 MyInput.js 文件中删除了之前在 head 中定义的变量（pixi_js、typedSignals 和 view）。

  4. 在我的应用程序代码中添加了此导入：

    import { MyInput as MyInput } from './MyInput.js';

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.