JavaScriptアプリケーションでES6モジュールを使用しています。ソースはwebpackとbabelでコンパイルされています。これは私にトラブルを引き起こすファイルの短縮バージョンです:ES6モジュール:インポートされた定数は、最初は定義されていません。後で使用できるようになります
export const JUST_FORM = 0;
export const AS_PAGE = 1;
console.log(AS_PAGE); // **
export default function doSomething(mode = AS_PAGE) {
console.log(mode);
console.log(JUST_FORM);
}
私はこの機能を期待通りに使います。
import doSomething, { AS_PAGE } from './doSomething'
console.log(AS_PAGE);
doSomething();
私はアプリを実行すると、それが三回undefined
を印刷し、唯一**
が付いconsole.log
で期待値AS_PAGE
一回。しかし、これは最後に印刷されます!
AS_PAGE
定数は、doSomething
function`のデフォルトパラメータとして使用される場合、関数を定義する瞬間に定義されていない:それはことを示しています。doSomething
を呼び出すと、定数は定義されません。AS_PAGE
定数は、明示的にインポートすると定義されません。
明らかに、default
のエクスポートだけが解析され、評価され、残りのファイルは後で無視されます。私はこのファイルを私のアプリのいくつかの異なる場所にインポートします(現時点ではかなり大きい)、ある時点でそれらの値が実際に利用可能になります。コンソール出力から判断すると、時間の問題ですが、別の理由がある可能性があります。明らかに、私はすべての場所でまったく同じようにインポートを行います。
とにかく、私が何かを読み込んだらすぐに利用できると私のコードでそれを使うことができるという前提で、私はアプリケーション全体を書いてきました。私はES6モジュールがどのように動作すべきかについて(簡単に)読んでおり、この仮定が間違っていることを証明するものは見つけられませんでした。それまでは今まで働いていました。
また、webpack-dev-server
で実行したり、単一のバンドルにコンパイルしたときの動作は同じです。
この動作は本当に正しいですか?それは何が原因でしょうか?
循環依存関係。 – Bergi
@Bergi私は盲目でなければなりません、循環依存はどこですか? –
@torazaburo:彼が投稿したコードではありませんが、これはこの動作の原因です。私は賭けるよ。 – Bergi