Pixi.js: (v4) Error de GLSLify al usar Webpack

¡Hola @ Adam-Meisen! ¡Este problema apareció varias veces y recientemente lo experimenté de primera mano! Creo que es hora de arreglarlo 💃

¿Reemplazar glsify con texto sin formato haría el truco que crees? Todavía no estamos usando nada específico para glslify.

¡Bienvenidos los pensamientos! 👍

Acabo de descubrir esta biblioteca, así que me temo que realmente no tengo idea de cómo se usa gslify internamente, pero a partir de algunas búsquedas, parece que es un mensaje de error muy vago con muchas causas potenciales. Lo que sugirió probablemente funcionaría. Aunque idealmente me gustaría averiguar qué causa esto, evitarlo por completo probablemente no sea una mala idea.

Sin embargo, todavía no he logrado que funcione, incluso con ify-loader, browserify-versionify y glslify, así que he estado usando la compilación cdn de la biblioteca.

+1 para solucionarlo, por ahora uso la versión previa a la compilación
`importar PIXI desde 'pixi.js / bin / pixi.js'

No estoy muy familiarizado con Webpack. ¿Alguien podría hacer un proyecto / repositorio de prueba simple que reproduzca este problema para que pueda usarlo para depurar?

Puede reproducir esto con lo siguiente:

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

Desde la carpeta raíz del proyecto:

webpack --config webpack.config.js

Se puede acceder al (projectroot) /scripts/bundle.js resultante en un navegador web y reproducirá el error de glslify. Simplemente lo escribí y lo probé yo mismo muy rápidamente, si esto no funciona, avíseme e intentaré arreglarlo por usted.

Hay algunos problemas resueltos aquí con respecto a este problema, como https://github.com/pixijs/pixi.js/issues/2439#issuecomment -243820323. Sin embargo, no estoy seguro de cómo PIXI podría proporcionar compatibilidad lista para usar sin esta configuración personalizada en el proyecto host.

Puede solicitarlo con éxito utilizando el paquete web mediante la configuración a continuación. Probé solo en webpack 2.x, pero debería estar bien en 1.x también.

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

Desafortunadamente, incluso con todo eso, todavía no funciona para mí.

@ Adam-Meisen eso es extraño. ¿Te importaría compartir tus webpack.config.js y package.json para que pueda echar un vistazo? ¡Salud!

+1 También tengo este problema. Seguí la solución temporal de

Oye, perdón por la espera, seguí adelante y reduje mi proyecto a un mínimo razonable para que sea lo más fácil posible identificar el problema.

Como puede ver en package.json , he incluido todos los módulos que la gente ha dicho que son necesarios para solucionar el problema.

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

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

Guarde los archivos en un directorio y ejecute webpack , luego abra index.html en un navegador o sirva con webpack-dev-server .

@ Adam-Meisen hey, se ve bien para mí. ¿Tiene algún error con esa configuración? Funcionó aquí:

Ejecutando en OSX 10.10.1, mi versión de Node y NPM es la siguiente:

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

Estoy en Windows, ejecutando el nodo 6.3.1 y npm 3.10.6.

Olvidé mencionar que estoy usando OSX. Debe haber algo que hacer con este problema: https://github.com/stackgl/glslify/issues/77

@endel La solución anterior tampoco funciona para mí, el mismo problema que @ Adam-Meisen. Todavía aparece el error glslify incluso con los paquetes adecuados instalados y webpack.config.js idénticos.

@xTiming ¿puedes confirmar el sistema operativo que estás usando?

@endel Windows 10, usando Chrome como navegador.

@endel @xTiming Hola, chicos. Encontre un camino.

webpack.config.js

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

El separador de ventanas es.
A diferencia de su osx.

También se ve en la ventana 10.

La solución que @kimorkim publicó funciona bien, pero estropea todos los mecanografiados de DefinitelyTyped. ¿Hay alguna forma de alias 'pixi.js' para la versión binaria?

para tipificaciones, me refiero a archivos js externos.

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

import * as PIXI from "pixi.js";

Creé un recurso compartido de muestra.

https://github.com/ossas/sudoku_example2

Dime si alguna vez tuviste un problema

Cerrando esto por ahora ya que parece que hay soluciones aquí. Además, para la v5 soltaremos glslfy y probablemente también navegaremos.

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