ES6 w Chrome - Babel Sourcemaps i Arrow Funkcje zakres leksykalny

Question

Mam funkcji wewnątrz ES6 class:

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

Babel transpiles to do innej formie, a to generuje _this zmienną kontrolować zakres leksykalny z następujących funkcja strzałki.

var _this = this; 

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

Kiedy debugować klasę ES6 korzystając sourcemaps w Chrome i umieścić punkt przerwania na linii, gdzie zgłoszę this.actions.setEvents(data); zauważyłem, że Chrome nie „re-map” this dopasować oryginalny kod ES6, ale zamiast this wskazuje na zewnętrzny zakres funkcji i muszę użyć _this, jeśli chcę uzyskać dostęp do zakresu leksykalnego funkcji strzałki, co jest całkowicie bezcelowe. Jeśli używam sourcemaps, spodziewam się, że będzie to Chrome. narzędzia do zachowania zakresu leksykalnego this jak w moim kodzie ES6.

Czy istnieje sposób na to, aby narzędzia programistów Chrome działały zgodnie z oczekiwaniami dzięki funkcjom strzałki i strzałki?

Answer 1

No

1. Chromium nie wykorzystuje mapowania z names komunikatu. https://code.google.com/p/chromium/issues/detail?id=327092

2. this jest specjalnym wiązaniem, więc sposób w jaki jest transponowany nie byłby możliwy. Jedyną rzeczą, jaką mogę myśleć byłoby transpiling to tak, ale nie wiem, czy jest to opłacalne:

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

Answer 2

Patrząc na Babel arrow function transformer, wydaje się, że już implementuje wiążą rozwiązanie (this) , co sprawia, że ​​debugger wyświetla to poprawnie.

Przetestowałem to w moich narzędziach do tworzenia Chrome.