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 1}}。所有data.json个键都是唯一的，我希望output.json是一个JSON对象，其中包含来自所有data.json的所有键/值对。

Answer 1

webpack并不适合您的用例。许多人认为webpack可以替代构建系统，但它只是一个模块捆绑器，它不能处理每个任务。具体做法是：

webpack遍历require()和import语句，这意味着它需要静态定义模块。通过编写插件或使用从模板生成的文件来解决这个问题，但即使你这样做了......
webpack很难以您想要的方式组合JSON文件。 webpack擅长将文件捆绑到某种模块系统（CommonJS或AMD）。你想要的不是包含模块的包，而是包含任意内容的文件。

webpack可能能够使用一些花哨的插件来做这些事情，但它可能不值得。在您的情况下，您可能只想编写一个Node脚本。如果需要，可以在构建之前使用plugin like this运行代码。

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));
});

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 param中对它们进行描述，这就是全部
如果您需要为每个顶级文件夹（output_A.json，output_B.json ...）加入分隔文件，那么：
- 如果您不需要通过子文件夹查找，请尝试使用值为[path]的组参数进行播放 - 了解有关分组的详情
- 如果您需要通过每个文件夹及其子文件夹加入所有文件，则需要为每个顶级文件夹创建多个插件实例;但您可以按名称或分组（参见分组）

和一些more

Answer 3

@dee请检查此插件 https://www.npmjs.com/package/merge-jsons-webpack-plugin

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

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*/
  }
}

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

4 个答案: