Babel.js 调试期间未定义ES6模块导入

2izufjch 于 2022-12-08 发布在 Babel

关注(0)|答案(3)|浏览(160)

在玩巴别塔和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' }
        ]
    }
};

babeljs

来源：https://stackoverflow.com/questions/30161123/es6-module-import-is-not-defined-during-debugger

3条答案

按热度按时间

23c0lvtd1#

**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是正确的。

赞(0）回复(0）举报 2022-12-08

cvxl0en22#

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

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

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

console.log(new TestThing());

这并不能解决当前的核心问题，但在某些情况下，它可以作为调试的变通方法。

赞(0）回复(0）举报 2022-12-08

cwtwac6a3#

你可以试试我的webpack插件，它为导入定义了调试变量，这样它们就可以在调试器中使用。
https://github.com/trias/debug-import-vars-webpack-plugin

赞(0）回复(0）举报 2022-12-08