Pixi.js: (v4) Webpack 사용 시 GLSLify 오류

안녕하세요 @Adam-Meisen입니다! 이 문제가 지금 몇 번 나타났고 최근에 직접 경험했습니다! 고칠 때가 된 것 같아요 💃

glsify를 원시 텍스트로 바꾸는 것이 당신의 생각에 도움이 될까요? 우리는 아직 glslify에 특정한 것을 사용하지 않습니다.

생각 환영! 👍

방금 이 라이브러리를 발견했기 때문에 gslify가 내부적으로 어떻게 사용되는지 전혀 모릅니다. 그러나 일부 검색에서는 많은 잠재적 원인이 있는 매우 모호한 오류 메시지인 것 같습니다. 당신이 제안한 것이 아마 효과가 있을 것입니다. 이상적으로는 이 문제의 원인을 파악하고 싶지만 완전히 피하는 것이 나쁜 생각은 아닐 것입니다.

ify-loader, browserify-versionify 및 glslify를 사용해도 여전히 작동하지 않았기 때문에 라이브러리의 cdn 빌드를 사용하고 있습니다.

수정하려면 +1, 지금은 사전 빌드 버전을 사용합니다.
`'pixi.js/bin/pixi.js'에서 PIXI 가져오기

나는 Webpack에 익숙하지 않습니다. 누군가 디버깅에 사용할 수 있도록 이 문제를 재현하는 간단한 테스트 프로젝트/리포지토리를 만들 수 있습니까?

다음을 사용하여 이를 재현할 수 있습니다.

npm 설치 pixi.js 웹팩

웹팩.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);

프로젝트의 루트 폴더에서:

webpack --config webpack.config.js

결과 (projectroot)/scripts/bundle.js는 웹 브라우저에서 액세스할 수 있으며 glslify 오류를 재현합니다. 직접 작성하고 매우 빠르게 테스트했습니다. 이것이 작동하지 않는 경우 알려주시면 수정하도록 노력하겠습니다.

https://github.com/pixijs/pixi.js/issues/2439#issuecomment -243820323과 같이 이 문제와 관련하여 여기에 닫힌 몇 가지 문제가 있습니다. 하지만 호스트 프로젝트에서 이러한 사용자 정의 구성 없이 PIXI가 즉시 사용 가능한 호환성을 제공할 수 있는지 확실하지 않습니다.

아래 구성을 사용하여 webpack을 사용하여 성공적으로 요구할 수 있습니다. webpack 2.x에서만 테스트했지만 1.x에서도 괜찮을 것입니다.

webpack.config.js:

  module: {
    loaders: [
      /// ...
      { test: /node_modules\/pixi\.js/, loader: 'ify' },
    ]
  },

패키지.json:

"devDependencies": {
  "browserify-versionify": "^1.0.6",
  "glslify": "^5.1.0",
  "ify-loader": "^1.0.3",
  "pixi.js": "^4.0.0"
}

불행히도, 그 모든 것에도 불구하고 여전히 저에게는 효과가 없습니다.

@Adam-Meisen 이상합니다. 내가 볼 수 있도록 webpack.config.js 및 package.json 공유해도 될까요? 건배!

+1 저도 이 문제가 있습니다. 지금은 @stephanedemotte 의 임시 솔루션(위)을 따랐

안녕하세요, 기다리게 해서 죄송합니다. 문제를 가능한 한 쉽게 식별할 수 있도록 프로젝트를 합리적인 최소값으로 줄였습니다.

package.json 에서 볼 수 있듯이 나는 사람들이 문제를 해결하는 데 필요하다고 말한 모든 모듈을 포함했습니다.

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

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

파일을 디렉토리에 저장하고 webpack 를 실행한 다음 브라우저에서 index.html 를 열거나 webpack-dev-server 와 함께 제공하십시오.

@Adam-Meisen 이봐, 나에게 좋아 보인다. 해당 구성에 오류가 있습니까? 여기에서 작동했습니다.

OSX 10.10.1에서 실행되는 내 노드 및 NPM 버전은 다음과 같습니다.

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

저는 Windows에서 노드 6.3.1 및 npm 3.10.6을 실행하고 있습니다.

내가 OSX를 사용하고 있다는 것을 잊었습니다. 이 문제와 관련이 있어야 합니다: https://github.com/stackgl/glslify/issues/77

@endel 위의 솔루션도 작동하지 않습니다. @Adam-

@xTiming 사용 중인 운영 체제를 확인할 수 있습니까?

@endel Windows 10, Chrome을 브라우저로 사용합니다.

@endel @xTiming 안녕하세요, 여러분. 방법을 찾았습니다.

webpack.config.js

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

창 구분 기호는 입니다.
그것의 osx와 달리.

window10에서도 볼 수 있습니다.

@kimorkim이 게시한 솔루션은 잘 작동하지만 확실히 Typed의 모든 입력이 엉망입니다. 바이너리 버전에 'pixi.js'의 별칭을 지정하는 방법이 있습니까?

타이핑을 위해 외부 js 파일을 참조합니다.

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

import * as PIXI from "pixi.js";

샘플 공유를 만들었습니다.

https://github.com/ossas/sudoku_example2

문제가 있으면 말해줘

여기에 솔루션이 있는 것 같기 때문에 지금은 이것을 닫습니다. 또한 v5의 경우 glslfy와 browserify도 삭제할 예정입니다.

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를 여십시오.