Pixi.js: (v4) GLSLify-Fehler bei der Verwendung von Webpack

Hallo @Adam-Meisen! Hatte dieses Problem jetzt ein paar Mal und ich habe es kürzlich selbst aus erster Hand erlebt! Zeit es zu reparieren denke ich 💃

Würde das Ersetzen von glsify durch Rohtext Ihrer Meinung nach der Trick sein? Wir verwenden noch nichts Spezifisches, um zu glslify.

Gedanken willkommen! 👍

Ich habe diese Bibliothek gerade erst entdeckt, daher habe ich leider keine Ahnung, wie gslify intern verwendet wird, aber nach einigen Recherchen scheint es sich um eine sehr vage Fehlermeldung mit vielen möglichen Ursachen zu handeln. Was Sie vorgeschlagen haben, würde wahrscheinlich funktionieren. Obwohl ich idealerweise herausfinden möchte, was dies verursacht, ist es wahrscheinlich keine schlechte Idee, es vollständig zu umgehen.

Ich habe es jedoch immer noch nicht geschafft, es zum Laufen zu bringen, selbst mit ify-loader, browserify-versionify und glslify, also habe ich den cdn-Build der Bibliothek verwendet.

+1 um es zu beheben, im Moment verwende ich die vorgefertigte Version
`PIXI aus 'pixi.js/bin/pixi.js' importieren

Ich kenne mich mit Webpack nicht so gut aus. Könnte jemand ein einfaches Testprojekt/-repo erstellen, das dieses Problem reproduziert, damit ich es zum Debuggen verwenden kann?

Sie können dies mit folgendem reproduzieren:

npm installieren pixi.js-Webpack

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: path.resolve(__dirname, 'index.js'),
    output: {
        path: path.resolve(__dirname, 'scripts/'),
        filename: 'bundle.js'
    },
    node: {
        fs: 'empty'
    }
};

index.js

var PIXI = require('pixi.js');
console.log(PIXI);
var renderer = new PIXI.WebGLRenderer(512, 512);

Aus dem Stammordner des Projekts:

webpack --config webpack.config.js

Die resultierende (projectroot)/scripts/bundle.js kann in einem Webbrowser aufgerufen werden und reproduziert den glslify-Fehler. Habe es gerade sehr schnell selbst geschrieben und getestet, wenn das nicht funktioniert, lass es mich wissen und ich werde versuchen, es für dich zu beheben.

Hier sind einige Probleme zu diesem Problem geschlossen, z. B. https://github.com/pixijs/pixi.js/issues/2439#issuecomment -243820323. Ich bin mir jedoch nicht sicher, wie PIXI Out-of-the-Box-Kompatibilität ohne diese benutzerdefinierte Konfiguration im Hostprojekt bieten könnte.

Sie können es erfolgreich mit Webpack anfordern, indem Sie die folgende Konfiguration verwenden. Ich habe nur auf Webpack 2.x getestet, sollte aber auch auf 1.x in Ordnung sein.

webpack.config.js:

  module: {
    loaders: [
      /// ...
      { test: /node_modules\/pixi\.js/, loader: 'ify' },
    ]
  },

package.json:

"devDependencies": {
  "browserify-versionify": "^1.0.6",
  "glslify": "^5.1.0",
  "ify-loader": "^1.0.3",
  "pixi.js": "^4.0.0"
}

Leider funktioniert es bei mir trotz alledem immer noch nicht.

@Adam-Meisen, das ist seltsam. Macht es Ihnen etwas aus, Ihre webpack.config.js und package.json teilen, damit ich sie mir ansehen kann? Danke schön!

+1 Dieses Problem habe ich auch. Ich bin vorerst der

Hey, entschuldige die Wartezeit, ich habe mein Projekt auf ein vernünftiges Minimum reduziert, um es so einfach wie möglich zu machen, das Problem zu identifizieren.

Wie Sie in package.json , habe ich alle Module eingefügt, von denen gesagt wurde, dass sie notwendig sind, um das Problem zu beheben.

    "browserify-versionify": "^1.0.6",
    "glslify": "^5.1.0",
    "ify-loader": "^1.0.3",

https://gist.github.com/Adam-Meisen/db219b1815633400844b350788a11a6e

Speichern Sie die Dateien in einem Verzeichnis und führen Sie webpack , öffnen Sie dann index.html in einem Browser oder stellen Sie es mit webpack-dev-server .

@Adam-Meisen hey, sieht gut aus für mich. Haben Sie irgendwelche Fehler mit dieser Konfiguration? Hier hat es funktioniert:

Unter OSX 10.10.1 läuft meine Node- und NPM-Version wie folgt:

$ node --version
v6.3.0
$ npm --version
3.10.3

Ich verwende Windows und führe Knoten 6.3.1 und npm 3.10.6 aus.

Vergessen zu erwähnen, dass ich OSX verwende. Es muss etwas mit diesem Problem zu tun haben: https://github.com/stackgl/glslify/issues/77

@endel Die obige Lösung funktioniert bei mir auch nicht - gleiches Problem wie @Adam-Meisen. Immer noch der glslify-Fehler, auch wenn die richtigen Pakete installiert und identische webpack.config.js sind.

@xTiming können Sie das verwendete Betriebssystem bestätigen?

@endel Windows 10 mit Chrome als Browser.

@endel @xTiming Hallo Leute. Ich habe einen Weg gefunden.

webpack.config.js

module: {
        loaders: [
            ...
            { test: path.resolve(__dirname, 'node_modules', 'pixi.js'), loader: 'ify' },
            ...
        ]
    },

Der Fenstertrenner ist .
Im Gegensatz zu seinem osx.

Es wird auch im Fenster angezeigt10.

Die von @kimorkim gepostete Lösung funktioniert gut, aber sie bringt alle Eingaben von DefinitelyTyped durcheinander. Gibt es eine Möglichkeit, 'pixi.js' als Alias ​​für die Binärversion zu verwenden?

für Eingaben verweise ich auf externe js-Dateien.

  externals: {
      // require("jquery") is external and available
      //  on the global var jQuery
      "pixi.js": "PIXI"
  },

import * as PIXI from "pixi.js";

Ich habe eine Beispielfreigabe erstellt.

https://github.com/ossas/sudoku_example2

Sag mir, wenn du jemals ein Problem hast

Schließe dies vorerst, da es hier anscheinend Lösungen gibt. Außerdem werden wir für v5 glslfy und wahrscheinlich auch browserify entfernen.

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