Javascript / Webpack：如何使用自定义循环将文件中的所有json文件连接起来

Question

我正在用webpack构建一个reactJs捆绑包。 我目前正在尝试将json文件连接成一个对象，以与i18next一起使用。 我觉得这很简单，我不想使用过于复杂的解决方案。

我有一个类似的目录结构

messages / locale_name / domain_name.json

如何在代码中的常规对象中导入所有json文件？

到目前为止，我从一开始就很努力，因为我发现了需要require（'fs“）的建议，但是webpack告诉我它无法解析fs模块，而且我已经看到无法安装，因为它是其中的一部分默认节点配置。

一些帮助表示赞赏。

谢谢 ！

Answer 1

经过大量的摸索，这实际上很容易。 以下是我最终得到的结果。 关键是正确设置JSON Loader。

安装JSON Loader for Webpack

1. npm install --save-dev json-loader

将JSON加载程序添加到Webpack加载程序

1. 使用上下文来拉入文件是必需的。
2. 将此添加到您的webpack.config.js加载程序{ test: /\\.json$/, loader: 'json' },
3. 最终可能是这样的：

 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$/) );

1. 其中“模块”是我的app.js（在我的情况下是./src/modules）的子目录。
2. 所有JSON文件都将加载到数组[Object, Object, Object] ，该数组将存储到var modules

Answer 2

最好用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导入

Answer 3

@Sébastien检查此插件https://www.npmjs.com/package/merge-jsons-webpack-plugin

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

例如，如果您在目录/ node_modules / module-a和/ node_modules / module-b中包含许多json文件

您可以使用以下模式将所有json连接到一个单个json文件中，如下所示

new MergeJsonWebpackPlugin({ "files": ['./jsons/file1.json', './jsons/file3.json', './jsons/file2.json'], "output":{ "fileName":"./dist/result.json" } })

免责声明：我对此插件做出了贡献

Answer 4

要合并json文件，请使用merge-webpack-plugin （例如，按文件名分组）

配置示例：

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文件中。 要要求目标合并文件，您只需要一个源文件并加载它。