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

プロジェクトのルートフォルダから：

webpack --config webpack.config.js

結果の（projectroot）/scripts/bundle.jsはWebブラウザーでアクセスでき、glslifyエラーを再現します。 自分ですばやく作成してテストしました。これでうまくいかない場合はお知らせください。修正を試みます。

https://github.com/pixijs/pixi.js/issues/2439#issuecomment -243820323など、この問題に関してここでクローズされたいくつかの問題があり

以下の構成を使用して、webpackを使用して正常に要求できます。 webpack 2.xでのみテストしましたが、1.xでも問題ないはずです。

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

残念ながら、それでも、それでも私にはうまくいきません。

@ 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とnpm3.10.6を実行しています。

私がOSXを使用していることを言及するのを忘れました。 この問題と関係があるはずです： https ：

@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が投稿したソリューションは

入力については、外部の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も使用します。

このスレッドは、閉じられた後に最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。