如何将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没有默认导出“错误，这个错误似乎与我之前得到的错误形成了直接的对比，说它只有一个默认导出.

即使我设法消除了TypeScript错误，我仍然无法思考这将如何正常工作，因为浏览器不知道"pixi.js“指的是浏览器内部根本不存在的节点模块.

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

到目前为止，我的发现是，我正在寻找的(不知何故)是不可能的。我发现，我的选择要么是导入普通的JavaScript版本的Pixi，然后不使用类型信息(并做一些麻烦事的解决办法，使TypeScript不认为PIXI是未定义的)，要么使用像Webpack这样的绑定器。这两个都不是理想的，我不得不认为还有另一个选择.

Answer 1

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

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

或者你可以试着像PIXI这样进口所有的东西

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