如何将 Pixi.js 导入 TypeScript 项目？

Question

我是 Pixi.js 的新手，但我有一些使用 TypeScript 的经验。我真的很难将 Pixi.js 导入到我的项目中。

我使用 Pixi 和 vanilla JavaScript 的 CDN 导入运行了一个小型 Pixi.js 项目，现在我尝试在 TypeScript 上运行相同的项目。我认为我的选择之一是使用 Pixi 的 CDN 导入，然后导入 Pixi 的类型定义，但我在几个地方读到 Pixi 的后续版本已经用 TypeScript 编写，所以我认为这不是一个对于我来说，使用该库的 JavaScript 版本然后导入我自己的 TypeScript 定义是一个不错的选择。

我尝试使用

npm install pixi.js

然后使用

import * as PIXI from "pixi.js";

但这给了我这个 TypeScript 错误：

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

当我强制它编译时，它也会给我这个浏览器错误：

Uncaught TypeError: Failed to resolve module specifier "pixi.js". Relative references must start with either "/", "./", or "../".

这个错误对我来说很有意义，因为明确告诉浏览器查找

pixi.js

将导致找不到文件，因为它是 Node.js 模块。

我尝试将

import * as PIXI from "pixi.js";

更改为

import PIXI from "pixi.js";

以摆脱“仅使用默认导入”错误，但这只会给我一个“pixi.js 没有默认导出”错误，这似乎与我之前遇到的错误，说它only有默认导出...

即使我设法消除 TypeScript 错误，我仍然无法理解它如何正常运行，因为浏览器不知道“pixi.js”在引用 Node 模块时是什么。甚至不存在于浏览器中...

所有这些让我想到了一个问题：如何让 Pixi.js 程序与 TypeScript 一起运行？我已经多次查找教程，但每个教程都包含 Webpack、Browserify 等内容。我不会喜欢使用任何捆绑器/其他依赖项，我只是想编写 TypeScript 代码，编译它，并让它给我一些 .js 文件，我可以将它们直接弹出到 .html 文件中并在浏览器中运行。这可能吗？

到目前为止，我的发现是我正在寻找的东西（以某种方式）是不可能的。我发现我的选择是要么导入 Pixi 的普通 JavaScript 版本并且不带类型信息（并执行一些 hacky 解决方法以使 TypeScript 不认为

PIXI

未定义），要么使用像 Webpack 这样的捆绑器。这些都不理想，我不得不认为还有另一种选择......

Answer 1

这取决于您的设置，但您可以尝试这样的操作：

import { Sprite } from '@pixi/sprite';
new Sprite()

或者你可以尝试像这样将所有内容导入为 PIXI

import * as PIXI from 'pixi.js';
new PIXI.Sprite()

Answer 2

你一定已经弄清楚了这一点，但我仍然希望这个答案在这里供其他人看到。

这是我在 github 上的演示项目，您可以克隆并使用。它安装了 typescript 和 pixi.js。这个项目使用VITE代替webpack，非常复杂。 pxts：pixi.js 设置库

有些事情你必须记住

• Pixi.js 版本 6 捆绑了打字稿类型。
• 网上的大多数示例都是旧的且过时的
• 最新的 pixi 版本是 v 7.x，尚无社区支持。
• 版本 6.5.8 文档的链接
• 使用 6.x 版本时，您必须单独安装资产，就像在 7.x 版本中捆绑的那样。
• 旧且过时的在线教程是造成混乱的主要原因。请检查您安装的是哪个版本。

Answer 3

使用 PixiJS 6...这并不美观，但如果你愿意使用 AMD 就可以做到。

使用 npm 安装 Pixi。在您的 tsconfig 中，将模块分辨率设置为“AMD” - 因为这不能作为 ES 模块工作。

在你的 main.ts 中：

import * as PIXI from 'pixi.js';

就 Typescript 而言，您现在正在从 node_modules 导入 PIXI，并且您拥有完整的类型信息。

对于 AMD，这将发出如下 JavaScript：

define(["require", "exports", "pixi.js"], function (require, exports, PIXI) { ...

现在将 pixi.js 的编译副本放在 Web 路径的根目录中。我们将通过 require.js 进行填充，以便将其读取为导出：

<script>
    require.config({
        urlArgs: "bust=" + (new Date()).getTime(), 
        shim: {
            'path/to/pixi.js': {
                exports: 'PIXI'
            }
        }
    });
    require(["main"], function(res) { 
        new res.Main();
    });
</script>

原因：我也不喜欢在我的工具链中包含捆绑程序，除非我想最终部署某些东西。