Question

I m New to Pixi.js, but I have some past experiences with Model. 我确实在努力将Pixi.js进口到我的项目中。

我是一家小型的Pixi.js项目,利用一个CDN进口Pixi和van Javailla 字典,现在,Im试图将同一项目投进原型。我认为,我的一个选择是使用PCN进口Pixi,然后进口Pixi的类型定义,但我在一些地方读到,Pixi的后几版本已经用字典书写,因此我认为,我可以选择使用图书馆的 Java版,然后进口我自己的字典定义。

I tried using npm install pixi.js and then import * as PIXI from "pixi.js"; but that gives me this TypeScript error: This module is declared with using export = , and can only be used with a default import when using the allowSyntheticDefaultImports flag. and it also gives me this browser error when I force it to compile anyway: Uncaught TypeError: Failed to resolve module specifier "pixi.js". Relative references must start with either "/", "./", or "../". This error makes sense to me, because clearly telling the browser to find pixi.js will result in no file being found, since it s a Node.js module.

我尝试从“近海”中改写如下: 至import PIXI from “pixi.js”;,以删除“只使用违约进口”错误,但仅给我一个“近乎.js没有违约出口”错误,这似乎与我前面的错误形成直接对比: only/em> a. 有违约出口......

And even if I manage to get rid of the TypeScript errors, I still can t wrap my head around how this would function properly anyway since the browser has no idea what "pixi.js" is when it s referring to a Node module that doesn t even exist inside the browser...

So all of this leads me to my question of how do I get a Pixi.js program running with TypeScript? I ve looked up tutorials many times but every single one includes something like Webpack, Browserify, etc. I would not like to use any bundlers/other dependencies at all, I simply want to write TypeScript code, compile it, and have it give me some .js files that I can pop directly into a .html file and run in my browser. Is this possible?

迄今为止,我的调查结果是,我所期待的是(有些)是不可能的。我发现,我的各种选择是进口Pixi的vanilla Java式版本,而只是没有类型信息(而且有些黑体工作体会去找不到“密码> PIXI的”,或者使用像网上包装这样的dler。这两者都不理想,我必须考虑另一种选择。

Answer 1

这将取决于你们的设立,但你可以尝试这样的事情:

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

或您可尝试将全部进口作为消费物价指数XI。

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

Answer 2

你们必须看到这一点,但我仍然希望大家看到这一答案。

This is my demo project on github that you can clone and use. It has typescript and pixi.js installed. THIS PROJECT USES VITE instead of webpack which is very complicated. pxts :pixi.js setup library

你们必须牢记的几点。

Pixi.js version 6 has typescript types bundled along.
Most of the examples on line are old and out of date
Latest pixi version is v 7.x for which there is no community support yet.
link for version 6.5.8 docs
While working with version 6.x you have to install Assets separately where as in Version 7.x its bundled in.
OLD AND OUT OF DATE TUTORIALS ONLINE is the main reason for confusion. Do check which version you have got installed.

Answer 3

使用PixiJS 6. 。它不是美丽的,但是如果你愿意使用杀伤人员地雷,它是可以做到的。

Install Pixi with npm. 在座标中,将模块分辨率定在“AMD”上,因为这不会成为ES单元。

主要内容。页: 1

import * as PIXI from pixi.js ;

就字体而言,你现在从 no子中进口第XI,你有全身的胎儿。

有了AMD,就可提供诸如:

define([“require”、“exports”、“pixi.js”],Function (require, export, PIXI){

Now place a compiled copy of pixi.js at the root of your web path. We re going to shim that in via require.js so it s read as an export:

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

理由:我也不喜欢把dler子放在我的工具链中,除非我最后想部署一些东西。

友情链接