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

Question

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

我使用 Pixi 和普通 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 没有默认导出”错误，这似乎与我之前遇到的错误形成直接对比，说它只有默认导出...

即使我设法消除 TypeScript 错误，我仍然无法理解它如何正常运行，因为浏览器不知道“pixi.js”指的是一个不支持 Node 模块的 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()