ES6 in Chrome - Babel Sourcemaps e freccia Funzioni scope lessicale

Question

Ho una funzione all'interno di un ES6 class:

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

Babel transpiles questo ad una forma differente e genera una variabile _this per controllare l'ambito lessicale funzione di freccia.

var _this = this; 

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

Quando il debug della classe ES6 utilizzando sourcemaps in Chrome e mettere un punto di interruzione sulla linea in cui io chiamo this.actions.setEvents(data); ho notato che Chrome non "ri-mappa" this per abbinare il codice ES6 originale, ma invece this punta allo scope della funzione esterna e ho bisogno di usare _this se voglio accedere alla funzione lessicale della funzione freccia, che è completamente inutile. Se sto usando sourcemaps mi aspetterei che lo sviluppo di Chrome. strumenti per preservare l'ambito lessicale di this come nel mio codice ES6.

C'è un modo per fare in modo che gli strumenti di sviluppo di Chrome funzionino come previsto con sourcemaps e funzioni freccia?

Answer 1

Beh,

1. Chromium non utilizza le mappature da names attualmente. https://code.google.com/p/chromium/issues/detail?id=327092

2. this è un binding speciale, quindi il modo in cui è transpiled non sarebbe possibile farlo. L'unica cosa che mi viene in mente sarebbe transpiling in questo modo, ma non so se è fattibile:

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

Answer 2

Guardando Babel arrow function transformer, sembra che implementa già il bind (questo) soluzione , che rende il debugger visualizzato correttamente.

L'ho provato nei miei strumenti di sviluppo Chrome.