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

但是当它打开时，它无法正常工作。现在，我不相信关闭转换源图是最好的解决方案，但它是暂时的。

调试Babel 6生成的ES2015代码不起作用

1 个答案: