如何用require.ensure替換導入語法（用於webpack）？

我有一些進口，我試圖用webpack中的require.ensure替換。我不能完全肯定我在做什麼不正確，因此這裏是我的代碼：如何用require.ensure替換導入語法（用於webpack）？

以前我有：

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作品。如何在這種情況下正確使用它？謝謝！

來源

2016-08-15 ajmajmajma

你不可能真的。您的第一個用例同步加載模塊，而第二個用例異步加載它們。你必須首先提供一個異步API。 –

@FelixKling非常感謝！你能指出我正確的方向嗎？ – ajmajmajma

查看我的回答... –

require.ensure是異步。如果它尚未加載，它將按需加載模塊。這就是爲什麼你必須提供回調。一旦模塊被加載，回調就會被執行。

您的原始示例是同步。在執行任何代碼之前，所有模塊都被加載。

爲了按需加載模塊，還必須使模塊API異步。

假設原來的模塊看起來像

import module1 from 'module1'; 

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

一個簡單的解決辦法是使函數返回，而不是一個承諾：

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

（我用的require兩個參數的形式在這裏而不是require.ensure，因爲它更容易在這種情況下使用）。

任何調用點都必須從

const module = loadModule('module1');

改爲

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

如果你把一個函數鏈中的異步，什麼都依賴於它有可能成爲異步爲好。

注：如果url值已經是一個模塊名稱，你只是想加載特定模塊，沒有必要有一個switch語句都沒有。直接加載模塊：

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

但是您不提供任何上下文，所以很難提供更具體的解決方案。

來源

2016-08-16 03:21:09

對不起，錯過了一些上下文。我試圖將我的自定義npm模塊的所有導入替換爲異步語法，並希望它們也是單獨的包。最終目標是隻在需要時加載它們（希望）。 – ajmajmajma

這很有道理。我在一個項目中做同樣的事情。在那裏，每個解析器都有一個'loadParser'方法，它使用'require'的兩個參數形式自動加載相應的模塊。例如：https：//github.com/fkling/astexplorer/blob/master/src/parsers/js/esprima.js。也許環視該代碼庫也會有所幫助。 –

這很好，謝謝。這很有趣......我目前在你設置的switch開關中使用promise回調，並且它正在創建一個1.bundle文件，該文件正在索引中正常加載，但它似乎沒有與原始包一起玩好。也許我應該採取不同的方法。 – ajmajmajma

如何用require.ensure替換導入語法（用於webpack）？

回答

相關問題