Pixi.js: (v4) Erro GLSLify ao usar Webpack

Criado em 6 set. 2016  ·  22Comentários  ·  Fonte: pixijs/pixi.js

Executar meu aplicativo Pixi após empacotar com Webpack resulta no seguinte erro:

browser.js:2 Uncaught Error: It appears that you're using glslify in browserify without its transform applied. Make sure that you've set up glslify as a source transform

Algumas pesquisas sugerem que este é um problema comum entre os usuários do Webpack. https://gist.github.com/mjackson/ecd3914ebee934f4daf4#gistcomment -1842689

Esta solução parece funcionar para algumas pessoas, mas ainda não a fiz funcionar. Estou postando um problema para ver se podemos chegar a uma diretriz comum para fazer o Pixi funcionar em um aplicativo webpack.

Para reproduzir o problema, basta fazer um aplicativo webpack com o seguinte conteúdo:

var PIXI = require('pixi.js');
var renderer = new PIXI.WebGLRenderer(256, 256);

Comentários muito úteis

@endel @xTiming Olá, pessoal. Eu encontrei um caminho.

webpack.config.js

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

O separador de janela é.
Ao contrário de seu osx.

image

Também pode ser visto na janela10.

image
image

Todos 22 comentários

Olá, @ Adam-Meisen! Esse problema apareceu algumas vezes agora e recentemente eu mesmo o experimentei em primeira mão! É hora de consertar, eu acho 💃

Substituir o glsify por texto bruto resolveria o problema que você pensa? Não estamos usando nada específico para glslify ainda ..

Pensamentos bem-vindos! 👍

Eu acabei de descobrir esta biblioteca, então eu realmente não tenho ideia de como o gslify é usado internamente, mas de algumas pesquisas parece que é uma mensagem de erro muito vaga com muitas causas potenciais. O que você sugeriu provavelmente funcionaria. Embora, idealmente, eu gostaria de descobrir o que causa isso, evitá-lo totalmente provavelmente não é uma má ideia.

Eu ainda não consegui fazê-lo funcionar, mesmo com ify-loader, browserify-versionify e glslify, então estou usando o cdn build da biblioteca.

1 para consertar, por enquanto eu uso a versão pré-construída
`importar PIXI de 'pixi.js / bin / pixi.js'

Não estou muito familiarizado com o Webpack. Alguém poderia fazer um projeto / repositório de teste simples que reproduzisse esse problema para que eu pudesse usar para depurar?

Você pode reproduzir isso com o seguinte:

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

Na pasta raiz do projeto:

webpack --config webpack.config.js

O /scripts/bundle.js resultante (projectroot) pode ser acessado em um navegador da web e reproduzirá o erro glslify. Acabei de escrever e testar sozinho muito rapidamente, se isso não funcionar, me avise e eu tentarei consertar para você.

Existem alguns problemas fechados aqui em relação a esse problema, como https://github.com/pixijs/pixi.js/issues/2439#issuecomment -243820323. Não tenho certeza de como o PIXI poderia fornecer compatibilidade pronta para uso sem essas configurações personalizadas no projeto host.

Você pode solicitá-lo com sucesso usando o webpack usando a configuração abaixo. Testei apenas no webpack 2.x, mas deve funcionar bem no 1.x também.

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

Infelizmente, mesmo com tudo isso, ainda não funciona para mim.

@ Adam-Meisen isso é estranho. Você se importa em compartilhar seus webpack.config.js e package.json para que eu possa dar uma olhada? Saúde!

1 Eu também tenho esse problema. Eu segui a solução temporária de @stephanedemotte (acima) por enquanto.

Ei, desculpe a espera, eu fui em frente e reduzi meu projeto a um mínimo razoável para facilitar ao máximo a identificação do problema.

Como você pode ver em package.json , incluí todos os módulos que as pessoas disseram serem necessários para corrigir o problema.

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

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

Salve os arquivos em um diretório e execute webpack , depois abra index.html em um navegador ou coloque webpack-dev-server nele.

@ Adam-Meisen ei, parece bom para mim. Você tem algum erro com essa configuração? Funcionou aqui:

screen shot 2016-09-15 at 22 26 06

Executando no OSX 10.10.1, minha versão do Node e NPM é a seguinte:

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

Estou no Windows, executando o nó 6.3.1 e o npm 3.10.6.
chrome_2016-09-15_15-35-38

Esqueci de mencionar que estou usando OSX. Deve haver algo a ver com este problema: https://github.com/stackgl/glslify/issues/77

@endel A solução acima também não está funcionando para mim - mesmo problema que @Adam-Meisen. Ainda obtendo o erro glslify, mesmo com pacotes apropriados instalados e webpack.config.js idênticos.

@xTiming você pode confirmar o sistema operacional que está usando?

@endel Windows 10, usando o Chrome como navegador.

@endel @xTiming Olá, pessoal. Eu encontrei um caminho.

webpack.config.js

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

O separador de janela é.
Ao contrário de seu osx.

image

Também pode ser visto na janela10.

image
image

A solução que @kimorkim postou funciona bem, mas atrapalha todas as digitações do DefinitelyTyped. Existe alguma maneira de alias 'pixi.js' para a versão binária?

para tipificações, refiro-me a arquivos js externos.

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

Criei um compartilhamento de amostra.

https://github.com/ossas/sudoku_example2

Me diga se você já teve um problema

Fechando isso por enquanto, pois parece que há soluções aqui. Além disso, para a v5, iremos descartar o glslfy e provavelmente o navegadorify também.

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

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

MRVDH picture MRVDH  ·  3Comentários

SebastienFPRousseau picture SebastienFPRousseau  ·  3Comentários

sntiagomoreno picture sntiagomoreno  ·  3Comentários

zcr1 picture zcr1  ·  3Comentários

lunabunn picture lunabunn  ·  3Comentários