reactjs - 使用 react-intl 在 monorepo 中组合多种语言和源文件

Question

对于我们的项目，我在 monorepo 中构建了许多 React 应用程序。我们有一个包来集中我们的 i18n 逻辑。它拥有许多日期函数，并包含带有英语、德语和法语通用翻译的 json 文件。

我们的要求之一是组件特定的转换位于组件文件夹中的“标签”文件夹中（不在“intl”包中）。这背后的想法是包括一个构建步骤，该步骤采用特定应用程序的组件翻译和通用翻译并将它们合并。然后可以将合并的结果用于包装应用程序的 IntlProvider 的 'messages' 属性。我们想要这个工作流程，以便我们可以在应用程序之间共享一些通用翻译，但也可以在特定应用程序的上下文需要不同翻译时覆盖这些翻译。

我们希望将我们的翻译与它们各自的组件保持一致，以确保它们尽可能独立。它还将使测试工作流更容易。

monorepo 结构可以可视化（简化）为：

monorepo
│   .git
│   .gitignore
│   package.json    
│
└───intl
│   │   package.json
│   │
│   └───labels
│   │   │   de.json
│   │   │   en.json
│   │   │   fr.json
│   │    
│   └───functions
│       │   function1.js
│       │   function2.js
│       │   ...
│   
└───application1
│   │   package.json
│   │
│   └───components
│   │   │
│   │   └───Home
│   │       │   Home.js
│   │       │
│   │       └───labels
│   │           │   de.json  
│   │           │   en.json 
│   │           │   fr.json 
│   │    
│   └───build
│       └───labels
│           │   de.json
│           │   en.json
│           │   fr.json
│
│   ...

一般结果应该是application1 > build > labels > en.json包含所有来自intl > labels > en.json和的翻译application1 > components > Home > labels > en.json（加上任何其他组件的所有特定翻译）。理想情况下，如果组件的 id 也存在于intl > labels > en.json组件的标签中，则应覆盖标签 from intl。

我们计划将 react-intl 用于 i18n，但文档并没有太大帮助（对于我们非常具体的用例）。我想知道是否有人对如何在 react-intl 中实现这一点有类似的工作流程和经验。

标签： reactjsinternationalizationreact-intl