如何自动加载 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 文件时就不必更新代码。我怎样才能做到这一点？

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