調試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()

這是通過咕unt聲發出的通天塔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

這是使用其在線工具的Babel 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

這是我注意到的。 我相信生成的源地圖存在一個錯誤...

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

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