ecmascript 6 - La importación del módulo ES6 no está definida durante el depurador

ecmascript-6 webpack

Question

Mientras jugaba con Babel y Webpack, me encontré con un comportamiento realmente extraño en la actualidad.

Lancé un depurador en mi main.js para ver si estaba importando correctamente, pero la consola de Chrome seguía gritando que el módulo que estaba tratando de importar no estaba definido. Intento con la consola registrar el mismo módulo en su lugar y lo veo impreso en mi consola.

¿Lo que da? He pegado los fragmentos de código relevantes a continuación:

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 no necesariamente conserva los nombres de las variables.

Si nos fijamos en el código generated desde

import Thing from ''./Thing.js'';
debugger;
console.log(new Thing());

a saber:

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

Vemos que las Things no están definidas de hecho. Así que Chrome es correcto.