调试器中未定义ES6模块导入 [英] ES6 module import is not defined during debugger
问题描述
在与Babel和Webpack玩耍的同时,我今天偶然发现了一些非常奇怪的行为。
While playing around with Babel and Webpack I stumbled into some really weird behavior today.
我在我的 main.js
中投掷了一个调试器,以查看我是否正确导入,但Chrome的控制台不停地叫喊我正在尝试导入的模块未定义。我尝试控制台记录相同的模块,我看到它打印到我的控制台。
I threw a debugger in my main.js
to see if I was importing correctly, but Chrome's console kept yelling that the module I was trying to import was not defined. I try console logging the same module instead, and I see it printed to my console.
什么给了?我已经粘贴了相关的代码片段:
What gives? I've pasted the relevant code snippets below:
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不一定保存变量名称。
tl;dr: Babel does not necessarily preserve variables names.
如果我们看代码生成从
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是正确的。
We see that Things
is not defined indeed. So Chrome is correct.
这篇关于调试器中未定义ES6模块导入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!