Chrome中的ES6 - Babel Sourcemaps和Arrow Functions詞法范圍

Question

我在ES6 class有一個函數：

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

Babel將其轉換為另一種形式，並生成一個_this變量來控制箭頭函數的詞法范圍。

var _this = this;

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

當我在Chrome中使用sourcemaps調試ES6類並在我調用this.actions.setEvents(data);的行上放置一個斷點this.actions.setEvents(data); 我注意到，Chrome不“重新映射” this匹配原ES6代碼，而是this指向外部功能范圍，我需要使用_this如果我要訪問的箭頭功能詞匯范圍，這是完全沒有意義的。 如果我使用的是源代碼，我會期待Chrome開發者。 工具維護的詞匯范圍， this在我的ES6代碼。

有沒有辦法讓Chrome開發者工具按預期使用源圖和箭頭功能？

Answer 1

好，

1. Chromium目前不使用names的映射。 https://code.google.com/p/chromium/issues/detail?id=327092

2. this是一種特殊的綁定，所以它的轉換方式是不可能的。 我能想到的唯一一件事就是像這樣發現它，但我不知道它是否可行：

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

Answer 2

看看Babel arrow函數變換器 ，它似乎已經實現了bind（this）解決方案，這使得調試器顯示正確。

我在我的chrome開發人員工具中測試了它。