1. ホーム
  2. ジャバスクリプト

[解決済み】ES6モジュールを条件付きでインポートするにはどうすればいいですか?

2022-04-03 23:24:34

質問

というようなことをしたいのですが。

if (condition) {
    import something from 'something';
}
// ...
if (something) {
    something.doStuff();
}

上記のコードはコンパイルできません。 SyntaxError: ... 'import' and 'export' may only appear at the top level .

を使ってみました。 System.import のように こちら が、どこにあるのかわからない。 System が出てきます。ES6の提案で、結局採用されなかったのでしょうか?その記事からの "programmatic API" へのリンクは、私を以下の場所に投げ捨てます。 非推奨のドキュメントページ .

解決方法は?

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

以下は、あなたのケースに合わせた条件付きレンダリングを行う方法です。

if (condition) {
    import('something')
    .then((something) => {
       console.log(something.something);
    });
}

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