Javascript / webpack：如何连接目录中的所有json文件，并使用自定义循环覆盖文件
我正在用webpack构buildreactJs包。 我目前正试图将json文件连接到一个对象，以便与i18next一起使用。 我觉得这很简单，我不想使用过于复杂的解决scheme。
我有一个目录结构
消息/ LOCALE_NAME / domain_name.json
如何导入我的代码中的常规对象中的所有json文件？
到目前为止，我一开始正在努力，因为我发现需要（'fs'）的build议，但webpack告诉我它不能解决fs模块，我已经看到我不能安装它，因为它是默认节点configuration。
有些帮助赞赏。
谢谢 ！
经过大量的努力，实际上很简单。 下面是我结束了。 关键是让JSON加载程序正确设置。
为Webpack安装JSON加载程序
npm install --save-dev json-loader
将JSON加载器添加到您的Webpack加载器
- 这是使用上下文来拉入文件所必需的。
- 把这个添加到你的webpack.config.js加载器
{ test: /\.json$/, loader: 'json' }, - 决赛可能是这样的：
module.exports = { entry: './src/app.js', output: { path: __dirname, filename: './build/bundle.js' }, module: { loaders: [ { test: /\.json$/, loader: 'json' } ] } }
使用上下文加载文件并将其保存到数组中
在我的app.js中：
function requireAll( requireContext ) { return requireContext.keys().map( requireContext ); } var modules = requireAll( require.context("./modules", false, /.json$/) );
- 其中“模块”是从我的app.js（在我的情况下./src/modules）子目录。
- 所有的JSON文件将被加载到一个数组
[Object, Object, Object]，我正在存储到var modules
这最好用json-loader之类的东西来完成
安装它（ npm install json-loader --save-dev ），您可以按照项目自述文件中的描述进行导入：
var json = require("json!./messages/locale_name/domain_name.json");
或者你可以添加一个加载器到你的webpack.config.js并正常导入json：
webpack.config.js：
module: { loaders: [ {test: /\.json$/, loader: 'json-loader'}, ] },
并在您的来源：
var json = require("./messages/locale_name/domain_name.json");
或者，当然，如果这是您在项目中使用的，则可以使用ES6导入
@Sébastien检查这个插件https://www.npmjs.com/package/merge-jsons-webpack-plugin
您可以传递文件/模式数组作为input，它会发射单个文件为JSON。
例如，如果在目录/ node_modules / module-a和/ node_modules / module-b中有许多json文件
你可以使用下面的模式来连接所有的jsons成一个像下面的单个json文件
new MergeJsonWebpackPlugin({ "files": ['./jsons/file1.json', './jsons/file3.json', './jsons/file2.json'], "output":{ "fileName":"./dist/result.json" } })
免责声明：我对这个插件做出了贡献
要合并json文件，请使用merge-webpack-plugin （也可以按文件名进行分组）
configuration示例：
MergePlugin = require("merge-webpack-plugin"); module.exports = { module: { rules: [ { test: /\.(json)$/i, use: [ MergePlugin.loader() ], // also yaml by preloader there too test: /\.(yaml)$/i, use: [ MergePlugin.loader(), 'yaml-loader' ], } ] }, plugins: [ new MergePlugin({ search: './src/**/*.json', group: '[name]', }) ] }
这个例子文件将按文件名分组。 每个组将被加载和合并并保存到目标json文件中。 要求目标合并文件，你只需要一个源文件并加载它。