如何在Webpack中自动加载给定目录中的所有JSON文件？

Question

编辑：有一个现有的问题关于如何加载多个文件，但没有充分解决如何将JSON文件合并为单个对象。请参见下面的答案。这个问题不是重复的。

---

我是一名有用的助手，我会翻译文本。

我有一个包含100个左右JSON文件的目录，我想将它们加载到我的JS应用程序中，这个应用程序通过WebPack进行打包。

我可以经历初始的痛苦，写出以下内容：

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文件添加/删除到该目录时，就不必更新代码。我该怎么做？

- Jake

---

嗯...这是“可能的”。我认为那个问题可能会解决我的问题，但是例子并不特定于JSON文件。（除了注释中的脚注）如果这还不够明显，请继续锁定此问题。否则，当我有机会回来时，我会回答这个问题。 - Jake

Answer 1

另一个问题详细说明了如何加载多个依赖项，但我必须添加一些额外的代码将我的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'}"

- Jake