web-dev-qa-db-ja.com

Webpackインポートは、インポートの順序に応じて、未定義を返します

Webpack + babelを使用しています。次の3つのモジュールがあります。

// A.js

// some other imports here
console.log('A');
export default 'some-const';

// B.js

import someConst from './A';
console.log('B', someConst);
export default 'something-else';

// main.js

import someConst from './A';
import somethingElse from './B';
console.log('main', someConst);

main.jsが実行されると、次のように表示されます。

B undefined
A
main some-const

main.jsのインポートをスワップすると、Bが最初になり、次のようになります。

A
B some-const
main some-const

なぜ最初のバージョンのモジュールではなくB.jsがundefinedを取得するのでしょうか？どうしましたか？

javascriptwebpackbabeljs
63
Olegs Jeremejevs

問題の絞り込み（別名、髪の毛を引っ張る）のほぼ1日の仕事の後、私は最終的に、循環依存関係にあることに気付きました。

// some other imports here、Aは別のモジュールCをインポートし、次にBをインポートします。 Aはmain.jsで最初にインポートされるため、Bは「円」の最後のリンクになり、Webpack（またはCommonJSに似た環境、たとえばノード）は、Aのmodule.exportsを返すことでそれを短絡させますが、これはまだundefinedです。最終的にはsome-constと等しくなりますが、Bの同期コードは最終的にundefinedを処理します。

CがBの外に依存するコードを削除することにより、循環依存関係を排除することで問題を解決しました。 Webpackがこれについて何らかの形で警告してくれることを願っています。

編集：最後のメモで、@ cookieで指摘したように、 循環依存関係検出用のプラグインがあります dこの問題にぶつからないようにしたい[もう一度]。

152
Olegs Jeremejevs