Pixi.js: webpackとの互換性

作成日 2015年05月28日 · 16コメント · ソース: pixijs/pixi.js

var PIXI = require('pixi.js');

最初の試みで、たくさんのwebpackエラーが発生しました。

ERROR in ./~/pixi.js/src/filters/ascii/AsciiFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/ascii
 @ ./~/pixi.js/src/filters/ascii/AsciiFilter.js 3:9-22

ERROR in ./~/pixi.js/src/filters/blur/BlurXFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/blur
 @ ./~/pixi.js/src/filters/blur/BlurXFilter.js 3:9-22

ERROR in ./~/pixi.js/src/filters/blur/BlurYFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/blur
 @ ./~/pixi.js/src/filters/blur/BlurYFilter.js 3:9-22

etc...

そこで、webpackの設定でnode: { fs: "empty" }を設定すると、上記のエラーが解消されました。

しかし、このエラー：

ERROR in ./~/pixi.js/package.json
Module parse failed: /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "pixi.js",
|   "version": "3.0.6",
|   "description": "Pixi.js is a fast lightweight 2D library that works across all devices.",
 @ ./~/pixi.js/src/core/const.js 14:13-42

そこで、 json-loaderをwebpackの設定に追加しました。

module: {
  loaders: [{
    test: /\.json$/,
    loader: 'json-loader'
  }]
}

成功。しかし、これが箱から出してうまくいったらいいのにと思います。

🤔 Question

ソース

fusepilot

最も参考になるコメント

Webpackには、解析せずに「事前にパックされた」ライブラリ（pixi.jsなど）をロードするオプションがあります。webpackconfigのモジュールセクションにnoParseを追加するだけです。

module: { noParse: [ /.*(pixi\.js).*/ ], }

このスニペットは、内部要件の問題を解決する必要があります。

Nazariglez 2015年11月12日

👍5 🎉3 😄2

全てのコメント16件

browserify brfs変換を使用します。

https://github.com/GoodBoyDigital/pixi.js/blob/master/package.json#L57 -L61

そのwebpackを互換性のあるものにする方法がわかりませんが、browserifyトランスフォームを実行しているwebpackに関する記事はありますか？

englercj 2015年05月28日

https://github.com/webpack/transform-loader

drkibitz 2015年05月29日

@drkibitz @englercjヒントをありがとう、transform-loader + json-loaderを使用してPixi + Webpackを使い始めることができました。

@fusepilotこれが私が使用しているwebpack設定です。

mking 2015年06月06日

Babelを使用しているときに@mkingの設定を機能させることができませんでした。 brfsをpostLoadersに移動する必要がありましたが、現在は機能しています： https ：//gist.github.com/oal/898df82fa64e54dd16d0

oal 2015年07月04日

これは答えられたようですので、締めくくります。

englercj 2015年08月02日

pixi.js/src/core/const.jsが../../package.jsonを要求しようとし、エラーCannot find module "../../package.json"発生するという問題を解決できません両方の方法を試しました。これは、ホットモジュールのリロードを使用している場合にのみ発生しますが、本番ビルドでは正常に機能します。

結局、 import PIXI from 'pixi.js/bin/pixi.js'ようなビルドバージョンのpixi.jsを使用することになりました。そして今、警告が表示されますが、ホットリロードは機能します：

[HMR] ./~/pixi.js/bin/pixi.js Critical dependencies: 34:477-484 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ./~/pixi.js/bin/pixi.js 34:477-484

RanzQ 2015年10月31日

.jsonをサポートするためにwebpack用のプラグインが必要になるかもしれません。 Node / browserifyはそれをネイティブにサポートします。

englercj 2015年10月31日

@englercj json-loaderが構成されている場合にサポートされます。私はwebpackの専門家ではありませんが、これはwebpack-hot-middlewareが原因の問題である可能性があります。バンドルが機能するため、エラーは

RanzQ 2015年10月31日

うーん、変だ。うん、すみません、私もよく知らないです：/

englercj 2015年10月31日

module: { noParse: [ /.*(pixi\.js).*/ ], }

このスニペットは、内部要件の問題を解決する必要があります。

Nazariglez 2015年11月12日

👍5 🎉3 😄2

これは、私が見つけたPIXIを使用してwebpackを構成する最も直接的で単純な例です。

https://gist.github.com/mjackson/ecd3914ebee934f4daf4

davydka 2016年01月08日

この要点は、最も単純なwebpack + pixi.js構成です：

https://gist.github.com/mjackson/ecd3914ebee934f4daf4

（素晴らしいコメント付き）

FlorianBELLAZOUZ 2016年03月21日

👍3

上にリンクされている要点は、pixijs / pixiに関連するバグに悩まされています。 js @ 5a53e38 - __VERSION__として報告されます

webpack.config.jsは、次のローダーを含める必要があります。

{
  include: path.resolve(__dirname, 'node_modules/pixi.js'),
  loader: 'transform/cacheable?browserify-versionify'
}

@mjacksonがここで言及しているのは、要点のコメントは明らかに通知を送信しないためです😞

cltatman 2016年05月08日

❤1

ちょうどこの問題に遭遇しました。解決策をどうもありがとう！

czanella 2016年07月18日

これがWebpack / TypescriptとPixiJSの動作構成です:-)。 https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771

Nek- 2017年09月25日

👍1

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

lock[bot] 2019年02月24日

このページは役に立ちましたか？

0 / 5 - 0 評価

Pixi.js: webpackとの互換性

最も参考になるコメント

全てのコメント16件

関連する問題