使用 Webpack 捆绑 i18n json 文件

Question

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

我正在尝试将所有这些文件打包成一个 locales.json 文件并使用它来配置 i18next。我找到了一个 Webpack 插件 (merge-jsons-webpack-plugin)，它可以按照我想要的方式进行打包，它会在构建文件夹中创建输出文件，但我不知道如何使用结果。

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

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

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

Answer 1

尝试使用 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
});

Answer 2

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

Webpack 插件：运行资产写入文件系统后的命令 #6159

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

"webpack is not really suited for the use case you have."

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

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

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

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

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

使用 Webpack 捆绑 i18n json 文件

Bundle i18n json files with Webpack

reactjs

webpack

i18next