ES6 in Chrom - Babel Sourcemaps Pfeil und Funktionen lexikalischen Gültigkeitsbereich

Question

I haben eine Funktion in a ES6 class:

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

Babel transpiles dies zu einer anderen Form, und es erzeugt ein _this Variable den lexikalischen Gültigkeitsbereich des steuern Pfeilfunktion.

var _this = this; 

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

Wenn ich Debuggen des ES6 Klasse sourcemaps in Chrome und einen Haltepunkt auf der Linie setzen, wo ich this.actions.setEvents(data); nenne ich bemerkt, dass Chrome nicht „re-map“ this den ursprünglichen ES6 Code übereinstimmen, sondern this zeigt auf den äußeren Funktionsumfang und ich muss _this verwenden, wenn ich auf den lexikalischen Bereich der Pfeilfunktion zugreifen möchte, was völlig sinnlos ist. Wenn ich Quellkarten verwende, würde ich Chrome Dev erwarten. Werkzeuge, um den lexikalischen Umfang von this wie in meinem ES6-Code zu erhalten.

Gibt es eine Möglichkeit, Chrome-Entwicklertools wie erwartet mit Quellkarten und Pfeilfunktionen zu arbeiten?

Answer 1

Nun,

1. Chromium verwendet nicht die Zuordnungen von names zur Zeit. https://code.google.com/p/chromium/issues/detail?id=327092

2. this ist eine spezielle Bindung, so wie es transpiliert wird, wäre das nicht möglich. Das einzige, was ich denken kann, würde es so sein transpiling, aber ich weiß nicht, ob es rentabel ist:

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

Answer 2

bei Babel arrow function transformer Sehen, wie es scheint es bereits die bind implementiert (this) Lösung , wodurch der Debugger das richtige anzeigt.

Ich habe es in meinen Chrom-Entwickler-Tools getestet.