如何使用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 loader可以把所有子文件夹里的data.json合并，输出到output.json？

我发现 https://www.npmjs.com/package/json-files-merge-loader 似乎做类似的事情，但它似乎要求每个路径到 data.json，而我需要一些东西遍历 [=] 的所有文件夹和子文件夹12=]。所有 data.json 键都是唯一的，我希望 output.json 成为一个 JSON 对象，其中包含所有 data.json.

中的所有 key/value 对

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

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

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

Answer 3

Is there a webpack loader that can combine data.json in all subfolders, and output it to 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] 的组参数 - 阅读有关分组的更多信息
- 如果您需要通过每个文件夹及其子文件夹加入所有文件，您需要为每个顶级文件夹创建多个插件实例；但您可以按名称或分机对每个插件实例中的文件进行分组（参见分组）

还有一些 more

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个文件合并为一个？

How to use Webpack to combine JSON files from all subdirectories into one?

json

webpack

webpack-dev-server