ES6 - कोलाहल Sourcemaps और तीर कार्य शाब्दिक गुंजाइश

Question

मैं अंदर एक समारोह एक ES6 class:

class Test { 
    // Omitted code for brevity 
    loadEvents() { 
     $.get('/api/v1/events', (data) => { 
     this.actions.setEvents(data); 
     }); 
    } 
} 

कोलाहल एक अलग रूप को यह transpiles और इसका शाब्दिक गुंजाइश नियंत्रित करने के लिए एक _this चर उत्पन्न करता है तीर समारोह।

var _this = this; 

$.get('/api/v1/events', function (data) { 
    _this.actions.setEvents(data); 
}); 

जब मैं क्रोम में sourcemaps का उपयोग कर ES6 वर्ग डिबग और मैं कहाँ this.actions.setEvents(data); फोन मैं कि क्रोम "फिर से नक्शा" this मूल ES6 कोड मिलान करने के लिए नहीं है, लेकिन इसके बजाय this देखा लाइन पर एक ब्रेकपाइंट डाल बाहरी फ़ंक्शन स्कोप को इंगित करता है और मुझे _this का उपयोग करने की आवश्यकता है यदि मैं तीर फ़ंक्शन लेक्सिकल स्कोप तक पहुंचना चाहता हूं, जो पूरी तरह से व्यर्थ है। अगर मैं स्रोतमैप का उपयोग कर रहा हूं तो मैं क्रोम देव की अपेक्षा करूंगा। मेरे ES6 कोड में this के लेक्सिकल दायरे को संरक्षित करने के लिए टूल।

क्या क्रोम डेवलपर टूल को स्रोतमैप और तीर फ़ंक्शंस के साथ अपेक्षित काम करने का कोई तरीका है?

Answer 1

खैर,

1. क्रोमियम names वर्तमान में से मैपिंग का उपयोग नहीं करता है। https://code.google.com/p/chromium/issues/detail?id=327092

2. this एक विशेष बाध्यकारी है, इसलिए जिस तरह से इसे पार किया गया है, ऐसा करना संभव नहीं होगा। केवल एक चीज मैं के बारे में सोच सकते हैं कि यह इस तरह transpiling किया जाएगा, लेकिन अगर यह व्यवहार्य है मैं नहीं जानता:

   $.get('/api/v1/events', function (data) { 
       this.actions.setEvents(data); 
   }.bind(this)); 
   

Answer 2

Babel arrow function transformer को देखते हुए, ऐसा लगता है यह पहले से ही बाँध को लागू करता है (यह) समाधान , जो डीबगर को सही दिखाता है।

मैंने इसे अपने क्रोम डेवलपर टूल में परीक्षण किया।