通过正则表达式从React应用程序中提取字符串和消息？

Question

我们编写了一个 React 应用程序，其字符串和消息直接位于源代码中。现在我们想对其进行本地化。一开始读到this，好像有工具可以从源代码中提取字符串，生成密钥，并将它们放入外部文件中。

但是，现在仔细观察并尝试它们后，我意识到这些工具仅提取标记有某种函数或组件包装的字符串（例如

t()

或

<Trans></Trans>

）。

由于我们有数百个这样的字符串，我们需要自动化其中一些过程。我认为通过使用正则表达式搜索替换将字符串包装在

<Trans></Trans>

或

t()

中可以完成很多工作。但没有一个正则表达式可以匹配所有情况。所以我很确定这以前已经做过，尽管我花了一些精力进行一些谷歌搜索和 chatGpting，但我找不到任何东西。 我想我可能会错过一些东西。 正则表达式集合已经很有帮助了。

非常感谢任何指导！

Answer 1

不幸的是，对此没有简单的自动化解决方案。字符串可以以多种方式出现在应用程序中（作为变量、在 JSX 部分内、在普通 JS 部分内、作为常量等等），因此很难找到针对所有这些情况的单一解决方案。

另外，使用国际化库的哪个组件需要根据具体情况而定，所以自动替换不起作用。

我会推荐以下正确的方法来迁移到国际化库（作为示例，我将使用Lingui）。

Lingui 使用类似的方法，使用

<Trans>

、

i18n.t

包装字符串。它还提供了ESLint插件来帮助您发现代码中常见的Lingui使用错误。

在目前的情况下，我们特别需要这条规则：

no-unlocalized-strings

- 检查代码是否不包含应包含在

<Trans>

或

i18n

中的字符串/模板/jsxText。

因此，多亏了这个插件，您可以轻松地检测所有“未本地化”的字符串。

还强烈建议使用伪本地化功能。

伪本地化是一种通过用更改后的版本替换字符串并保持字符串可读性来测试应用程序国际化方面的方法

通过此功能，开发人员将看到所有尚未本地化的应用程序文本。