如何将缺失的翻译写入文件？

Question

在我的 React 应用程序中，我的 i18n 配置如下：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpApi from 'i18next-http-backend';

i18n
  .use(HttpApi)  // load translation using http -> see /public/locales
  .use(initReactI18next)
  .init({
    lng: "en",
    debug: true,
    fallbackLng: "en",
    saveMissing: true,
    backend: { addPath: 'http://localhost:3000/public/locales/{{lng}}/{{ns}}.missing.json'},
    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

现在，当我向我的应用程序添加新的未翻译文本时，无论是

{t("find_box")}

，我可以在浏览器控制台中看到 POST 请求正在发送到

addPath

:

{
    "POST": {
        "scheme": "http",
        "host": "localhost:3000",
        "filename": "/public/locales/en/translation.missing.json"
    }
}

与响应正文

{"find_box": "find_box"}

。该请求返回 200。

我了解

saveMissing

功能，即未翻译的条目将添加到位于

addPath

的文件中。但这并没有发生。位于

addPath

的文件存在并包含一个空对象

{ }

。

1. 我对

   saveMissing

   功能的假设正确吗？
2. 我需要自定义

   missingKeyHandler

   将 POST 请求的内容写入文件吗？
3. 我通过 docker-compose 在本地运行 React 应用程序，这有什么区别吗？

Answer 1

i18next-http-backend 唯一做的就是 POST 请求...现在您需要在服务器端处理该请求... 将 addPath 设置为侦听该发布请求的服务器路由并将其写入文件或数据库或您喜欢的任何位置。

只有 i18next-fs-backend 会自动生成文件...但由于您处于浏览器上下文中，这将不起作用...

例如，您可以将其与 i18next-http-middleware 结合使用，如下所示：https://github.com/i18next/i18next-http-middleware/blob/master/example/basic/index.js#L78