Pixi.js: Compatibilidade com webpack

Criado em 28 mai. 2015 · 16Comentários · Fonte: pixijs/pixi.js

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

A primeira tentativa me deu um monte de erros de 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...

Então eu configurei node: { fs: "empty" } na configuração do webpack e isso eliminou os erros acima.

Mas então este erro:

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

Então adicionei json-loader à configuração do webpack.

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

Sucesso. Seria bom se isso funcionasse fora da caixa, no entanto.

🤔 Question

Fonte

fusepilot

Comentários muito úteis

Webpack tem uma opção para carregar bibliotecas "pré-empacotadas" sem analisá-las (como pixi.js), basta adicionar noParse à sua seção de módulo na configuração do webpack, algo assim:

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

Este trecho deve resolver o problema com as necessidades internas.

Nazariglez em 12 nov. 2015

👍5 🎉3 😄2

Todos 16 comentários

Usamos browserify brfs transform:

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

Não tenho certeza de como você tornaria esse webpack compatível. Há algum artigo sobre webpack executando transformações de browserify?

englercj em 28 mai. 2015

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

drkibitz em 29 mai. 2015

@drkibitz @englercj Obrigado pela dica, consegui começar a usar Pixi + Webpack usando transform-loader + json-loader.

@fusepilot Aqui está a configuração do

mking em 6 jun. 2015

Não consegui fazer a configuração de @mking funcionar ao usar o Babel. Tive que mover brfs para postLoaders, mas agora funciona: https://gist.github.com/oal/898df82fa64e54dd16d0

oal em 4 jul. 2015

Fechando já que parece respondido.

englercj em 2 ago. 2015

Não consegui resolver um problema em que pixi.js/src/core/const.js tenta exigir ../../package.json e gera um erro Cannot find module "../../package.json" . Eu tentei com os dois caminhos por @oal. Isso acontece apenas quando estou usando o recarregamento de módulo quente, no entanto, na construção de produção funciona bem.

Acabei usando a versão construída do pixi.js como import PIXI from 'pixi.js/bin/pixi.js' . E agora vejo um aviso, mas o hot reload funciona:

[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 em 31 out. 2015

Eu acho que você pode precisar de algum tipo de plugin para webpack para suportar .json requer carregamento? Node / browserify oferece suporte nativo.

englercj em 31 out. 2015

@englercj É suportado quando json-loader está configurado. Não sou um especialista em webpack, mas isso pode ser algum problema causado por webpack-hot-middleware , uma vez que o bundle funciona, o erro aparece apenas no modo dev.

RanzQ em 31 out. 2015

Hmm, estranho. Desculpe, também não estou familiarizado com ele: /

englercj em 31 out. 2015

Webpack tem uma opção para carregar bibliotecas "pré-empacotadas" sem analisá-las (como pixi.js), basta adicionar noParse à sua seção de módulo na configuração do webpack, algo assim:

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

Este trecho deve resolver o problema com as necessidades internas.

Nazariglez em 12 nov. 2015

👍5 🎉3 😄2

Este é o exemplo mais direto e simples de configuração do webpack com PIXI que encontrei.

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

davydka em 8 jan. 2016

Esta essência é a configuração mais simples do webpack + pixi.js:

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

(com ótimos comentários)

FlorianBELLAZOUZ em 21 mar. 2016

👍3

a essência do link acima sofre de um bug relacionado a pixijs / pixi. js @ 5a53e38 - o número da versão do pixi é reportado como __VERSION__

webpack.config.js deve incluir este carregador:

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

@mjackson mencionando aqui porque os comentários essenciais aparentemente não enviam notificações 😞

cltatman em 8 mai. 2016

❤1

Acabei de encontrar esse problema. Muito obrigado pela solução!

czanella em 18 jul. 2016

Aqui está uma configuração de trabalho para Webpack / Typescript e PixiJS :-). https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771

Nek- em 25 set. 2017

👍1

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que foi fechado. Abra um novo problema para bugs relacionados.