我在我的应用程序中遇到了一个小问题。我使用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多个文件。
如果有人能解决我的问题就好了。如果你需要任何进一步的信息,我可以更新帖子。
干杯
2条答案
按热度按时间qacovj5a1#
有一个替代插件使用,建议在官方文档:https://www.i18next.com/how-to/add-or-load-translations#lazy-load-in-memory-translations
i18next-resources-to-backend有助于将资源转换到i18next后端。这意味着,您也可以延迟加载翻译,例如在使用webpack时:
js4nwp542#
找到了解决方案。在我包括了“i18next的webpack后端”之后,它解决了问题,翻译得到了正确的文件。
i18next webpack backend by SimeonC