調試Babel 6生成的ES2015代碼不起作用

Question

我正在嘗試使用ES2015 JavaScript並在grunt上使用Babel 6將代碼編譯爲瀏覽器兼容代碼。

當我使用Babel的在線代碼轉換器（https://babeljs.io/repl/），並將代碼複製到我的文件中時，調試器在Chrome中完美工作。

但是，如果我保持由babel生成的代碼在grunt中，調試將被觸發，但不在正確的行號。

他們的在線工具使用Babel 5，我使用的是版本6，所以我明白某些東西明顯不同。但在仔細觀察兩個版本的輸出之後，它認爲唯一的區別在於這裏和那幾個關閉。

我錯過了什麼？

這裏是我的ES2015的JavaScript代碼：

class DropdownMenu { 
    constructor(buttonId) { 
     this.button   = $(buttonId) 
     this.dropdown = $(this.button.data('dropdown-id')) 
     this.activeItem = this.dropdown.find('a.active').index() 
    } 

    initialize() { 
     this.button.on('click', e => { 
      debugger 
      this.dropdown.toggleClass('active') 
     }) 
    } 
} 

var leadsDropDown = new DropdownMenu('#options') 
leadsDropDown.initialize() 

這裏是巴貝爾6通過咕嚕輸出：

'use strict'; 

var _createClass = function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 

var DropdownMenu = function() { 
    function DropdownMenu(buttonId) { 
     _classCallCheck(this, DropdownMenu); 

     this.button = $(buttonId); 
     this.dropdown = $(this.button.data('dropdown-id')); 
     this.activeItem = this.dropdown.find('a.active').index(); 
    } 

    _createClass(DropdownMenu, [{ 
     key: 'initialize', 
     value: function initialize() { 
      var _this = this; 

      this.button.on('click', function (e) { 
       _this.dropdown.toggleClass('active'); 
      }); 
     } 
    }, { 
     key: 'toggleDropdownMenu', 
     value: function toggleDropdownMenu() {} 
    }]); 

    return DropdownMenu; 
}(); 

var leadsDropDown = new DropdownMenu('#options'); 
leadsDropDown.initialize(); 
//# sourceMappingURL=admin.min.js.map 

這裏是巴別塔5的使用他們的在線工具輸出：

'use strict'; 

var _createClass = (function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 

var DropdownMenu = (function() { 
    function DropdownMenu(buttonId) { 
     _classCallCheck(this, DropdownMenu); 

     this.button = $(buttonId); 
     this.dropdown = $(this.button.data('dropdown-id')); 
     this.activeItem = this.dropdown.find('a.active').index(); 
    } 

    _createClass(DropdownMenu, [{ 
     key: 'initialize', 
     value: function initialize() { 
      var _this = this; 

      this.button.on('click', function (e) { 
       debugger; 
       _this.dropdown.toggleClass('active'); 
      }); 
     } 
    }]); 

    return DropdownMenu; 
})(); 

var leadsDropDown = new DropdownMenu('#options'); 
leadsDropDown.initialize(); 

Answer 1

這是我注意到的。我相信有生成的源地圖的錯誤...

如果我關閉源地圖，一切正常。我的調試語句get在chrome中的適當行號處觸發。

但是當它打開時，它不起作用。現在，我不相信關閉源地圖是最好的解決方案，但這只是暫時的。