[英]How to use Webpack to combine JSON files from all subdirectories into one?
Say I have a directory structured like this: 假设我有一个像这样结构化的目录:
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
Is there a webpack loader that can combine data.json
in all subfolders, and output it to output.json
? 是否有一个webpack加载器可以在所有子文件夹中组合
data.json
,并将其输出到output.json
?
I've found https://www.npmjs.com/package/json-files-merge-loader that seems to do something similar, but it seems to ask for each path to data.json
, while I need something that goes through all folders and subfolders for data.json
. 我发现https://www.npmjs.com/package/json-files-merge-loader似乎做了类似的事情,但似乎要求
data.json
每条路径,而我需要通过的东西data.json
所有文件夹和子文件夹。 All data.json
keys are unique, and I want output.json
to be one JSON object containing all key/value pair from all data.json
. 所有
data.json
键都是唯一的,我希望output.json
是一个包含所有data.json
中所有键/值对的JSON对象。
webpack is not really suited for the use case you have. webpack并不适合您的用例。 Many people think that webpack can be a replacement for a build system, but it's just a module bundler, it doesn't handle every task.
许多人认为webpack可以替代构建系统,但它只是一个模块捆绑器,它不能处理每个任务。 Specifically:
特别:
require()
and import
statements, meaning it needs the modules to be statically defined. require()
和import
语句,这意味着它需要静态定义模块。 It's possible to get around this by writing a plugin or using a file generated from a template, but even if you did that... webpack might be able to do these things using some fancy plugins, but it's likely not worth it. webpack可能能够使用一些花哨的插件来做这些事情,但它可能不值得。 In your case, you probably just want to write a Node script.
在您的情况下,您可能只想编写一个Node脚本。 If you want, you can use a plugin like this to run the code before build.
如果需要,可以使用这样的插件在构建之前运行代码。
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));
});
Is there a webpack loader that can combine data.json in all subfolders, and output it to output.json?
是否有一个webpack加载器可以在所有子文件夹中组合data.json,并将其输出到output.json?
Use the merge-webpack-plugin . 使用merge-webpack-plugin 。
This is differ from to run the code before build. 这与在构建之前运行代码不同。 Because deep webpack integration allow to follow file changes and update results immidiately while hot reloading:
因为深度webpack集成允许在热重新加载时跟踪文件更改并立即更新结果:
MergePlugin = require("merge-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(json)$/i,
use: [
MergePlugin.loader()
]
}
]
},
plugins: [
new MergePlugin({
search: './src/**/*.json',
})
]
}
output.json
for all folders in your project describe them all in search
param, and that is all output.json
,那么项目中的所有文件夹都会在search
参数中描述它们,这就是全部 [path]
- read more about grouping [path]
组参数进行播放 - 请阅读有关分组的更多信息 @dee Please check this plugin https://www.npmjs.com/package/merge-jsons-webpack-plugin @dee请检查此插件https://www.npmjs.com/package/merge-jsons-webpack-plugin
You can pass array of files/patterns as an input and it will emit single file as json. 您可以将文件/模式数组作为输入传递,它将以json的形式发出单个文件。
My multi-json-loader
might be helpful here. 我的
multi-json-loader
在这里可能会有所帮助。 It accepts a glob and combines the files into a single JSON blob while also retaining relative paths in the output object. 它接受glob并将文件合并为单个JSON blob,同时还保留输出对象中的相对路径。
Ie, dirA/a.json, dirB/b.json, and dirB/c.json get output as 即,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*/
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.