Reactjs 将i18n json文件与Web包捆绑

我使用React项目，并通过i18next添加多语言支持。对于每个组件，我都有一个单独的

locale

文件夹，其中包含多个json文件，每种语言一个

我试图将所有这些文件打包成一个

locales.json

文件，并使用它来配置i18next。我发现了一个Webpack插件（），它按照我想要的方式进行打包，它在build文件夹中创建输出文件，但是我不知道如何使用结果

这是我的网页配置的

插件部分：

new MergeJsonWebpackPlugin({
  output: {
    groupBy: [
      {
        pattern: 'app/**/locales/*.json',
        fileName: 'locales.json',
      },
    ],
  },
})

如何在代码中引用构建工件？如何导入locales.json？

我是不是错过了网页的重点？如果是这样，上述插件的用途是什么？
尝试使用Webpack，它允许您以某种模式导入所有文件，而无需使用插件

//想象一下，我们有一种从cookie或其他存储中获取语言的方法
const language=detectVisitorLanguage（）；
导入（`./locale/${language}.json`）。然后（模块=>{
//对翻译做些什么
});
这些线程似乎可以解决您可能遇到的问题：



总而言之，我将在第一个线程中引用：

“webpack并不真正适合您的用例。”

但是，您可以使用下面建议的方法在编译和绑定阶段实现合并和注入的目标

使用网页包将值（序列化JSON对象）分配给全局变量。然后可以将此全局变量分配给i18next
resources
属性以初始化翻译

与使用merge jsons webpack插件创建合并文件不同，您可以使用以下方法创建合并JSON对象（而不是文件）：

,
，及

您当前在merge jsons webpack插件中使用的搜索模式应该适用于glob，但可能需要进行一些调整。deepmerge json非常灵活，应该能够适应.json翻译文件的结构

您可以下载、安装、构建和测试一个简单的演示，然后根据需要进行更新。
那么为什么不通过http调用加载json呢？由于在使用插件的情况下，您无法在捆绑代码中要求它，我猜该文件会显示在build文件夹中，因此在生产环境中应该可以正常工作，但在开发模式（react样板文件）中似乎无法正常工作。不确定您真正需要什么？我有一些json文件，我想将它们合并为一个，然后使用生成的对象来配置i18next。我想在Webpack中进行合并，因为作为预构建步骤进行合并对我来说是有意义的，但是我不知道如何引用代码的输出。我需要知道这是否可能，是否有意义，如果有，如何做。我同意你（和GJK）的观点，这不是webpack的最佳用途。我是在测试了不同的解决方案后得出这个结论的，没有一个是令人满意的。谢谢你详尽的回答！谢谢亚历山德罗。您能简单地分享一下为您提供的解决方案吗？我刚刚创建了一个小脚本，它使用glob循环给定的路径模式，将所有json对象合并为一个对象，并将结果保存在一个文件中。每次我们对语言文件进行更改时，以及在任何构建之前，都会调用脚本。谢谢Alessandro。