在调试器中未定义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

TL;博士：通天不一定保留变种iables的名字。

---

如果我们看一下代码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是正确的。