Pixi.js: (v4) خطأ GLSLify عند استخدام Webpack

مرحبًا @ Adam-Meisen! لو ظهرت هذه المشكلة عدة مرات الآن وقد جربتها بنفسي مؤخرًا! حان الوقت لإصلاحه على ما أعتقد 💃

هل سيؤدي استبدال glsify بالنص الخام إلى الحيلة التي تعتقد؟ نحن لا نستخدم أي شيء محدد لـ glslify حتى الآن ..

خواطر مرحب بها! 👍

لقد اكتشفت هذه المكتبة للتو ، لذلك أخشى أنه ليس لدي أي فكرة حقًا عن كيفية استخدام gslify داخليًا ، ولكن من خلال بعض عمليات البحث يبدو أنها رسالة خطأ غامضة للغاية مع العديد من الأسباب المحتملة. ما اقترحته سيعمل على الأرجح. على الرغم من أنني أرغب بشكل مثالي في معرفة أسباب ذلك ، إلا أن تجنبه تمامًا ربما لا يكون فكرة سيئة.

ما زلت لم أتمكن من تشغيله ، حتى مع ify-loader و browserify-versionify و glslify ، لذلك كنت أستخدم بناء cdn للمكتبة.

+1 لإصلاحه ، في الوقت الحالي أستخدم إصدار ما قبل الإنشاء
"استيراد PIXI من" pixi.js / bin / pixi.js "

لست على دراية تامة بـ Webpack. هل يمكن لشخص ما عمل مشروع اختبار / ريبو بسيط يعيد إنتاج هذه المشكلة حتى أتمكن من استخدامها لتصحيح الأخطاء؟

يمكنك إعادة إنتاج هذا باستخدام ما يلي:

npm تثبيت حزمة الويب 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);

من المجلد الجذر للمشروع:

webpack --config webpack.config.js

يمكن الوصول إلى (projectroot) / scripts/bundle.js الناتج في مستعرض ويب وسوف ينتج عنه خطأ glslify. لقد كتبته واختبرته بنفسي بسرعة كبيرة ، إذا لم يفلح ذلك ، أخبرني وسأحاول إصلاحه لك.

تم إغلاق بعض المشكلات هنا بخصوص هذه المشكلة ، مثل https://github.com/pixijs/pixi.js/issues/2439#issuecomment -243820323. لست متأكدًا من كيف يمكن لـ PIXI توفير توافق خارج الصندوق بدون هذه التكوين المخصص في المشروع المضيف.

يمكنك طلب ذلك بنجاح باستخدام حزمة الويب باستخدام التكوين أدناه. لقد اختبرت فقط على 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"
}

لسوء الحظ ، حتى مع كل ذلك ، ما زال الأمر غير صالح لي.

@ آدم مايسن هذا غريب. هل تمانع في مشاركة 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 ، إصدار Node و 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-Meisen. لا يزال يظهر خطأ glslify حتى مع تثبيت الحزم المناسبة و webpack.config.js المتطابق.

xTiming هل يمكنك تأكيد نظام التشغيل الذي تستخدمه؟

endel Windows 10 ، باستخدام Chrome كمتصفح.

endelxTiming مرحبا يا رفاق. لقد وجدت طريقة.

webpack.config.js

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

فاصل النافذة هو.
على عكس نظام التشغيل الخاص به.

يمكن رؤيته أيضًا في window10.

يعمل الحل kimorkim المنشور بشكل جيد ، لكنه يفسد جميع الكتابة من DefinitelyTyped. هل هناك طريقة ما إلى الاسم المستعار "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

قل لي إذا كان لديك مشكلة

إغلاق هذا الآن لأنه يبدو أن هناك حلولاً هنا. بالإضافة إلى الإصدار 5 ، سنقوم بإسقاط glslfy وربما المتصفح أيضًا.

تم قفل سلسلة الرسائل هذه تلقائيًا نظرًا لعدم وجود أي نشاط حديث بعد إغلاقه. الرجاء فتح قضية جديدة للأخطاء ذات الصلة.