我必須構建一個登錄頁面，訪問該頁面時將檢查您的用戶代理并確定您正在使用哪個設備，如果您使用的是受支持的設備，它將顯示該設備的一些資訊。顯示的資訊已完成，檢查用戶代理也已完成。
沒有做的是因為我被卡住了。我有這樣的目錄結構：
-devices
-nintendo
config.json
-xbox
config.json
-ps5
config.json
等等。因此，由于我需要在運行時訪問這些配置，因為在用戶登陸頁面之前我不會知道用戶正在使用哪個設備，因此無法在構建時確定。所以我的想法是有一個 JS 檔案，它將遍歷所有這些檔案夾并獲取每個配置并構建一個大配置，該配置將成為 web 包中的一個模塊，我可以將其匯入我的 main.js 檔案中，這樣我就可以匯入它并使用點符號訪問屬性。
我可以使用 web pack 完成所有這些并跳過將組合所有配置的 JS 檔案，還是有更好的方法？
uj5u.com熱心網友回復：
你真的不需要任何額外的東西來實作這一點。假設您具有以下目錄結構：
- main.js
- devices
- nintendo
- config.json
- xbox
- config.json
- ps5
- config.json
您所要做的就是在main.js檔案中匯入單個 JSON：
import nintendo from './devices/nintendo/config.json';
import xbox from './devices/xbox/config.json';
import ps5 from './devices/ps5/config.json';
function main() {
// Read `someDevice` at runtime
if (someDevice === 'nintendo') {
console.log(nintendo);
}
}
如果您的json檔案很大并且包大小成為問題，那么您可以使用動態匯入和async-await并且 Webpack 會自動為您拆分包：
async function main() {
if (someDevice === 'nintendo') {
const nintendo = await import('./devices/nintendo/config.json');
} else if (someDevice === 'xbox') {
const xbox = await import('./devices/nintendo/config.json');
} else {
const ps5 = await import('./devices/ps5/config.json');
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/517261.html