调试器期间未定义 ES6 模块导入

Question

今天我在使用 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' }
        ]
    }
};

Answer 1

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

我们看到 Things 确实没有定义。所以 Chrome 是正确的。

Answer 2

在某些调试场景中，将导入的变量分配给局部范围内的新变量可能就足够了。例如：

import Thing from './Thing.js';
const TestThing = Thing;

debugger; // although Thing will not be defined, TestThing will be defined

console.log(new TestThing());

这并不能解决手头的核心问题，但它可以作为在某些情况下进行调试的解决方法。

Answer 3

您可以试试我的 webpack 插件，它定义了用于导入的调试变量，以便它们在调试器中可用。

https://github.com/trias/debug-import-vars-webpack-plugin

调试器期间未定义 ES6 模块导入

ES6 module import is not defined during debugger

javascript-debugger

ecmascript-6

webpack

babeljs