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);
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
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'
}
};
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:
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.
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.
module: {
loaders: [
...
{ test: path.resolve(__dirname, 'node_modules', 'pixi.js'), loader: 'ify' },
...
]
},
O separador de janela é.
Ao contrário de seu osx.
Também pode ser visto na janela10.
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.
Comentários muito úteis
@endel @xTiming Olá, pessoal. Eu encontrei um caminho.
webpack.config.js
O separador de janela é.
Ao contrário de seu osx.
Também pode ser visto na janela10.