调试 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()

以下是 Babel 6 到 grunt 的输出：

'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 内正确的行号处触发。

但是当它打开时，它不起作用。现在，我不认为关闭源映射是最好的解决方案，但这是一个暂时的解决方案。