在与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']());
我们看到Things确实没有定义。因此Chrome是正确的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句