Babel.js 带有多个翻译文件的react-i18 next

s3fp2yjn 于 2022-12-08 发布在 Babel

关注(0)|答案(2)|浏览(206)

我在我的应用程序中遇到了一个小问题。我使用i18 next和react-i18 next进行翻译，并且已经包含了它。整个翻译来自每种语言的一个文件，这是一个超过4000行的混乱：（
现在我想更新这个，以便i18 next将翻译文件放在不同的组件文件夹和他们的子文件夹。
更新后的文件夹结构应如下所示：

scr
- components
-- Header
---translations (en/translation.json, de/translation.json)
-- Dashboard
--- translations (en/translation.json, de/translation.json)
--- Menu
---- translations (en/translation.json, de/translation.json)
---- ExampleComponent.tsx
---- ...
--- Cards
---- translations (en/translation.json, de/translation.json)
...

我已经知道如何通过babel和babel-i18 next-plugin使用“namespace”处理自动导出
因此，我的程式码（例如Menu）会写成这样：

const { t } = useTranslation("Dashboard/Menu")

const explString = t("ExampleComponent.ExampleString","This is an example")

在巴别塔我放置插件这样：

[i18next-plugin, {"outputPath": "src/components/{{ns}}/translations/{{locale}}/translation.json"}]

它将名称空间作为一个文件夹结构，并将翻译文件放入翻译文件夹中，包括正确的键。
现在，我如何告诉i18 next，在哪里可以找到翻译文件呢？我只能知道我可以在一个资源中导入文件（逐个文件）。我尝试了后端插件（html-backend，async-storage-backend，local-storage-backend和filesystem）
backend: { loadPath: "components/{{ns}}/translations/{{lng}}/translation.json" }
(The i18next.ts被放置在src/内）
我收到了找不到密钥的警告。
此外，您可以看到我使用了TypeScript。
在我的webpack中，我尝试使用ts-i18 next-loader，在webpack配置文件中包含以下内容：

{
    test: /\translation.json$/,
    exclude: /node_modules/,
    loader: 'i18next-ts-loader',
    options: {
      localeFilesPattern: 'src/components/{{ns}}/translations/{{lng}}/translation.json',
    },
  },

如果每种语言/命名空间只有5-6个翻译文件，那么将其放入资源中就不会有问题，但最终每种语言都有100多个文件。
如果有人能解决我的问题就好了。如果你需要任何进一步的信息，我可以更新帖子。
干杯

babeljs

来源：https://stackoverflow.com/questions/72844869/react-i18next-with-multiple-translation-files

2条答案

按热度按时间

qacovj5a1#

有一个替代插件使用，建议在官方文档：https://www.i18next.com/how-to/add-or-load-translations#lazy-load-in-memory-translations
i18next-resources-to-backend有助于将资源转换到i18next后端。这意味着，您也可以延迟加载翻译，例如在使用webpack时：

import i18next from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';

i18next
  .use(resourcesToBackend((language, namespace, callback) => {
    import(`./locales/${language}/${namespace}.json`)
      .then((resources) => {
        callback(null, resources)
      })
      .catch((error) => {
        callback(error, null)
      })
  }))
  .init({ /* other options */ })

赞(0）回复(0）举报 2022-12-08

js4nwp542#

找到了解决方案。在我包括了“i18next的webpack后端”之后，它解决了问题，翻译得到了正确的文件。
i18next webpack backend by SimeonC

赞(0）回复(0）举报 2022-12-08