Pixi.js: मदद चाहिए: ES6 रूपांतरण प्रयास

लेट और कॉन्स्ट के साथ आप किस रूट पर जाना चाहते हैं? कॉन्स्ट के लिए डिफ़ॉल्ट, और केवल उन गुणों के लिए उपयोग करें जिनका संदर्भ बदलना चाहिए
या
जाने के लिए डिफ़ॉल्ट, और केवल डेवलपर को संकेत के रूप में कॉन्स का उपयोग करें कि वे, मैं गंभीर हूं, इसे न बदलें।

पूर्व विकल्प। कॉन्स्ट का उपयोग करने के लिए डिफ़ॉल्ट। मैंने सभी आंतरिक युद्धों को स्पष्ट स्कोपिंग मुद्दों को जाने और तय करने के लिए परिवर्तित कर दिया और var के उपयोग को jshint के साथ अस्वीकार कर दिया। कॉन्स के साथ एक और पास की जरूरत है।

जिन चीजों की मैं सिफारिश करूंगा:

• [x] बैबेल-प्रीसेट-एस2015-लूज़ का उपयोग करें, मेरे पास केवल बैबेल-प्रीसेट-एस2015 के साथ खराब परफ़ था।
• [x] एस्लिंट पर स्विच करें, इसमें बेहतर ES6 समर्थन है और यह सामान्य रूप से jshint से बेहतर है। यहाँ पिक्सी की शैली के लिए एक अच्छा प्रारंभिक बिंदु है। यह उन स्थानों के बारे में भी शिकायत करेगा जहां आप const का उपयोग कर सकते हैं लेकिन let का उपयोग कर सकते हैं। उन सभी स्थानों को ढूंढना आसान बनाता है जिन्हें आपको कॉन्स्ट के लिए ठीक करने की आवश्यकता है।
• [x] jsdoc के नवीनतम मास्टर का उपयोग करें, इसमें बहुत सारे ES6 फ़िक्सेस हैं जो अभी तक जारी नहीं किए गए हैं।
• वेबपैक पर स्विच करें।

धन्यवाद @englercj। अच्छी सूची।

@englercj बैबेल -प्रीसेट-एस2015-ढीला में एक बहिष्करण चेतावनी है, क्या आपने {"loose": true} विकल्प के साथ बेबेल-प्रीसेट-एस2015 को आजमाया जैसा कि यह सुझाव देता है?

मैं ब्राउज़र के लिए वेबपैक भी पसंद करता हूं, कुछ उपयोगी लिंक:
https://github.com/webpack/webpack/tree/master/examples/multi-part-library
http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

मेरी प्राथमिकता वेबपैक पर प्रतीक्षा करना है न कि उस पर ढेर करना। संभावित रूप से एक और छोटे पीआर के लिए। वह परिवर्तन एक निर्माण प्रक्रिया परिवर्तन का प्रतिनिधित्व करता है लेकिन जरूरी नहीं कि ES6 में सुधार हो। साथ ही, यह सुनिश्चित करने की आवश्यकता होगी कि सोर्समैप्स, हेडर इत्यादि काम करें। मैं समझता हूं कि यह कैसे बेहतर है, लेकिन इसके लिए अभी प्रतीक्षा करें।

बेबेल-प्रीसेट-एस2015-लूज़ में एक पदावनति चेतावनी है, क्या आपने {"ढीला": सच} विकल्प के साथ बाबेल-प्रीसेट-एस2015 की कोशिश की, जैसा कि यह सुझाव देता है?

हा, वह _just_ 2 सप्ताह पहले जोड़ा गया था। मैंने यह कोशिश नहीं की है क्योंकि यह उस समय मौजूद नहीं था जब मैंने इसका उपयोग करना शुरू किया था।

हेलो सब लोग,

ढीले मोड के बारे में चाड के विचार को प्रतिध्वनित करने के लिए बस एक त्वरित चिल्लाहट, और मेरे दो सेंट यहां जोड़ें।
जैसा कि हमने प्रदर्शन के बारे में वास्तव में सावधान रहने से पहले @GoodBoyDigital के साथ चर्चा की थी, इसलिए मुझे लगता है कि ढीला मोड एक अच्छा प्रारंभिक बिंदु है।

साथ ही, मुझे यकीन नहीं है कि यह तालिका कितनी अद्यतित है: https://kpdecker.github.io/six-speed/ क्या आप लोग जानते हैं?

यदि यह अभी भी है तो हमें सावधान रहना होगा कि हम ES2015 पागलपन में न जाएं और उन चीजों को परिवर्तित करें जिनकी आवश्यकता नहीं है, अर्थात: यदि for-of अभी भी प्रदर्शन को नीचे लाता है जैसा कि टेबल पर कहा गया है, तो हमें ' दृश्य ग्राफ बच्चों को पुनरावृत्त करते समय इसका उपयोग न करें।

बैबल को अब सरणियों के लिए for-of अनुकूलन करना चाहिए (देखें: अनुकूलन ), वे परीक्षण काफी पुराने प्रतीत होते हैं।

वैसे भी, @alvinsight आप सही कह रहे हैं, सब कुछ ES2015 होने की आवश्यकता नहीं है।

अच्छी सूची @englercj !

@alvinsight से भी सहमत। हम पहले से ही es6 सिंटैक्स के साथ बहुत अधिक क्लीनर कोड देख रहे हैं इसलिए सभी दौर जीत रहे हैं :)

हर दूसरा निर्णय perf पर आधारित होना चाहिए - 'क्या यह बेहतर दिखता है लेकिन धीमी गति से चलता है - ऐसा मत करो'

ऐरे लूपिंग एक अच्छा उदाहरण है - सामान को बदलने की कोई आवश्यकता नहीं है जो पहले से ही तेज़ और पठनीय है क्योंकि हम कर सकते हैं।

वेबपैक के लिए भी हाँ! @bigtimebuddy सही है, यह इस बदलाव का es6 का भाग दो होना चाहिए।

माना!
अंत में class Sprite extends Container पढ़ने और लिखने में सक्षम होना बहुत अच्छा है!

अद्यतन

• एस्लिंट के साथ जेशिंट को बदला गया (और निश्चित लाइनिंग त्रुटियां, जीत के लिए एस्लिंट !)
• बेबेल-प्रीसेट-es2015 . के साथ loose: true का उपयोग करना

शाम सब!

हमारे मिश्रणों के साथ थोड़ा सा शनैग मारो..

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

उपरोक्त वर्तमान में ES6 शाखा में काम नहीं कर रहा है, इसलिए बातचीत जैसी चीजों का भंडाफोड़ हो गया है।

क्या ईएस 6 कक्षाओं के साथ ऐसा करने का कोई अच्छा तरीका है?

कृपया एक पोस्टकार्ड पर जवाब दें!

ठीक है, मैं पहली बार सही था - उपरोक्त कोड वर्तमान में काम नहीं कर रहा है .. (क्या मैं इसे शुक्रवार की रात को इस तथ्य पर दोष दे सकता हूं?)

मुझे लगता है कि यह वह जगह है जहाँ रचना चमकती है!

हम्म, क्या काम नहीं कर रहा है? यह मेरे लिए काम किया:

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 क्या आपने पिक्सी-एनिमेट के साथ इस निर्माण की कोशिश की है?

इसे बाहर फेंकना .. ट्रेसर बेबेल से तेज लगता है?
जांच के लायक?

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

वे परीक्षण पुराने हैं, और बेबेल ढीले के साथ नहीं चलते हैं। इसके अलावा, आप यह भी तर्क दे सकते हैं कि कई मामलों में टाइपस्क्रिप्ट दोनों की तुलना में तेज़ है :)

मैं आप लोगों को सुझाव दूंगा कि इस प्रमुख पुनर्लेखन/अनुकूलन के हिस्से के रूप में टाइपस्क्रिप्ट का उपयोग करने पर विचार करें। टाइपस्क्रिप्ट के बारे में कुछ बिंदु:

• जावास्क्रिप्ट में टाइप सिस्टम का उपयोग करना नया मानक बन जाएगा, यह बस समय की बात है।
• यह जावास्क्रिप्ट है। टाइप सिस्टम के अलावा सिंटैक्स में कोई अंतर नहीं है।
• कोड गुणवत्ता में सुधार करता है। आपको संभावित रूप से काफी मात्रा में कोड मिलेगा जिसे सही स्थानों पर प्रकारों से मेल खाने के लिए थोड़ा पुनर्गठित करने की आवश्यकता है।
• पुल-अनुरोध गुणवत्ता जांच बढ़ाएँ - यदि किसी प्रकार की समस्या है, तो पैच को केवल मर्ज नहीं किया जा सकता है।

मुझे पता है कि यह एक आसान काम नहीं है, लेकिन मेरा मानना ​​है कि यह कोड आधार और समुदाय के लिए प्रमुख लाभ ला सकता है।
चीयर्स!

@endel मैं पिक्सी-रीढ़ को टाइपस्क्रिप्ट में ले जा रहा हूं, पिक्सी के लिए टीएस प्लगइन्स के डेमो होंगे।

@endel बस उत्सुक है, लेकिन क्या टीएस ने उस मुद्दे को हल किया है जब मैंने इसे आखिरी बार देखा था: कि जब आउटपुट की बात आती है तो यह सब कुछ या कुछ भी नहीं होता है, यानी _everything_ को ES5 पर वापस स्थानांतरित कर दिया जाता है, या लक्ष्य के आधार पर कुछ भी नहीं है ?

मुझे याद है कि इसमें पॉलीफ़िल का बिल्कुल भी उपयोग नहीं किया गया था। इसलिए यदि आप चाहते हैं कि एक एकल कोड-आधार ब्राउज़र की एक विस्तृत श्रृंखला पर चले, तो अत्याधुनिक से लेकर विरासत तक, आपको अभी भी ES5 को लक्षित करना होगा, और सभी अच्छी नई सुविधाएँ, जो कि आधुनिक ब्राउज़र अब मूल रूप से समर्थन करते हैं, अनदेखा करें क्योंकि यह वैसे भी ES5 में डाउनग्रेड करता है? या यह अभी भी ऐसा मामला है जहां आपको सभी ठिकानों को कवर करने के लिए TS आउटपुट के ES6 पॉलीफिल का उपयोग करने की आवश्यकता है?

जब आउटपुट की बात आती है तो यह सब या कुछ नहीं की स्थिति है, यानी सब कुछ ES5 पर वापस भेज दिया गया है, या लक्ष्य के आधार पर कुछ भी नहीं है?

आश्वस्त नहीं कि इससे आपका क्या अर्थ है। यदि आप ES5 को लक्षित करते हैं, तो यह सिंटैक्स को ES5 में बदल देता है। लेकिन ऐसा ही बेबेल, ट्रेसर, एट अल करता है। क्या आप कुछ विशिष्ट बात कर रहे हैं?

मुझे याद है कि इसमें पॉलीफ़िल का बिल्कुल भी उपयोग नहीं किया गया था।

यह नहीं करता है, लेकिन फिर न तो बेबेल, ट्रैकर या अन्य ट्रांसपिलर करता है; तो मुझे यकीन नहीं है कि आप क्या चला रहे हैं? हमें किसी भी तरह से कोर-जेएस पॉलीफिल का उपयोग करना होगा (बेबेल या टीएस)।

मुझे लगता है कि चर्चा ES6 -> ES5 या टाइपस्क्रिप्ट को TS -> ES5 को बदलने के लिए बेबेल है। हमें किसी भी तरह से ES5 जाना है। TS ES6 को लक्षित कर सकता है, और यदि हम चाहें तो ES6 बिल्ड शिप कर सकते हैं, लेकिन यह ES5 बिल्ड के अतिरिक्त होगा।

@photonstorm टाइपस्क्रिप्ट के साथ, मेरी सबसे अच्छी जानकारी के लिए, आप ES5 को ट्रांसपाइल करने के लिए सुविधाओं को चुन और चुन नहीं सकते हैं जैसे आप बैबेल के साथ कर सकते हैं।

मैं टाइपस्क्रिप्ट का उपयोग करता हूं और सोचता हूं कि यह कमाल है। पिक्सी को अंततः अपनाते हुए देखना अच्छा लगेगा। Google अब डेवलपर्स को एंगुलर के साथ टाइपस्क्रिप्ट का उपयोग करने के लिए प्रोत्साहित कर रहा है, जो व्यापक प्रसार अपनाने का एक अच्छा संकेत है। एक कोडबेस के लिए जैसा कि पिक्सी जटिल था, सख्त-टाइपिंग द्वारा अच्छी तरह से परोसा जाएगा।

कुछ मुद्दों को टाइपस्क्रिप्ट के साथ संबोधित करने की आवश्यकता होगी जिसमें जेएसडॉक्स (किसी के पास इसका अनुभव है?) और अपस्ट्रीम-निर्भरताएं शामिल हैं जो स्रोत का उपयोग कर रहे हैं जब require('pixi.js') (क्या किसी को इस तरह की आवश्यकता है?)

पहले चरण के रूप में, ES6 में जाना अभी भी एक अच्छा विकल्प है, क्योंकि हमें वैसे भी कक्षाओं में कनवर्ट करने की आवश्यकता होगी। एक बार जब हम निश्चित हो जाते हैं कि सभी चिंताओं का समाधान किया जा सकता है, तो हम कोडबेस के आधुनिकीकरण पर टाइपस्क्रिप्ट को एक और "पास" मान सकते हैं।

टाइपस्क्रिप्ट के साथ, मेरी सबसे अच्छी जानकारी के लिए, आप ES5 में ट्रांसपाइल करने के लिए सुविधाओं को चुन और चुन नहीं सकते हैं जैसे आप बैबेल के साथ कर सकते हैं।

मुझे नहीं पता था कि आप बेबेल के साथ ऐसा कर सकते हैं। मुझे यकीन नहीं है कि मुझे इसका लाभ हमारे लिए दिखाई दे रहा है क्योंकि हमें वैसे भी ES5 को लक्षित करना है। लेकिन यह साफ है!

कुछ मुद्दे जिन्हें टाइपस्क्रिप्ट के साथ संबोधित करने की आवश्यकता होगी उनमें शामिल होंगे jsdocs

https://github.com/TypeStrong/typedoc

अपस्ट्रीम-निर्भरताएं जो आवश्यकता होने पर स्रोत का उपयोग कर रही हैं ('pixi.js') (क्या किसी को इस तरह की आवश्यकता है?)।

हम जो कुछ भी चाहते हैं उसे "मुख्य" इंगित कर सकते हैं, और टाइपस्क्रिप्ट के साथ आप इसे निर्मित फ़ाइलों (_बंडल_ नहीं) पर इंगित कर सकते हैं। उदाहरण के लिए, TS फ़ाइलें src/ में जाती हैं और आप प्रत्येक फ़ाइल को js/ या कुछ और में ट्रांसपाइल करते हैं, फिर वहां main बिंदु करते हैं। फिर हम इसे पूरा बंडल भी करते हैं और बंडलों को dist/ या w/e में डाल देते हैं। एनपीएम पैकेज जेएस/टीएसडी फाइलों के साथ जहाज करता है लेकिन टीएस स्रोत आमतौर पर (बहस योग्य) नहीं होता है।

पहले चरण के रूप में, ES6 में जाना अभी भी एक अच्छा विकल्प है, क्योंकि हमें वैसे भी कक्षाओं में कनवर्ट करने की आवश्यकता होगी। एक बार जब हम निश्चित हो जाते हैं कि सभी चिंताओं का समाधान किया जा सकता है, तो हम कोडबेस के आधुनिकीकरण पर टाइपस्क्रिप्ट को एक और "पास" मान सकते हैं।

मैं

टाइपस्क्रिप्ट के साथ, मेरी सबसे अच्छी जानकारी के लिए, आप ES5 में ट्रांसपाइल करने के लिए सुविधाओं को चुन और चुन नहीं सकते हैं जैसे आप बैबेल के साथ कर सकते हैं।

उन्होंने टाइपस्क्रिप्ट 2.0 पर इस सुविधा को जोड़ा: https://github.com/Microsoft/TypeScript/wiki/What 's-new-in-TypeScript#जिसमें-built-in-type-declarations-with---lib

लक्ष्य के रूप में ES5 का उपयोग करना सामान्य है, लेकिन ES6 को पुस्तकालयों के रूप में शामिल करना, Symbol , Map , आदि जैसी चीजों के लिए प्रकार की परिभाषाएं रखना।

दरअसल, जैसा कि @englercj ने कहा था, आपके कोड को संकलित करने के बाद आपको शिम्स को शामिल करने की आवश्यकता है, इससे कोई फर्क नहीं पड़ता कि आप किस कंपाइलर का उपयोग कर रहे हैं। उदाहरण के लिए, बैबल में IE9 के लिए स्वचालित रूप से Symbol पॉलीफ़िल शामिल नहीं है।

मुझे नहीं पता था कि आप बेबेल के साथ ऐसा कर सकते हैं। मुझे यकीन नहीं है कि मुझे इसका लाभ हमारे लिए दिखाई दे रहा है क्योंकि हमें वैसे भी ES5 को लक्षित करना है। लेकिन यह साफ है!

पिक्सी के लिए, यह उपयोगी नहीं है, लेकिन हां, आप चेरी को बैबेल प्रीसेट चुन सकते हैं ताकि ट्रांसपाइल करने के लिए केवल कुछ विशेषताओं का चयन किया जा सके। यह उपयोगी हो सकता है यदि आप ES6 का निर्माण करना चाहते हैं, लेकिन केवल नोड 6, इलेक्ट्रॉन 1 आदि में ब्लीडिंग-एज V8 सुविधाओं का समर्थन करना चाहते हैं।

यह वास्तव में एक दिलचस्प विरोधाभास है। निर्माण करने के लिए ES6 का उपयोग करें, क्योंकि यह साफ और सुंदर है, और आधुनिक ब्राउज़रों द्वारा बहुत अच्छी तरह से समर्थित/आंतरिक रूप से अनुकूलित है। फिर भी 1995 की तरह ट्रांसपिलिंग द्वारा वह सारी मेहनत नष्ट कर दी गई है :) (और भाषा वाक्यविन्यास परिवर्तनों के साथ आप इसके आसपास नहीं जा सकते)।

मैं सराहना करता हूं कि समस्या सार्वभौमिक है, टीएस या पिक्सी से कोई लेना-देना नहीं है। बस थोड़ी अजीब स्थिति में होना है।

@photonstorm यह एक दुर्भाग्यपूर्ण विडंबना है - उम्मीद है कि हमारे पास ES6 और ES5 बिल्ड हो सकते हैं ताकि पैकेज्ड ऐप्स (जैसे इलेक्ट्रॉन) के लिए वे ES6 बिल्ड का उपयोग कर सकें।

बस यहाँ चर्चा में कूदते हुए :) मैंने लोगों को TS को ES6 में ट्रांसपाइल करते देखा है, फिर इसे ES5 में ट्रांसपाइल करने के लिए बैबेल का उपयोग करें, मुझे लगता है कि अगर आप कुछ ऐसी विशेषताओं को ट्रांसपाइल करना चाहते हैं जो काफी अच्छा होगा?

इसके अलावा, वहाँ (अभी तक एक और ...) मॉड्यूल बंडलर है, हालांकि मुझे लगता है कि यह कई आउटपुट की संभावना के साथ कुछ सुंदर चालाक कोड उत्पन्न करता है।
http://rollupjs.org/ यह ES6/ES2015 मॉड्यूल सिंटैक्स से बंडल करता है, जो मुझे लगता है कि यदि आप कोड को भविष्य में प्रमाण देना चाहते हैं तो यह बहुत अच्छा है।

मैं टाइपप्रति में लिखे जा रहे PIXI के लिए +1 हूं। मेरे अनुभव से, टाइप वास्तव में इस तरह की परियोजनाओं के लिए संरचना के साथ बहुत मदद करता है। अगर केवल इसे प्रदर्शनकारी रखा जा सकता है :)

रोलअप शानदार है, मुझे इसका इस्तेमाल करना अच्छा लगता है। इसका पेड़ हिलना गंभीर रूप से स्मार्ट है। बबेल (बेबेल के बजाय) के साथ प्रयोग किया जाता है, यह वास्तव में, _really_ तेज़ वर्कफ़्लो बनाता है।

यहां टीएस को इतना प्यार देखना दिलचस्प है। निश्चित रूप से एक साल पहले ऐसा नहीं था :) चेक ES2015 टाइप करने के तरीके हैं जो विचार करने योग्य हो सकते हैं।

@photonstorm को बुबेल नहीं मिला, लेकिन "बबल" है

हाँ हाँ, टाइपो। http://buble.surge.sh/

BubleTape इसके लिए एक अच्छा परीक्षण हार्नेस है https://github.com/snuggs/buble-tape

क्या #2936 यही कारण है कि सदस्यों ने दस्तावेज़ों को छोड़ दिया? इसमें एक खुला सदस्य है, जहां इसकी संख्या 25+ है।

क्या अब उनमें @memberof जोड़ने की आवश्यकता है, या कोई जादू है जिसे लागू किया जा सकता है?

@ Staff0rd मुझे लगता है कि हम अभी भी चीजों को साफ कर रहे हैं, एक बार जब यह थोड़ा स्थिर हो जाए तो हम डॉक्स को साफ करने पर ध्यान देंगे। सबसे अधिक संभावना है कि यह सिर्फ इसलिए है क्योंकि हम जिस jsdoc संस्करण का उपयोग कर रहे हैं उसमें ES6 बग हैं। हमें इसे जल्द ही साफ करने में सक्षम होना चाहिए।

ES6 को dev में मिला दिया गया है, मदद करने वाले सभी लोगों का धन्यवाद। अत्यन्त सराहनीय!

इसे अभी के लिए बंद कर रहे हैं।

इस थ्रेड को स्वचालित रूप से लॉक कर दिया गया है क्योंकि इसे बंद करने के बाद हाल ही में कोई गतिविधि नहीं हुई है। कृपया संबंधित बग के लिए एक नया मुद्दा खोलें।