質問

条件付き

以下のような条件付きimport文は可能でしょうか？

if (foo === bar) {
    import Baz from './Baz';
}

上記を試しましたが、コンパイル時に以下のようなエラー（Babelより）が発生します。

'import' and 'export' may only appear at the top level

動的な

以下のような動的なimport文は可能でしょうか？

for (let foo in bar) {
    if (bar.hasOwnProperty(foo)) {
        import Baz from `./${foo}`;
    }
}

上記は、コンパイル時にBabelから同じエラーを受け取ります。

これは可能なのでしょうか、それとも何か見逃しているものがあるのでしょうか？

推論

私がこれを行おうとしている理由は、いくつかの "ページ" のために多くのインポートがあり、それらは類似したパターンに従っているからです。動的な for ループでこれらのファイルをインポートすることにより、コード ベースをクリーンアップしたいと思います。

もしこれが不可能なら、ES6で大量のインポートを処理する良い方法はありますか？

どのように解決するのですか？

現在、ECMAでダイナミックインポートの提案を行っています。これは第 2 段階です。また、これは バベルプリセット .

条件付きレンダリングを行う方法は、以下の通りです。

if (foo === bar) {
    import('./Baz')
    .then((Baz) => {
       console.log(Baz.Baz);
    });
}

これは基本的にプロミスを返します。プロミスの解決は、モジュールを持つことが期待されます。この提案は、複数の動的インポート、デフォルトインポート、jsファイルのインポートなどのようなものも持っています。より詳しい情報は ダイナミックインポートについては .