Pixi.js: التوافق مع حزمة الويب

تم إنشاؤها على ٢٨ مايو ٢٠١٥  ·  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...

لذلك قمت بتعيين node: { fs: "empty" } في تهيئة webpack وتخلصت من الأخطاء المذكورة أعلاه.

ولكن بعد ذلك هذا الخطأ:

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
مصدر
picture fusepilot

التعليق الأكثر فائدة

يحتوي Webpack على خيار لتحميل مكتبات "معبأة مسبقًا" بدون تحليلها (مثل pixi.js) ، فقط أضف noParse إلى قسم الوحدة في webpack config ، شيء من هذا القبيل:

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

يجب أن يحل هذا المقتطف المشكلة مع المتطلبات الداخلية.

picture Nazariglez في ١٢ نوفمبر ٢٠١٥
👍5 🎉3 😄2

ال 16 كومينتر

نستخدم browserify brfs transform:

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

لست متأكدًا من كيفية جعل حزمة الويب هذه متوافقة ، هل هناك أي مقالات على حزمة الويب التي تعمل بتحويلات المتصفح؟

englercj picture englercj في ٢٨ مايو ٢٠١٥

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

drkibitz picture drkibitz في ٢٩ مايو ٢٠١٥

drkibitzenglercj شكرا لالتلميح، وكنت قادرا على البدء في بيكسي + Webpack باستخدام تحويل لودر + سلمان محمل.

fusepilot هنا هو تكوين حزمة الويب الذي أستخدمه.

mking picture mking في ٦ يونيو ٢٠١٥

لم أتمكن من تشغيل configmking عند استخدام Babel. اضطررت إلى نقل brfs إلى postLoaders ، ولكنه يعمل الآن: https://gist.github.com/oal/898df82fa64e54dd16d0

oal picture oal في ٤ يوليو ٢٠١٥

إغلاق لأن هذا يبدو أنه تم الرد عليه.

englercj picture englercj في ٢ أغسطس ٢٠١٥

لم أتمكن من حل مشكلة حيث يحاول pixi.js/src/core/const.js طلب ../../package.json وأظهر خطأ Cannot find module "../../package.json" . حاولت بكلتا الطريقتين عن طريقoal. يحدث هذا فقط عندما أستخدم إعادة تحميل الوحدة الساخنة ، على الرغم من أن بناء الإنتاج يعمل بشكل جيد.

انتهى بي الأمر باستخدام الإصدار المدمج من pixi.js مثل import PIXI from 'pixi.js/bin/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 picture RanzQ في ٣١ أكتوبر ٢٠١٥

أعتقد أنك قد تحتاج إلى نوع من المكونات الإضافية لـ webpack لكي تدعم .json تتطلب التحميل؟ Node / browserify يدعمه أصلاً.

englercj picture englercj في ٣١ أكتوبر ٢٠١٥

englercj يتم دعمه عند تكوين json-loader . أنا لست خبيرًا في حزمة الويب ولكن قد تكون هذه مشكلة بسبب webpack-hot-middleware ، نظرًا لأن الحزمة تعمل ، يظهر الخطأ في وضع dev فقط.

RanzQ picture RanzQ في ٣١ أكتوبر ٢٠١٥

هممم ، غريب. نعم آسف ، فأنا لست على دراية به أيضًا: /

englercj picture englercj في ٣١ أكتوبر ٢٠١٥

يحتوي Webpack على خيار لتحميل مكتبات "معبأة مسبقًا" بدون تحليلها (مثل pixi.js) ، فقط أضف noParse إلى قسم الوحدة في webpack config ، شيء من هذا القبيل:

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

يجب أن يحل هذا المقتطف المشكلة مع المتطلبات الداخلية.

Nazariglez picture Nazariglez في ١٢ نوفمبر ٢٠١٥
👍5 🎉3 😄2

هذا هو المثال الأكثر مباشرة وبساطة لتكوين حزمة الويب باستخدام PIXI الذي وجدته.

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

davydka picture davydka في ٨ يناير ٢٠١٦

هذا المعنى هو أبسط تهيئة webpack + pixi.js:

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

(مع تعليقات رائعة)

FlorianBELLAZOUZ picture FlorianBELLAZOUZ في ٢١ مارس ٢٠١٦
👍3

المعنى المرتبط أعلاه يعاني من خلل متعلق بالبيكسيات / بيكسي. js @ 5a53e38 - تم الإبلاغ عن رقم إصدار __VERSION__

يجب أن يتضمن webpack.config.js هذا المُحمل:

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

mjackson يذكر هنا لأن التعليقات الجوهرية لا ترسل إشعارات على ما يبدو

cltatman picture cltatman في ٨ مايو ٢٠١٦
❤1

فقط واجهت هذه المشكلة. شكرا جزيلا على الحل!

czanella picture czanella في ١٨ يوليو ٢٠١٦

فيما يلي تكوين عمل لـ Webpack / Typescript و PixiJS :-). https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771

Nek- picture Nek- في ٢٥ سبتمبر ٢٠١٧
👍1

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

lock[bot] picture lock[bot] في ٢٤ فبراير ٢٠١٩
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

YuryKuvetski picture YuryKuvetski  ·  3تعليقات
Makio64 picture Makio64  ·  3تعليقات
SebastienFPRousseau picture SebastienFPRousseau  ·  3تعليقات
Darker picture Darker  ·  3تعليقات
readygosports picture readygosports  ·  3تعليقات