Pixi.js: المساعدة المطلوبة: جهد التحويل ES6

ما المسار الذي تريد أن تسلكه Let and const؟ افتراضيًا إلى const ، واستخدم let فقط للخصائص التي يجب تغيير مرجعها
أو
افتراضيًا للسماح ، واستخدم فقط const كتلميح للمطور أنه ، أنا جاد ، لا يغير هذا.

الخيار السابق. افتراضي لاستخدام const. لقد قمت بتحويل جميع المتغيرات الداخلية للسماح بمشكلات تحديد النطاق الواضحة وأصلحتها ومنعت استخدام var مع jshint. يحتاج إلى تمريرة أخرى مع const.

الأشياء التي أوصي بها:

• [x] استخدم babel-preset-es2015-loose ، كان لدي أداء ضعيف مع فقط babel-preset-es2015 وحده.
• [x] قم بالتبديل إلى eslint ، فهو يتمتع بدعم ES6 أفضل وهو أفضل من jshint بشكل عام. هذه نقطة انطلاق جيدة لأسلوب بيكسي . سيشتكي أيضًا من الأماكن التي يمكن أن تستخدم const لكنك تستخدم let . يجعل من السهل العثور على جميع الأماكن التي تحتاج إلى إصلاحها من أجل ثابت.
• [x] استخدم الإصدار الرئيسي الأخير من jsdoc ، فهو يحتوي على الكثير من إصلاحات ES6 التي لم يتم إصدارها بعد.
• قم بالتبديل إلى حزمة الويب.

شكراenglercj. قائمة جيدة.

englercj يحتوي ملف babel-preset-es2015-loose على تحذير بالإيقاف ، هل جربت babel-preset-es2015 مع الخيار {"loose": true} كما يوحي ذلك؟

أفضل أيضًا حزمة الويب على المتصفح ، وهما رابطان مفيدان:
https://github.com/webpack/webpack/tree/master/examples/multi-part-library
http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

تفضيلاتي هي الانتظار على حزمة الويب وليس تكديسها. يحتمل أن يكون لعلاقات عامة أخرى أصغر. يمثل هذا التغيير تغييرًا في عملية البناء ولكن ليس بالضرورة تحسينًا لـ ES6. أيضا ، سوف تحتاج إلى التأكد من عمل خرائط المصادر والرؤوس وما إلى ذلك. أنا أفهم كيف هو أفضل ولكن دعونا ننتظر ذلك الآن.

يحتوي ملف babel-preset-es2015-loose على تحذير من الإيقاف ، فهل جربت babel-preset-es2015 مع الخيار {"loose": true} كما يوحي ذلك؟

Ha ، تمت إضافة _just_ منذ أسبوعين. لم أحاول ذلك لأنه لم يكن موجودًا في الوقت الذي بدأت فيه استخدامه.

مرحبا جميعا،

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

أيضًا ، لست متأكدًا من مدى تحديث هذا الجدول: https://kpdecker.github.io/six-speed/ هل تعلمون يا رفاق؟

إذا كان لا يزال كذلك ، فعلينا أن نكون حريصين على عدم الذهاب إلى جنون for-of وتحويل الأشياء التي لا تحتاج إلى أن تكون كذلك ، على سبيل المثال: إذا كان لا يزال يؤدي إلى انخفاض الأداء كما هو موضح على الطاولة ، فلا ينبغي لنا ' ر استخدامه عند تكرار الرسم البياني لمشهد الأطفال.

يجب على Babel الآن تحسين for-of للمصفوفات (انظر: التحسين ) ، يبدو أن هذه الاختبارات قديمة جدًا.

على أي حال ، alvinsight أنت على حق ، كل شيء لا يجب أن يكون ES2015.

قائمة جيدة englercj !

وافق أيضًا معalvinsight. نحن نرى بالفعل كودًا أكثر وضوحًا مع بناء جملة es6 ، لذا فزنا من جميع النواحي :)

يجب أن يعتمد كل قرار آخر على الأداء - "هل يبدو أفضل ولكن يعمل بشكل أبطأ - لا تفعل ذلك"

حلقات المصفوفة هي مثال جيد - ليست هناك حاجة لاستبدال الأشياء السريعة والقابلة للقراءة فقط لأننا نستطيع ذلك.

نعم أيضًا لـ webpack! bigtimebuddy صحيح ، يجب أن يكون هذا الجزء الثاني من هذا التحول إلى es6.

متفق!
من الأجمل أن تكون قادرًا أخيرًا على القراءة والكتابة class Sprite extends Container !

محدث

• تم استبدال jshint بـ eslint (وإصلاح أخطاء الفحص ، eslint للفوز!)
• استخدام loose: true مع babel-preset-es2015

مساء كل شيء!

ضرب القليل من الشناج مع الخلطات لدينا ..

Object.assign(
    core.DisplayObject.prototype,
    require('./interactiveTarget')
);

ما ورد أعلاه لا يعمل حاليًا في فرع ES6 لذلك يتم إفساد أشياء مثل التفاعل.

هل هناك طريقة جيدة للقيام بذلك مع فصول es6؟

الأجوبة على بطاقة بريدية من فضلك!

حسنًا ، لقد كنت محقًا في المرة الأولى - الرمز أعلاه لا يعمل حاليًا .. (هل يمكنني إلقاء اللوم على حقيقة أنه ليلة الجمعة؟)

أعتقد أن هذا هو المكان الذي يلمع فيه التكوين!

حسنًا ، ما الذي لا يعمل؟ نجح هذا بالنسبة لي:

class MyThing {}
Object.assign(MyThing.prototype, { newFn: function () { console.log('mix'); } });
var mything = new MyThing();
mything.newFn(); // logs: "mix"

انسخ والصق في وحدة تحكم الكروم ، ويبدو أنه يعمل بشكل جيد.

مثير للاهتمام! التفاعل لا يعمل حاليًا ويبدو أن الخصائص التفاعلية مفقودة. ربما سبب آخر؟ سوف نستمر في الحفر ...

آه ها! وجدته

Object.assign(
    core.DisplayObject.prototype,
    require('./interactiveTarget') <--- this is a require!
);

import interactiveTarget from './interactiveTarget';

Object.assign(
    core.DisplayObject.prototype,
    interactiveTarget
);

يمكن؟

نعم!

العلاقات العامة 1 هنا: https://github.com/pixijs/pixi.js/pull/2960

يقوم بإصلاح بعض البتات مثل المزيج والنص.

غدا سوف أنظر إلى المرشحات ...

تبدو جيدة حقا على الرغم من الفصول!

عمل جيد! ياه ، باستخدام يتطلب () مثل هذا من شأنه أن يعيد كائنًا بمفتاح افتراضي واحد يحتوي على كل شيء آخر كنت تتوقعه.

المرشحات تبدو جيدة الآن! شغلت هذا في مشروع حالي أعمل عليه معقد جدًا - ويبدو أن كل شيء يعمل بنسبة 100٪!

قد تختبرها في بعض الألعاب الأخرى ولكن من الجيد دمجها قريبًا!

bigtimebuddy هل جربت هذا البناء باستخدام pixi-animate؟

إلقاء هذا هناك .. يبدو أن التتبع أسرع من بابل؟
يستحق التحقيق؟

https://kpdecker.github.io/six-speed/

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

سأقترح عليكم يا رفاق التفكير في استخدام TypeScript كجزء من إعادة الكتابة / التكيف الرئيسية هذه. فقط بعض النقاط حول TypeScript:

• سيصبح استخدام نظام الكتابة في JavaScript هو المعيار الجديد ، إنها مجرد مسألة وقت.
• إنها JavaScript. لا فرق في بناء الجملة إلى جانب نظام الكتابة.
• يحسن جودة التعليمات البرمجية. من المحتمل أن تجد قدرًا كبيرًا من التعليمات البرمجية التي تحتاج إلى إعادة هيكلة قليلاً لمطابقة الأنواع الموجودة في الأماكن الصحيحة.
• زيادة فحص جودة طلب السحب - إذا كانت هناك مشكلة في نوع ما ، فلا يمكن دمج التصحيح ببساطة.

أعلم أن هذا ليس بالأمر السهل ، لكنني أعتقد أنه يمكن أن يجلب فوائد كبيرة لقاعدة الشفرة والمجتمع.
هتافات!

endel أقوم بنقل pixi-spine إلى الكتابة المطبوعة ، وستكون هناك عروض توضيحية لمكونات TS لـ pixi.

endel فضولي فقط ، لكن TS حل المشكلة التي واجهتها عندما نظرت إليها آخر مرة: إنها حالة الكل أو لا شيء عندما يتعلق الأمر بالمخرجات ، أي _ كل شيء _ يتم نقله مرة أخرى إلى ES5 ، أو لا شيء ، بناءً على الهدف ؟

أتذكر أنها لم تستخدم polyfill على الإطلاق. لذلك إذا كنت تريد تشغيل قاعدة تعليمات برمجية واحدة على مجموعة واسعة من المتصفحات ، بدءًا من أحدث المتصفحات وصولاً إلى القديمة ، فلا يزال يتعين عليك استهداف ES5 ، ويتم تجاهل جميع الميزات الجديدة الرائعة التي تدعمها المتصفحات الحديثة الآن بشكل أساسي أنها تنزل إلى ES5 على أي حال؟ أم أنها لا تزال هي الحالة التي تحتاج فيها إلى استخدام ES6 polyfill أعلى إخراج TS لتغطية جميع القواعد؟

أنه حالة الكل أو لا شيء عندما يتعلق الأمر بالمخرجات ، أي أن كل شيء يتم نقله مرة أخرى إلى ES5 ، أو لا شيء يعتمد على الهدف؟

لست متأكد مما تعنى بهذا. إذا كنت تستهدف ES5 ، فإنه يقوم بنقل بناء الجملة إلى ES5. لكن كذلك فعل بابل ، تراكوير ، وآخرون. هل هناك شيء محدد تشير إليه؟

أتذكر أنها لم تستخدم polyfill على الإطلاق.

إنها لا تفعل ذلك ، ولكن مرة أخرى لا تفعل بابل أو تراكور أو غيرهم من المترجمين ؛ لذلك لست متأكدًا مما أنت تقود؟ سيتعين علينا استخدام polyfills core-js في كلتا الحالتين (بابل أو TS).

أعتقد أن المناقشة هي babel لتحويل ES6 -> ES5 أو TypeScript لتحويل TS -> ES5. علينا أن نذهب ES5 في كلتا الحالتين. يمكن لـ TS استهداف ES6 ، ويمكننا شحن بناء ES6 إذا أردنا ذلك ، ولكنه سيكون بالإضافة إلى بناء ES5.

photonstorm باستخدام TypeScript ، على حد علمي ، لا يمكنك انتقاء واختيار الميزات للانتقال إلى ES5 كما يمكنك مع Babel.

أنا أستخدم TypeScript وأعتقد أنه رائع. أحب أن أرى Pixi تتبنى في النهاية. تشجع Google المطورين الآن على استخدام TypeScript مع Angular ، وهي علامة جيدة على الانتشار الواسع. بالنسبة إلى قاعدة بيانات معقدة مثل Pixi ، فسيتم تقديمها بشكل جيد عن طريق الكتابة الصارمة.

قد تتضمن بعض المشكلات التي يجب معالجتها باستخدام TypeScript jsdocs (أي شخص لديه خبرة في هذا؟) والاعتمادات الأولية التي قد تستخدم src عند require('pixi.js') (هل يطلب أي شخص مثل هذا؟).

كخطوة أولى ، لا يزال الانتقال إلى ES6 خيارًا جيدًا ، لأننا سنحتاج إلى التحويل إلى فئات على أي حال. يمكننا اعتبار TypeScript "مسارًا" آخر لتحديث قاعدة الكود بمجرد التأكد من إمكانية معالجة جميع المخاوف.

باستخدام TypeScript ، على حد علمي ، لا يمكنك انتقاء واختيار الميزات للانتقال إلى ES5 كما يمكنك مع Babel.

لم يكن لدي أي فكرة أنه يمكنك فعل ذلك مع بابل. لست متأكدًا من أنني أرى فائدة ذلك بالنسبة لنا حيث يتعين علينا استهداف ES5 على أي حال. لكن هذا أنيق!

قد تتضمن بعض المشكلات التي قد تحتاج إلى معالجة باستخدام TypeScript jsdocs

https://github.com/TypeStrong/typedoc

تبعيات المنبع التي قد تستخدم src عند طلب ('pixi.js') (هل يحتاج أي شخص مثل هذا؟).

يمكننا توجيه كلمة "main" إلى أي شيء نريده ، وباستخدام الكتابة المطبوعة ، يمكنك توجيهها إلى الملفات التي تم إنشاؤها (وليس _bundle_). على سبيل المثال ، تنتقل ملفات TS إلى src/ وتقوم بتحويل كل ملف إلى js/ أو شيء ما ، ثم أشر إلى main هناك. ثم نقوم أيضًا بتجميعها جميعًا ووضع الحزم في dist/ أو w / e. تأتي الحزمة npm مع ملفات js / tsd ولكن ليس مصدر TS عادةً (قابل للنقاش).

كخطوة أولى ، لا يزال الانتقال إلى ES6 خيارًا جيدًا ، لأننا سنحتاج إلى التحويل إلى فئات على أي حال. يمكننا اعتبار TypeScript "مسارًا" آخر لتحديث قاعدة الكود بمجرد التأكد من إمكانية معالجة جميع المخاوف.

👍

باستخدام TypeScript ، على حد علمي ، لا يمكنك انتقاء واختيار الميزات للانتقال إلى ES5 كما يمكنك مع Babel.

لقد أضافوا هذه الميزة على TypeScript 2.0: https://github.com/Microsoft/TypeScript/wiki/What 's-new-in-TypeScript # بما في ذلك الإعلانات المضمنة في النوع مع --- lib

من المعتاد استخدام ES5 كهدف مع تضمين ES6 كمكتبات ، للحصول على تعريفات النوع لأشياء مثل Symbol ، Map ، إلخ.

في الواقع ، كما قال englercj ، تحتاج إلى تضمين الحشوات بعد تجميع الكود الخاص بك بغض النظر عن المترجم الذي تستخدمه. لا يتضمن Babel polyfill Symbol لـ IE9 تلقائيًا ، على سبيل المثال.

لم يكن لدي أي فكرة أنه يمكنك فعل ذلك مع بابل. لست متأكدًا من أنني أرى فائدة ذلك بالنسبة لنا حيث يتعين علينا استهداف ES5 على أي حال. لكن هذا أنيق!

بالنسبة إلى Pixi ، ليس هذا مفيدًا ، ولكن نعم ، يمكنك اختيار إعدادات Babel المسبقة لتحديد ميزات معينة فقط للترجمة. يمكن أن يكون هذا مفيدًا إذا كنت تريد إنشاء ES6 ولكنك تريد فقط دعم ميزات V8 المتطورة في Node 6 و Electron 1 وما إلى ذلك.

إنها مفارقة مثيرة للاهتمام حقًا. استخدم ES6 للبناء ، لأنه نظيف ورائع ، ومدعوم جيدًا / محسّن داخليًا بواسطة المتصفحات الحديثة. ومع ذلك ، فقد تم تدمير كل هذا العمل الشاق من خلال التحويل كما هو الحال في عام 1995 :) (ومع التغييرات في بناء الجملة ، لا يمكنك الالتفاف حول هذا).

أقدر أن المشكلة عالمية ، ولا علاقة لها بـ TS أو Pixi. مجرد موقف غريب قليلاً.

photonstorm إنها مفارقة مؤسفة ، ونأمل أن يكون لدينا تصميمات ES6 و ES5 بحيث يمكن للتطبيقات المعبأة (مثل الإلكترون) استخدام بنية ES6.

انتقل فقط إلى المناقشة هنا :) لقد رأيت أشخاصًا يقومون بتحويل TS إلى ES6 ثم استخدموا Babel لتحويله إلى ES5 ، أعتقد إذا كنت تريد شيئًا مثل بعض الميزات التي قد تكون لطيفة جدًا؟

أيضًا ، هناك مجمّع وحدة (آخر ...) حوله ، ولكن أعتقد أن هذا يبدو أنه ينتج بعض الرموز الرائعة ، مع إمكانية وجود نواتج متعددة.
http://rollupjs.org/ حزم من بناء جملة الوحدة ES6 / ES2015 ، والتي أعتقد أنها لطيفة جدًا إذا كنت تريد إثبات الكود في المستقبل.

أنا +1 لـ PIXI يتم كتابته في تنقيط. من واقع خبرتي ، فإن الكتابة تساعد كثيرًا في بنية مشاريع مثل هذه. فقط إذا كان يمكن الحفاظ على الأداء :)

RollUp رائع ، وأنا أحب استخدامه. اهتزاز شجرتها ذكي للغاية. تستخدم مع bubel (بدلاً من babel) ، فهي تقدم سير عمل سريعًا حقًا.

من المثير للاهتمام أن نرى الكثير من الحب هنا. بالتأكيد لم يكن الأمر كذلك قبل عام :) هناك طرق لكتابة check ES2015 والتي قد تستحق الدراسة.

photonstorm لم يعثر على bubel ، لكن هناك "buble"

نعم نعم ، خطأ مطبعي. http://buble.surge.sh/

BubleTape هو أداة اختبار لطيفة له https://github.com/snuggs/buble-tape

هل # 2936 سبب تنازل الأعضاء عن المستندات؟ هذا به عضو واحد مكشوف ، حيث يحتوي على 25+.

هل يلزم إضافة @memberof إليهم الآن ، أم أن هناك بعض السحر الذي يمكن تطبيقه؟

@ staff0rd أعتقد أننا ما زلنا نقوم بتنظيف الأشياء ، بمجرد أن تستقر قليلاً سننظر في تنظيف المستندات. على الأرجح يكون ذلك فقط لأن إصدار jsdoc الذي نستخدمه به أخطاء ES6. يجب أن نكون قادرين على تنظيف هذا قريبًا.

تم دمج ES6 في dev ، شكرًا لكل من ساعد. إنه محل تقدير كبير!

إغلاق هذا الآن.

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