我怎么能自动从的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文件？

回答

相关问题