如何将 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 "../". 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 没有默认导出”错误，这似乎与我之前得到的错误形成鲜明对比，说它只有默认导出...

即使我设法摆脱了 TypeScript 错误，我仍然无法理解 function 是如何正确的，因为浏览器不知道“pixi.js”是什么，因为它指的是一个 Node 模块，它不甚至存在于浏览器中......

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

到目前为止，我的发现是我正在寻找的东西（不知何故）是不可能的。 我发现我的选择是要么导入 Pixi 的香草 JavaScript 版本，要么导入没有类型信息的 go（并做一些 hacky 变通办法让PIXI不认为 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 捆绑了 typescript 种类型。
• 大多数在线示例都是旧的和过时的
• 最新的 pixi 版本是 v 7.x，尚无社区支持。
• 版本 6.5.8 文档的链接
• 在使用 6.x 版时，您必须单独安装资产，而在 7.x 版中它是捆绑在一起的。
• 旧的和过时的在线教程是造成混淆的主要原因。 请检查您安装的是哪个版本。