0

我正在试验 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();
4

1 回答 1

0

这是我注意到的。我相信生成的源地图存在错误...

如果我关闭源地图，一切正常。我的调试语句在 chrome 中的正确行号处触发。

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

于 2016-02-29T16:23:30.103 回答