如何从Webpack中的给定目录自动加载所有JSON文件？ [重复]

This question already has an answer here:

这个问题在这里已有答案:

• How to load all files in a directory using webpack without require statements 5 answers

如何使用webpack加载目录中的所有文件而不需要声明5个答案

Edit: There is an existing question about loading multiple files but does not adequately address how to combine JSON files into a single object. See answer below. This question is not a duplicate.

编辑:存在关于加载多个文件的现有问题,但没有充分解决如何将JSON文件组合到单个对象中的问题。见下面的答案。这个问题不重复。

---

I have a directory with 100 or so JSON files that I want to load into my js app, which is bundled via WebPack.

我有一个包含100个左右JSON文件的目录,我想加载到我的js app中,它通过WebPack捆绑。

I could go through the initial pain of writing out the following:

我可以通过写出以下内容的初步痛苦:

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'),
];

But I would much rather grab everything automatically so that I don't have to update my code when I add/remove JSON files to that directory in the future. How can I do this?

但我宁愿自动抓取所有内容,这样我将来在添加/删除JSON文件时不必更新代码。我怎样才能做到这一点?

1 个解决方案

#1

Another question details how to load multiple dependencies, but I had to add some extra code to combine my JSON files into a single object. This is the working solution:

另一个问题详细说明了如何加载多个依赖项,但我不得不添加一些额外的代码来将我的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;
}

Usage example:

// ./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'}"