如何將 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 版中它是捆綁在一起的。
• 舊的和過時的在線教程是造成混淆的主要原因。 請檢查您安裝的是哪個版本。