Pixi.js: Kompatibilitas dengan webpack
var PIXI = require('pixi.js');
Upaya pertama memberi saya banyak kesalahan 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...
Jadi saya menetapkan node: { fs: "empty" } di konfigurasi webpack dan itu menyingkirkan kesalahan di atas.
Tapi kemudian kesalahan ini:
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
Jadi saya menambahkan json-loader ke konfigurasi webpack.
module: {
loaders: [{
test: /\.json$/,
loader: 'json-loader'
}]
}
Keberhasilan. Akan lebih baik jika ini berhasil di luar kotak.
fusepilot
Semua 16 komentar
Kami menggunakan browserify brfs transform:
https://github.com/GoodBoyDigital/pixi.js/blob/master/package.json#L57 -L61
Saya tidak yakin bagaimana Anda akan membuat webpack kompatibel, apakah ada artikel tentang webpack yang menjalankan transformasi browserify?
englercj
pada 28 Mei 2015
drkibitz
pada 29 Mei 2015
@drkibitz @englercj Terima kasih atas petunjuknya, saya dapat memulai dengan Pixi + Webpack menggunakan transform-loader + json-loader.
@fusepilot Berikut adalah konfigurasi webpack yang saya gunakan.
mking
pada 6 Jun 2015
Saya tidak bisa menjalankan konfigurasi https://gist.github.com/oal/898df82fa64e54dd16d0
oal
pada 4 Jul 2015
Penutupan karena ini sepertinya dijawab.
englercj
pada 2 Agu 2015
Saya tidak dapat memecahkan masalah di mana pixi.js/src/core/const.js mencoba meminta ../../package.json dan membuat kesalahan Cannot find module "../../package.json" . Saya mencoba dengan kedua cara oleh @oal. Ini hanya terjadi ketika saya menggunakan hot module reload, pada build produksi itu berfungsi dengan baik.
Saya akhirnya menggunakan versi bawaan dari pixi.js seperti import PIXI from 'pixi.js/bin/pixi.js' . Dan sekarang saya melihat peringatan tetapi hot reload berfungsi:
[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
pada 31 Okt 2015
Saya kira Anda mungkin memerlukan beberapa jenis plugin untuk webpack agar dapat mendukung .json memerlukan pemuatan? Node / browserify mendukungnya secara native.
englercj
pada 31 Okt 2015
@englercj Ini didukung ketika json-loader dikonfigurasi. Saya bukan ahli webpack tetapi ini mungkin beberapa masalah yang disebabkan oleh webpack-hot-middleware , karena bundel berfungsi, kesalahan hanya muncul pada mode dev.
RanzQ
pada 31 Okt 2015
Hmm, aneh. Ya maaf saya juga tidak terbiasa dengan itu: /
englercj
pada 31 Okt 2015
Webpack memiliki opsi untuk memuat pustaka "pra-pengemasan" tanpa menguraikannya (seperti pixi.js), cukup tambahkan noParse ke bagian modul Anda di konfigurasi webpack, sesuatu seperti itu:
module: {
noParse: [
/.*(pixi\.js).*/
],
}
Potongan ini harus menyelesaikan masalah dengan kebutuhan internal.
Nazariglez
pada 12 Nov 2015
Ini adalah contoh paling langsung dan sederhana dari mengkonfigurasi webpack dengan PIXI yang saya temukan.
davydka
pada 8 Jan 2016
Inti ini adalah konfigurasi webpack + pixi.js paling sederhana:
https://gist.github.com/mjackson/ecd3914ebee934f4daf4
(dengan komentar bagus)
FlorianBELLAZOUZ
pada 21 Mar 2016
inti yang ditautkan di atas menderita bug yang terkait dengan pixijs / pixi. js @ 5a53e38 - Nomor versi pixi dilaporkan sebagai __VERSION__
webpack.config.js harus menyertakan pemuat ini:
{
include: path.resolve(__dirname, 'node_modules/pixi.js'),
loader: 'transform/cacheable?browserify-versionify'
}
@mjackson menyebutkan di sini karena inti komentar tampaknya tidak mengirim pemberitahuan 😞
cltatman
pada 8 Mei 2016
Baru saja mengalami masalah ini. Terima kasih banyak atas solusinya!
czanella
pada 18 Jul 2016
Berikut adalah konfigurasi yang berfungsi untuk Webpack / Typecript dan PixiJS :-). https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771
Nek-
pada 25 Sep 2017
Utas ini telah dikunci secara otomatis karena tidak ada aktivitas baru-baru ini setelah ditutup. Silakan buka masalah baru untuk bug terkait.
![lock[bot] picture](https://avatars1.githubusercontent.com/in/6672?v=4&s=40)
lock[bot]
pada 24 Feb 2019
Masalah terkait
readygosports
·
3Komentar
lucap86
·
3Komentar
lunabunn
·
3Komentar
samueller
·
3Komentar
neciszhang
·
3Komentar
Komentar yang paling membantu
Webpack memiliki opsi untuk memuat pustaka "pra-pengemasan" tanpa menguraikannya (seperti pixi.js), cukup tambahkan noParse ke bagian modul Anda di konfigurasi webpack, sesuatu seperti itu:
module: { noParse: [ /.*(pixi\.js).*/ ], }Potongan ini harus menyelesaikan masalah dengan kebutuhan internal.