在和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不一定保存变量名.
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是正确的.
