Pixi.js: (v4) Erreur GLSLify lors de l'utilisation de Webpack

Salut @Adam-Meisen ! Ce problème est-il apparu plusieurs fois maintenant et je l'ai récemment vécu moi-même de première main ! Il est temps de le réparer je pense

Le remplacement de glsify par du texte brut ferait-il l'affaire que vous pensez? Nous n'utilisons rien de spécifique pour glslify pour l'instant.

Pensées bienvenues ! ??

Je viens juste de découvrir cette bibliothèque, donc je crains de ne pas vraiment savoir comment gslify est utilisé en interne, mais d'après certaines recherches, il semble que ce soit un message d'erreur très vague avec de nombreuses causes potentielles. Ce que vous avez suggéré fonctionnerait probablement. Bien qu'idéalement, j'aimerais comprendre les causes de cela, l'éviter entièrement n'est probablement pas une mauvaise idée.

Je n'ai toujours pas réussi à le faire fonctionner, même avec ify-loader, browserify-versionify et glslify, j'ai donc utilisé la version cdn de la bibliothèque.

+1 pour le réparer, pour l'instant j'utilise la version pré-build
`importer PIXI de 'pixi.js/bin/pixi.js'

Je ne connais pas très bien Webpack. Quelqu'un pourrait-il créer un projet/dépôt de test simple qui reproduit ce problème afin que je puisse l'utiliser pour le débogage ?

Vous pouvez le reproduire avec les éléments suivants :

npm installer 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);

Depuis le dossier racine du projet :

webpack --config webpack.config.js

Le résultat (projectroot)/scripts/bundle.js est accessible dans un navigateur Web et reproduira l'erreur glslify. Je viens de l'écrire et de le tester moi-même très rapidement, si cela ne fonctionne pas, faites-le moi savoir et j'essaierai de le réparer pour vous.

Certains problèmes sont résolus ici concernant ce problème, tels que https://github.com/pixijs/pixi.js/issues/2439#issuecomment -243820323. Cependant, je ne sais pas comment PIXI pourrait fournir une compatibilité prête à l'emploi sans ces configurations personnalisées sur le projet hôte.

Vous pouvez l'exiger avec succès à l'aide de webpack en utilisant la configuration ci-dessous. J'ai testé uniquement sur webpack 2.x, mais ça devrait aller aussi sur 1.x.

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"
}

Malheureusement, même avec tout cela, cela ne fonctionne toujours pas pour moi.

@Adam-Meisen c'est étrange. Cela vous dérange-t-il de partager vos webpack.config.js et package.json pour que je puisse y jeter un œil ? À votre santé!

+1 J'ai aussi ce problème. J'ai suivi la solution temporaire de @stephanedemotte (ci-dessus) pour l'instant.

Hé, désolé pour l'attente, je suis allé de l'avant et j'ai réduit mon projet à un minimum raisonnable pour qu'il soit aussi facile que possible d'identifier le problème.

Comme vous pouvez le voir dans package.json , j'ai inclus tous les modules que les gens ont déclarés nécessaires pour résoudre le problème.

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

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

Enregistrez les fichiers dans un répertoire et exécutez webpack , puis ouvrez index.html dans un navigateur ou servez-le avec webpack-dev-server .

@Adam-Meisen hé, ça me va bien. Avez-vous des erreurs avec cette configuration? Cela a fonctionné ici :

Fonctionnant sur OSX 10.10.1, ma version Node et NPM est la suivante :

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

Je suis sous Windows, exécutant le nœud 6.3.1 et npm 3.10.6.

J'ai oublié de mentionner que j'utilise OSX. Il doit y avoir quelque chose à voir avec ce problème : https://github.com/stackgl/glslify/issues/77

@endel La solution ci-dessus ne fonctionne pas non plus pour moi - même problème que @Adam-Meisen. Toujours obtenir l'erreur glslify même avec les packages appropriés installés et webpack.config.js identiques.

@xTiming pouvez-vous confirmer le système d'exploitation que vous utilisez ?

@endel Windows 10, en utilisant Chrome comme navigateur.

@endel @xTiming Salut, les gars. J'ai trouvé un moyen.

webpack.config.js

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

Le séparateur de fenêtre est .
Contrairement à son osx.

On le voit aussi dans la fenêtre10.

La solution publiée par @kimorkim fonctionne bien, mais elle perturbe toutes les saisies de DefinitelyTyped. Existe-t-il un moyen d'alias 'pixi.js' vers la version binaire ?

pour les frappes, je me réfère aux fichiers js externes.

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

import * as PIXI from "pixi.js";

J'ai créé un exemple de partage.

https://github.com/ossas/sudoku_example2

Dis moi si jamais tu as un problème

Fermez ceci pour l'instant car il semble qu'il y ait des solutions ici. De plus, pour la v5, nous supprimerons glslfy et probablement aussi browserify.

Ce fil a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau problème pour les bogues liés.