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

Question

Во время игры с 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' } 
     ] 
    } 
}; 

Answer 1

Т.Л., Dr: Бабель не обязательно сохранять вар Обозначает имена.

---

Если мы посмотрим на коде generated от

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 не определена в самом деле. Итак, Chrome правильный.