Pixi.js: Compatibilité avec le webpack

Créé le 28 mai 2015 · 16Commentaires · Source: pixijs/pixi.js

var PIXI = require('pixi.js');

La première tentative m'a donné un tas d'erreurs Webpack:

ERROR in ./~/pixi.js/src/filters/ascii/AsciiFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/ascii
 @ ./~/pixi.js/src/filters/ascii/AsciiFilter.js 3:9-22

ERROR in ./~/pixi.js/src/filters/blur/BlurXFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/blur
 @ ./~/pixi.js/src/filters/blur/BlurXFilter.js 3:9-22

ERROR in ./~/pixi.js/src/filters/blur/BlurYFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/blur
 @ ./~/pixi.js/src/filters/blur/BlurYFilter.js 3:9-22

etc...

J'ai donc défini node: { fs: "empty" } dans la configuration de webpack et cela a éliminé les erreurs ci-dessus.

Mais alors cette erreur:

ERROR in ./~/pixi.js/package.json
Module parse failed: /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "pixi.js",
|   "version": "3.0.6",
|   "description": "Pixi.js is a fast lightweight 2D library that works across all devices.",
 @ ./~/pixi.js/src/core/const.js 14:13-42

J'ai donc ajouté json-loader à la configuration de webpack.

module: {
  loaders: [{
    test: /\.json$/,
    loader: 'json-loader'
  }]
}

Succès. Ce serait bien si cela fonctionnait hors de la boîte.

🤔 Question

Source

fusepilot

Commentaire le plus utile

Webpack a une option pour charger des bibliothèques "pré-emballées" sans les analyser (comme pixi.js), ajoutez simplement noParse à votre section module dans la configuration de webpack, quelque chose comme ça:

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

Cet extrait de code doit résoudre le problème avec les exigences internes.

Nazariglez le 12 nov. 2015

👍5 🎉3 😄2

Tous les 16 commentaires

Nous utilisons browserify brfs transform:

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

Je ne sais pas comment vous rendriez ce Webpack compatible, y a-t-il des articles sur le Webpack exécutant les transformations de browserify?

englercj le 28 mai 2015

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

drkibitz le 29 mai 2015

@drkibitz @englercj Merci pour l'indice, j'ai pu démarrer avec Pixi + Webpack en utilisant transform-loader + json-loader.

@fusepilot Voici la configuration du

mking le 6 juin 2015

Je n'ai pas pu faire fonctionner la configuration de https://gist.github.com/oal/898df82fa64e54dd16d0

oal le 4 juil. 2015

Clôture puisque cela semble répondu.

englercj le 2 août 2015

Je n'ai pas pu résoudre un problème où pixi.js/src/core/const.js essaie d'exiger ../../package.json et génère une erreur Cannot find module "../../package.json" . J'ai essayé dans les deux sens par @oal. Cela ne se produit que lorsque j'utilise le rechargement de module à chaud, mais en production, cela fonctionne bien.

J'ai fini par utiliser la version intégrée de pixi.js comme import PIXI from 'pixi.js/bin/pixi.js' . Et maintenant, je vois un avertissement mais le rechargement à chaud fonctionne:

[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

RanzQ le 31 oct. 2015

Je suppose que vous pourriez avoir besoin d'une sorte de plugin pour webpack pour qu'il prenne en charge .json nécessite un chargement? Node / browserify le supporte nativement.

englercj le 31 oct. 2015

@englercj Il est pris en charge lorsque json-loader est configuré. Je ne suis pas un expert en webpack mais cela pourrait être un problème causé par webpack-hot-middleware , puisque le bundle fonctionne, l'erreur apparaît uniquement en mode dev.

RanzQ le 31 oct. 2015

Hmm, bizarre. Ouais désolé je ne suis pas familier avec ça non plus: /

englercj le 31 oct. 2015

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

Cet extrait de code doit résoudre le problème avec les exigences internes.

Nazariglez le 12 nov. 2015

👍5 🎉3 😄2

C'est l'exemple le plus direct et le plus simple de configuration de webpack avec PIXI que j'ai trouvé.

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

davydka le 8 janv. 2016

Cet essentiel est la configuration la plus simple du webpack + pixi.js:

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

(avec d'excellents commentaires)

FlorianBELLAZOUZ le 21 mars 2016

👍3

l'essentiel lié ci-dessus souffre d'un bogue lié à pixijs / pixi. js @ 5a53e38 - le numéro de version de pixi est indiqué comme __VERSION__

webpack.config.js devrait inclure ce chargeur:

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

@mjackson mentionne ici parce que les commentaires essentiels n'envoient apparemment pas de notifications 😞

cltatman le 8 mai 2016

❤1

Je viens de rencontrer ce problème. Merci beaucoup pour la solution!

czanella le 18 juil. 2016

Voici une configuration de travail pour Webpack / Typescript et PixiJS :-). https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771

Nek- le 25 sept. 2017

👍1

Ce thread a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau numéro pour les bogues associés.