我怎麼能自動從的WebPack指定目錄加載所有JSON文件？

編輯：有an existing question有關加載多個文件，但並沒有充分解決如何JSON文件合併成一個單一的對象。見下面的答案。這個問題不是重複的。我怎麼能自動從的WebPack指定目錄加載所有JSON文件？

我有我想要加載到我的js的應用程序，它通過捆綁的WebPack 100個左右JSON文件的目錄。

我能經歷寫出的初始疼痛以下幾點：

let data = [ 
    require('json!./Mocks/0.json'), 
    require('json!./Mocks/1.json'), 
    // 2 - 98... 
    require('json!./Mocks/99.json'), 
    require('json!./Mocks/error.json'), 
    require('json!./Mocks/foo.json'), 
];

但我寧願抓住一切自動讓我沒有更新我的代碼時，我添加/刪除文件JSON到將來的目錄。我怎樣才能做到這一點？

來源

2016-11-10 Jake

嗯......這是* *可能。我認爲這個問題可能會解決我的問題，但這個例子並不特定於JSON文件。（除了在評論一個腳註）。如果這還不夠區別的，繼續前進，鎖定這個。否則，當我有機會回到這個問題時，我會回答這個問題。 – Jake

Another question詳細介紹瞭如何加載多個依賴關係，但我不得不添加一些額外的代碼，以我的JSON文件合併成一個單一的對象。這是工作的解決方案：

// Get filename only. 
// Example: './foo.json' becomes 'foo' 
function getFileNameOnly(filePath) { 
    return filePath.split('/').pop().split('.').shift(); 
} 

// ALL THE JSON! 
function loadJson() { 
    const requireContext = require.context('json!./Mocks', false, /\.json$/); 
    const json = {}; 
    requireContext.keys().forEach((key) => { 
    const obj = requireContext(key); 
    const simpleKey = getFileNameOnly(key); 
    json[simpleKey] = obj; 
    }); 
    return json; 
}

用例：

// ./Mocks/99.json 
{ 
    "name": "ninety nine" 
} 


// ./Mocks/foo.json 
{ 
    "name": "bar" 
} 

// App.js 
let myJson = loadJson(); 
console.log(myJson['99']); // > "Object{name:'ninety nine'}" 
console.log(myJson['foo']); // > "Object{name:'bar'}"

來源

2016-11-11 17:07:48 Jake

我怎麼能自動從的WebPack指定目錄加載所有JSON文件？

回答

相關問題