在調試器中未定義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是正確的。