web-dev-qa-db-ja.com

ES6モジュールのインポートがデバッガー中に定義されていません

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' }
        ]
    }
};
ecmascript-6webpackjavascript-debuggerbabeljs
22
Salar

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は正しいです。

26
Felix Kling

一部のデバッグシナリオでは、インポートされた変数をローカルスコープの新しい変数に割り当てるだけで十分な場合があります。例えば：

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

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

console.log(new Thing());

これは目前の主要な問題を修正しませんが、特定の状況でのデバッグの回避策になる可能性があります。

0
ethaning