Pixi.js: Kompatibilität mit Webpack

Wir verwenden browserify brfs transform:

https://github.com/GoodBoyDigital/pixi.js/blob/master/package.json#L57 -L61

Ich bin mir nicht sicher, wie Sie dieses Webpack kompatibel machen würden. Gibt es Artikel zum Webpack, in denen browserify-Transformationen ausgeführt werden?

https://github.com/webpack/transform-loader

@drkibitz @englercj Vielen Dank für den Hinweis, ich konnte mit Pixi + Webpack mit transform-loader + json-loader beginnen.

@fusepilot Hier ist die Webpack-Konfiguration, die ich verwende.

Ich konnte die Konfiguration von @mking bei Verwendung von Babel nicht zum https://gist.github.com/oal/898df82fa64e54dd16d0

Schließen, da dies beantwortet zu sein scheint.

Ich konnte ein Problem nicht lösen, bei dem pixi.js/src/core/const.js versucht, ../../package.json zu benötigen, und einen Fehler Cannot find module "../../package.json" ausgibt. Ich habe es mit beiden Möglichkeiten von @oal versucht. Dies geschieht jedoch nur, wenn ich das Neuladen von Hot-Modulen verwende. Beim Erstellen der Produktion funktioniert dies einwandfrei.

Am Ende habe ich die erstellte Version von pixi.js wie import PIXI from 'pixi.js/bin/pixi.js' . Und jetzt sehe ich eine Warnung, aber Hot Reload funktioniert:

[HMR] ./~/pixi.js/bin/pixi.js Critical dependencies: 34:477-484 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ./~/pixi.js/bin/pixi.js 34:477-484

Ich denke, Sie benötigen möglicherweise eine Art Plugin für das Webpack, damit .json geladen werden kann. Node / browserify unterstützen es nativ.

@englercj Es wird unterstützt, wenn json-loader konfiguriert ist. Ich bin kein Experte für Webpacks, aber dies könnte ein Problem sein, das durch Webpack-Hot-Middleware verursacht wird. Da das Bundle funktioniert, wird der Fehler nur im Dev-Modus angezeigt.

Hmm, komisch. Ja, tut mir leid, ich bin auch nicht damit vertraut: /

Webpack hat die Option, "vorgepackte" Bibliotheken zu laden, ohne sie zu analysieren (wie pixi.js). Fügen Sie einfach noParse zu Ihrem Modulabschnitt in der Webpack-Konfiguration hinzu.

module: { noParse: [ /.*(pixi\.js).*/ ], }

Dieses Snippet muss das Problem mit den internen Anforderungen lösen.

Dies ist das direkteste und einfachste Beispiel für die Konfiguration von Webpack mit PIXI, das ich gefunden habe.

https://gist.github.com/mjackson/ecd3914ebee934f4daf4

Dieses Wesentliche ist das einfachste Webpack + pixi.js Konfiguration:

https://gist.github.com/mjackson/ecd3914ebee934f4daf4

(mit tollen Kommentaren)

Der oben verlinkte Kern leidet an einem Fehler im Zusammenhang mit pixijs / pixi. js @ 5a53e38 - Die Versionsnummer von __VERSION__

webpack.config.js sollte diesen Loader enthalten:

{
  include: path.resolve(__dirname, 'node_modules/pixi.js'),
  loader: 'transform/cacheable?browserify-versionify'
}

@mjackson erwähnt hier, weil Kernkommentare anscheinend keine Benachrichtigungen senden 😞

Bin gerade auf dieses Problem gestoßen. Vielen Dank für die Lösung!

Hier ist eine funktionierende Konfiguration für Webpack / Typescript und PixiJS :-). https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771

Dieser Thread wurde automatisch gesperrt, da nach dem Schließen keine Aktivität mehr stattgefunden hat. Bitte öffnen Sie eine neue Ausgabe für verwandte Fehler.