Question

我正在处理React项目，并且正在通过i18next添加多语言支持。对于每个组件，我都有一个单独的locale文件夹，其中包含多个json文件，每种语言一个。

我正在尝试将所有这些文件打包到单个locales.json文件中，并使用它来配置i18next。我找到了一个Webpack插件（merge-jsons-webpack-plugin），该插件完全按照我的要求进行打包，它在build文件夹中创建了输出文件，但是我不知道如何使用结果。

这是我的Webpack配置的plugins部分：

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

如何在代码中引用构建工件？如何导入locales.json？
我是否在这里错过了Webpack的要点？如果是这样，上述插件的目的是什么？

Answer 1

这些线程似乎是在解决您可能遇到的问题：

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

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

但是，您可以使用以下建议的方法在编译和捆绑阶段完成合并和注入的目标。

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

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

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

您可以下载，安装，构建和测试一个简单的演示，可以从此GitHub Gist中为您的目的进行更新。

Answer 2

尝试使用Webpack的Dynamic expressions in import()，它允许您以某种模式导入所有文件，而无需使用插件。

// imagine we had a method to get language from cookies or other storage
const language = detectVisitorLanguage();
import(`./locale/${language}.json`).then(module => {
  // do something with the translations
});

将i18n json文件与Webpack捆绑在一起

2 个答案: