使用 Webpack 捆绑 i18n json 文件答案

【问题标题】：Bundle i18n json files with Webpack使用 Webpack 捆绑 i18n json 文件
【发布时间】：2021-01-07 11:19:30
【问题描述】：

我正在处理一个 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 的重点吗？如果是这样，上述插件的目的是什么？

【问题讨论】：

那你为什么不通过http调用加载你的json呢？由于您无法在使用插件的情况下在捆绑代码中使用它，我猜
该文件显示在 build 文件夹中，因此它在生产中应该可以正常工作，但在开发模式下似乎无法正常工作（react-boilerplate）。
不确定您真正需要什么？
我有一些 json 文件，我想将它们合并为一个，然后使用生成的对象来配置 i18next。我想在 Webpack 中进行合并，因为将其作为预构建步骤对我来说是有意义的，但是我不知道如何引用我的代码的输出。我需要知道这是否可行，是否有意义，如果可行，该怎么做。

标签： reactjs webpack i18next

【解决方案1】：

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

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

“webpack 并不适合你的用例。”

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

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

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

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

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

【讨论】：

我同意你（和 GJK）的观点，这不是 webpack 的最佳用途。在测试了不同的解决方案后，我得出了这个结论，但没有一个足够令人满意。感谢您的详尽回答！
谢谢亚历山德罗。您能简要分享一下对您有用的解决方案吗？
我刚刚创建了一个小脚本，它使用 glob 循环遍历给定的路径模式，将所有 json 对象合并为一个并将结果保存在文件中。每次我们对语言文件进行更改时以及在任何构建之前都会调用该脚本。
谢谢亚历山德罗。

【解决方案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
});

【讨论】：