javascript - ES6 i Chrome - Babel sourcemaps og pilfunktioner leksikalsk omfang

Jeg har en funktion inde i en ES6 klasse:

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

Babel transpilerer dette til en anden form, og det genererer en _this-variabel for at kontrollere den leksikale scope af arrow-funktionen.

var _this = this;

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

Når jeg debugger ES6-klassen ved hjælp af sourcemaps i Chrome og sætter et breakpoint på linjen, hvor jeg kalder this.actions.setEvents(data);, bemærkede jeg, at Chrome ikke "re-mapper" this for at matche den oprindelige ES6-kode, men i stedet peger this på det ydre funktionsscope, og jeg er nødt til at bruge _this, hvis jeg vil få adgang til arrow-funktionens leksikale scope, hvilket er fuldstændig meningsløst. Hvis jeg bruger sourcemaps, ville jeg forvente, at Chrome dev. tools bevarer thiss leksikale scope som i min ES6-kode.

Er der en måde at få Chrome-udviklerværktøjer til at fungere som forventet med sourcemaps og arrow-funktioner?

Svar #1

Nå,

1. Chromium bruger ikke kortlægningerne fra names i øjeblikket. https://code.google.com/p/chromium/issues/detail?id=327092

2. this er en særlig binding, så den måde, det transpileres på, ville det ikke være muligt at gøre det. Det eneste, jeg kan komme i tanke om, ville være at transpile det sådan her, men jeg ved ikke, om det er realistisk:

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

Svar #2

Når man kigger på Babels arrow function transformer, ser det ud til, at den allerede implementerer bind(this)-løsningen, hvilket gør, at debuggeren viser det korrekte this.

Jeg testede det i mine Chrome-udviklerværktøjer.