Import modułu ES6 nie został zdefiniowany podczas debugowania

Question

Podczas zabawy z Babel i Webpack wpadłem dziś w dziwne zachowanie.

Wrzuciłem debugger do mojego main.js, aby sprawdzić, czy importowałem poprawnie, ale konsola Chrome ciągle krzyczała, że ​​moduł, który próbowałem zaimportować, nie został zdefiniowany. Próbuję zarejestrować w konsoli ten sam moduł i widzę go wydrukowany na mojej konsoli.

Co daje? Mam wklejony odpowiednie fragmenty kodu poniżej:

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; dr: Babel niekoniecznie zachowania var iables imiona.

---

Jeśli spojrzymy na kod generated z

import Thing from './Thing.js'; 

debugger; 

console.log(new Thing()); 

mianowicie:

'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']()); 

Widzimy, że Things rzeczywiście nie jest zdefiniowany. Więc Chrome jest poprawny.