Pixi.js: Compatibilidad con webpack

Creado en 28 may. 2015  ·  16Comentarios  ·  Fuente: pixijs/pixi.js

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

El primer intento me dio un montón de errores de paquete web:

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...

Así que configuré node: { fs: "empty" } en la configuración del paquete web y eso eliminó los errores anteriores.

Pero luego este error:

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

Así que agregué json-loader a la configuración de webpack.

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

Éxito. Sin embargo, sería bueno si esto funcionara fuera de la caja.

🤔 Question

Comentario más útil

Webpack tiene una opción para cargar bibliotecas "preempaquetadas" sin analizarlas (como pixi.js), simplemente agregue noParse a la sección de su módulo en la configuración del paquete web, algo así:

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

Este fragmento debe resolver el problema con los requisitos internos.

Todos 16 comentarios

Usamos browserify brfs transform:

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

No estoy seguro de cómo haría compatible ese paquete web, ¿hay algún artículo sobre el paquete web que ejecute transformaciones de browserify?

@drkibitz @englercj Gracias por la sugerencia, pude comenzar con Pixi + Webpack usando transform-loader + json-loader.

@fusepilot Aquí está la configuración del

No pude hacer que la configuración de @mking funcionara cuando usaba Babel. Tuve que mover brfs a postLoaders, pero ahora funciona: https://gist.github.com/oal/898df82fa64e54dd16d0

Cerrando ya que esto parece respondido.

No pude resolver un problema en el que pixi.js/src/core/const.js intenta requerir ../../package.json y muestra un error Cannot find module "../../package.json" . Intenté con ambas formas por @oal. Sin embargo, esto sucede solo cuando estoy usando la recarga de módulo en caliente, en la compilación de producción funciona bien.

Terminé usando la versión construida de pixi.js como import PIXI from 'pixi.js/bin/pixi.js' . Y ahora veo una advertencia, pero la recarga en caliente 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

Supongo que es posible que necesite algún tipo de complemento para el paquete web para que admita .json ¿requiere carga? Node / browserify lo admite de forma nativa.

@englercj Es compatible cuando se configura json-loader . No soy un experto en webpack, pero esto podría ser un problema causado por webpack-hot-middleware , ya que el paquete funciona, el error aparece solo en modo dev.

Hmm, raro. Sí, lo siento, tampoco estoy familiarizado con él: /

Webpack tiene una opción para cargar bibliotecas "preempaquetadas" sin analizarlas (como pixi.js), simplemente agregue noParse a la sección de su módulo en la configuración del paquete web, algo así:

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

Este fragmento debe resolver el problema con los requisitos internos.

Este es el ejemplo más directo y simple de configuración de paquete web con PIXI que encontré.

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

Esta esencia es la configuración más simple de webpack + pixi.js:

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

(con buenos comentarios)

la esencia vinculada anteriormente sufre un error relacionado con pixijs / pixi. js @ 5a53e38 : el número de versión de pixi se informa como __VERSION__

webpack.config.js debe incluir este cargador:

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

@mjackson menciona aquí porque los comentarios esenciales no envían notificaciones aparentemente 😞

Me encontré con este problema. ¡Muchas gracias por la solución!

Aquí hay una configuración de trabajo para Webpack / Typescript y PixiJS :-). https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771

Este hilo se ha bloqueado automáticamente ya que no ha habido ninguna actividad reciente después de su cierre. Abra un nuevo problema para errores relacionados.

¿Fue útil esta página
0 / 5 - 0 calificaciones