Импорт модуля ES6 не определен во время отладчика

Играя с Babel и Webpack, я сегодня столкнулся с очень странным поведением.

Я запустил отладчик в свой main.js, чтобы проверить, правильно ли я импортирую, но консоль Chrome продолжала кричать, что модуль, который я пытался импортировать, не определен. Вместо этого я пытаюсь записать в консоль тот же модуль и вижу, что он напечатан на моей консоли.

Что дает? Я вставил соответствующие фрагменты кода ниже:

main.js

import Thing from './Thing.js';

debugger // if you type Thing into the console, it is not defined

console.log(new Thing()); // if you let the script finish running, this works

thing.js

class Thing {
}

export default Thing;

webpack.config.js

var path = require('path');
module.exports = {
    entry: './js/main.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: path.join(__dirname, 'js'), loader: 'babel-loader' }
        ]
    }
};

webpack babeljs ecmascript-6 javascript-debugger
person Salar    schedule 11.05.2015    source источник

Ответы (2)


arrow_upward
28
arrow_downward

tl;dr: Babel не обязательно сохраняет имена переменных.

Если мы посмотрим на код сгенерирован из

import Thing from './Thing.js';

debugger;

console.log(new Thing());

а именно:

'use strict';

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _ThingJs = require('./Thing.js');

var _ThingJs2 = _interopRequireDefault(_ThingJs);

debugger;

console.log(new _ThingJs2['default']());

Мы видим, что Things действительно не определено. Так что Хром прав.

person Felix Kling    schedule 11.05.2015
comment
Круто, спасибо за быстрый ответ! Интересно, изменит ли это поведение включение исходных карт? - person Salar; 12.05.2015
comment
Делать отладчик бесполезным - довольно большая афера, IMO, мне трудно поверить, что Babel допустил бы это. - person Salar; 12.05.2015
comment
Почему бесполезный отладчик — симпатичный мошенник? - person alexey2baranov; 27.02.2020

arrow_upward
1
arrow_downward

В некоторых сценариях отладки может быть достаточно назначить импортированную переменную новой переменной в локальной области. Например:

import Thing from './Thing.js';
const testThing = Thing;

debugger; // although Thing will not be defined, testThing will be defined

console.log(new Thing());

Это не устраняет основную проблему, но может быть обходным путем для отладки в определенных ситуациях.

person ethaning    schedule 16.04.2020