最後のプロジェクトでは、es2015とbabelを使い始めました。 import
またはexport
をif
の中に入れようとすると、エラー'import' and 'export' may only appear at the top level
があります。私はそれについて多くのケースを見て、require
ではうまくいくが、es2015モジュールではうまくいきません。この制限には何らかの理由がありますか?エクスポート/インポート宣言をes2015のトップレベルにする必要があるのはなぜですか?
答えて
JavaScriptはES6モジュールで静的解析を実行します。つまり、インポートまたはエクスポートを動的に実行することはできません。 Read section 4.2 of this article for more information:
モジュールの構造は、あなたが(静的に)コンパイル時に輸出入を決定することができ、静的な手段である - あなたが唯一のソースコードを見ている、あなたはそれを実行する必要はありません。
は、静的に分析可能すなわちマクロと種類が(で議論するソースファイルのための能力に依存している将来の機能のためにJavaScriptを準備しているそのうちのいくつかは、このアプローチには多くの理由、あります前述の記事)。
もう一つの興味深いarticle on this topicは循環依存と高速な検索の理由としてに言及しています。
______
あなたはモジュールのいくつかのネストされたブロック内export
を実行したい場合は、モジュールを書いて、それはほぼ確実に必要がないので、そのAPIの/内部を公開する方法を見直します。 ES5コードのネストされたブロック内に現在require
モジュールがある場合も同様です。なぜ、require
/import
がモジュールの先頭にあり、は、入れ子ブロック内ののAPI /内部を消費しますか?このアプローチの主な利点は、少なくとも可読性の観点から、require
呼び出しのソースをスキャンすることなく、モジュールの依存関係を知ることができることです。
それだけでなく、モジュールの依存関係から概念的に吊り上げられていますあなたのコードが実行される前に完全に処理され、 'if'でインポートするという概念は実行する必要があります。 – loganfsmyth
@loganfsmythそれはそれを置くもっとはっきりした方法です:-) – sdgluck
es2015モジュールは同期的にロードされている可能性がありますか?ネストされた 'export'を許可すると、その行が – CodingIntrigue
babel-eslintと呼ばれるまで、エクスポートが延期される可能性があります。 https://stackoverflow.com/questions/39158552/ignore-eslint-error-import-and-export-may-only-appear-at-the-top-level –