require.ensure（webpack用）でインポート構文を置き換える方法は？

Question

webpackからrequire.ensureに置き換えようとしている輸入品があります。私は私が間違ってやっているものを全くわからないので、ここに私のコードです：

以前私が持っていた：

私はそのようにのようにスイッチケースに使用していた

import module1 from 'module1'; 
    import module2 from 'module2'; 
    import module3 from 'module3'; 

：

switch (url) { 
    case 'module1': 
     return module1; 
    case 'module2': 
     return module2; 
    case 'module3': 
     return module3 
} 

これは素晴らしい仕事でした。しかし、私は輸入を削除しているので、同じようrequire.ensureに置き換えるしようとしています：

case 'module1': 
     return require.ensure(['module1'], (require) => require('module1'), 'module1'); 
    case 'module2': 
     return require.ensure(['module2'], (require) => require('module2'), 'module2'); 
    case 'module3': 
     return require.ensure(['module3'], (require) => require('module3'), 'module3'); 
} 

これは動作するようには思えない、私はミスを理解する方法require.ensure作品だと思います。この場合、どうすれば正しく使用できますか？ありがとう！

Answer 1

require.ensureは、であり、非同期である。まだロードされていない場合は、オンデマンドでモジュールをロードします。そのため、コールバックを提供する必要があります。モジュールがロードされると、コールバックが実行されます。

オリジナルの例は、の同期です。いずれかのコードが実行される前に、すべてのモジュールがロードされます。

要求に応じてモジュールをロードするには、モジュールAPIを非同期にする必要があります。

export default function loadModule(url) { 
    return new Promise(resolve => { 
    switch (url) { 
     case 'module1': 
     require(['module1'], resolve); 
     break; 
    } 
} 

（私はここrequireの2つの引数形式を使用しています：元のモジュールは何か

import module1 from 'module1'; 

export default function loadModule(url) { 
    switch (url) { 
    case 'module1': 
     return module1; 
    } 
} 

のように簡単な解決策は、機能ではなく、約束を返す作ることであろうに見えると仮定すると、

require.ensureの代わりにこの状況で使用する方が簡単です）。

任意の呼び出し場所を使用すると、チェーン非同期で一つの関数を作成する場合は、それに依存して何か他のものが同様に非同期になることがある

loadModule('module1').then(module => { 
    // do stuff with module 
}); 

に

const module = loadModule('module1'); 

から変更しなければなりません。

---

注：urlの値が既にモジュール名であり、あなただけでは、特定のモジュールをロードしたい場合は、すべてのswitch文を持っている必要はありません。モジュールを直接ロードしてください：

function loadModule(url) { 
    return new Promise(resolve => require(url, resolve)); 
} 

しかし、あなたはどんなコンテキストも提供していないので、より具体的な解決策を提示するのは難しいです。