Pixi.js: (v4) GLSLify error saat menggunakan Webpack

Hai @Adam-Meisen ! Apakah masalah ini muncul beberapa kali sekarang dan saya baru-baru ini mengalaminya sendiri secara langsung! Waktu untuk memperbaikinya, saya pikir

Akankah mengganti glsify dengan teks mentah melakukan trik menurut Anda? Kami belum menggunakan sesuatu yang spesifik untuk glslify..

Pikiran selamat datang! 👍

Saya baru saja menemukan perpustakaan ini, jadi saya khawatir saya benar-benar tidak tahu bagaimana gslify digunakan secara internal, tetapi dari beberapa pencarian sepertinya itu adalah pesan kesalahan yang sangat kabur dengan banyak kemungkinan penyebab. Apa yang Anda sarankan mungkin akan berhasil. Meskipun idealnya saya ingin mencari tahu apa yang menyebabkan ini, menghindarinya sepenuhnya mungkin bukan ide yang buruk.

Saya masih belum berhasil membuatnya bekerja, bahkan dengan ify-loader, browserify-versionify, dan glslify, jadi saya telah menggunakan cdn build dari perpustakaan.

+1 untuk memperbaikinya, untuk saat ini saya menggunakan versi pra-bangun
`impor PIXI dari 'pixi.js/bin/pixi.js'

Saya tidak terlalu akrab dengan Webpack. Bisakah seseorang membuat proyek/repo pengujian sederhana yang mereproduksi masalah ini sehingga saya dapat menggunakannya untuk men-debug?

Anda dapat mereproduksi ini dengan yang berikut:

npm instal paket web pixi.js

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

Dari folder root proyek:

webpack --config webpack.config.js

Hasil (projectroot)/scripts/bundle.js dapat diakses di browser web dan akan mereproduksi kesalahan glslify. Baru saja menulis dan mengujinya sendiri dengan sangat cepat, jika ini tidak berhasil, beri tahu saya dan saya akan mencoba memperbaikinya untuk Anda.

Ada beberapa masalah yang ditutup di sini terkait masalah ini, seperti https://github.com/pixijs/pixi.js/issues/2439#issuecomment -243820323. Tidak yakin bagaimana PIXI dapat memberikan kompatibilitas out-of-the-box tanpa konfigurasi khusus ini pada proyek Host.

Anda dapat berhasil memintanya menggunakan webpack dengan menggunakan konfigurasi di bawah ini. Saya menguji hanya di webpack 2.x, tetapi seharusnya baik-baik saja di 1.x juga.

webpack.config.js:

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

paket.json:

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

Sayangnya, bahkan dengan semua itu, itu masih tidak berhasil untuk saya.

@Adam-Meisen itu aneh. Maukah Anda membagikan webpack.config.js dan package.json agar saya dapat melihatnya? Bersulang!

+1 Saya juga punya masalah ini. Saya mengikuti solusi sementara @stephanedemotte (di atas) untuk saat ini.

Hei, maaf tentang menunggu, saya melanjutkan dan mengupas proyek saya ke minimum yang masuk akal untuk membuatnya semudah mungkin untuk mengidentifikasi masalah.

Seperti yang Anda lihat di package.json , saya telah menyertakan semua modul yang menurut orang diperlukan untuk memperbaiki masalah.

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

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

Simpan file ke direktori dan jalankan webpack , lalu buka index.html di browser atau sajikan dengan webpack-dev-server .

@Adam-Meisen hei, terlihat bagus untukku. Apakah Anda memiliki kesalahan dengan konfigurasi itu? Ini berhasil di sini:

Berjalan di OSX 10.10.1, versi Node dan NPM saya adalah sebagai berikut:

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

Saya menggunakan Windows, menjalankan node 6.3.1 dan npm 3.10.6.

Lupa menyebutkan saya menggunakan OSX. Pasti ada hubungannya dengan masalah ini: https://github.com/stackgl/glslify/issues/77

@endel Solusi di atas juga tidak berfungsi untuk saya - masalah yang sama dengan @Adam-Meisen. Masih mendapatkan kesalahan glslify bahkan dengan paket yang tepat diinstal dan webpack.config.js yang identik.

@xTiming dapatkah Anda mengonfirmasi sistem operasi yang Anda gunakan?

@endel Windows 10, menggunakan Chrome sebagai browser.

@endel @xTiming Hai teman-teman. Saya menemukan cara.

webpack.config.js

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

Pemisah jendela adalah .
Berbeda dengan osx-nya.

Itu terlihat juga di window10.

Solusi yang diposting @kimorkim berfungsi dengan baik, tetapi mengacaukan semua pengetikan dari PastiTyped. Apakah ada cara untuk alias 'pixi.js' ke versi biner?

untuk pengetikan, saya merujuk ke file js eksternal.

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

import * as PIXI from "pixi.js";

Saya membuat bagian sampel.

https://github.com/ossas/sudoku_example2

Beritahu saya jika Anda pernah memiliki masalah

Menutup ini untuk saat ini karena sepertinya ada solusi di sini. Selain itu untuk v5 kami akan menjatuhkan glslfy dan mungkin juga browserify.

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas terbaru setelah ditutup. Silakan buka edisi baru untuk bug terkait.