ecmascript-6 – 在调试器期间未定义ES6模块导入

在和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' }
        ]
    }
};

解决方法

tl; dr：Babel不一定保存变量名.

如果我们来看看代码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']());

我们看到事情没有确定.所以Chrome是正确的.