如何使用Webpack将所有子目录中的JSON文件合并成一个？

Question

假设我有一个这样的目录结构:

1. folder A
  1a. some_file.js
  1b. data.json
2. folder B
  2a. folder B1
     2a1. other_file.json
     2a2. data.json
  2b. folder B2
     2b1. data.json
3. output.json

有没有webpack加载器可以将所有子文件夹中的data.json组合起来，并将其输出到output.json中？

我发现https://www.npmjs.com/package/json-files-merge-loader似乎可以做类似的事情，但它似乎要求每个data.json的路径，而我需要遍历所有文件夹和子文件夹以获取data.json。所有data.json键都是唯一的，我希望output.json是一个包含所有data.json中所有键/值对的JSON对象。

- dee

---

提醒一下，webpack 在动态包含模块方面表现不佳。它是为显式模块包含而构建的。您可能需要考虑使用构建系统来合并这些文件。 - GJK

@GJK 有关于如何在构建时完成这个任务的建议吗？ - dee

Answer 1

webpack并不适合你的使用场景。许多人认为webpack可以替代构建系统，但它只是一个模块打包器，不能处理所有任务。具体来说：

1. webpack遍历require()和import语句，这意味着需要静态定义模块。通过编写插件或使用从模板生成的文件可能可以绕过此问题，但即使如此...
2. webpack很难按照你想要的方式组合JSON文件。webpack擅长将文件捆绑成某种模块系统（CommonJS或AMD）。你想要的不是包含模块的捆绑包，而是包含任意内容的文件。

webpack可能可以通过一些高级插件来完成这些任务，但这可能不值得。在你的情况下，你可能只需要编写一个Node脚本。如果需要，你可以使用像这样的插件在构建前运行代码。

const fs = require('fs');
// https://github.com/isaacs/node-glob
const glob = require('glob');

const output = {};

glob('src/**/*.json', (error, files) => {
    files.forEach((filename) => {
        const contents = JSON.parse(fs.readFileSync(filename, 'utf8'));
        Object.assign(output, contents);
    });

    fs.writeFileSync('output.json', JSON.stringify(output));
});

- GJK

Answer 2

有没有webpack加载器可以将所有子文件夹中的data.json组合起来，并将其输出到output.json中？

使用merge-webpack-plugin。

这与在构建之前运行代码不同。因为深度的webpack集成允许在热重载时跟踪文件更改并立即更新结果：

MergePlugin = require("merge-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(json)$/i,
        use: [
          MergePlugin.loader()
        ]
      }
    ]
  },
  plugins: [
    new MergePlugin({
      search: './src/**/*.json',
    })
  ]
}

如果您只需要一个名为output.json的目标文件来描述项目中的所有文件夹，请在search参数中描述它们即可。

如果您需要将每个顶级文件夹（output_A.json，output_B.json等）的分离文件合并起来，则：

- 如果您不需要查找子文件夹，请尝试使用值为[path]的group参数进行操作-了解更多关于分组的内容。 - 如果您需要通过每个文件夹及其子文件夹连接所有文件，则需要为每个顶级文件夹创建多个插件实例。但是，您可以通过名称或扩展名（请参阅分组）在每个插件实例中对文件进行分组。

还有一些更多信息。

- fl-web

Answer 3

@dee 请查看这个插件 https://www.npmjs.com/package/merge-jsons-webpack-plugin

您可以将文件/模式的数组传递为输入，并将以json格式发出单个文件。

- sudharsan tk

Answer 4

我的 multi-json-loader 可能会对这里有所帮助。它接受一个 glob 并将文件组合成单个 JSON blob，同时在输出对象中保留相对路径。

例如，dirA/a.json、dirB/b.json 和 dirB/c.json 会被输出为

{
  "dirA": {
    "a": /*parsed contents of a.json*/
  },
  "dirB": {
    "b": /*parsed contents of b.json*/,
    "c": /*parsed contents of b.json*/
  }
}

- CletusW