如何通过工具生成语言转换文件？react-intl自动翻译实现咨询

Hey there! Let's tackle your two localization questions one by one:

Absolutely! You don't have to translate every string manually—there are plenty of tools and workflows to automate generating language translation files:

• CLI工具+翻译API组合：先用i18next-parser或者react-intl自带的@formatjs/cli提取项目中的所有待翻译文案（生成类似en.json的基准文件），再结合Google Translate API、DeepL API写个简单的Node.js脚本，批量将基准文件翻译成目标语言（比如fr.json、es.json）。
• 本地化协作平台：像Locize、Phrase、Lokalise这类平台支持上传基准语言文件，一键自动翻译成几十种语言，还提供后续手动校对的功能，非常适合团队场景。
• 轻量开源工具：比如translate-cli（基于Google Translate），可以直接在命令行执行类似 translate-cli -f en -t fr -i en.json -o fr.json 的命令，快速生成翻译文件。

举个极简的Node.js脚本示例（基于Google Translate API）：

const { Translate } = require('@google-cloud/translate').v2;
const fs = require('fs');

const translate = new Translate({ key: '你的API密钥' });
const enStrings = require('./en.json');

async function generateFrTranslation() {
  const frStrings = {};
  for (const [key, value] of Object.entries(enStrings)) {
    const [translation] = await translate.translate(value, 'fr');
    frStrings[key] = translation;
  }
  fs.writeFileSync('./fr.json', JSON.stringify(frStrings, null, 2));
  console.log('法文翻译文件生成完成！');
}

generateFrTranslation();

React-intl本身是用来管理和渲染本地化文案的，没有内置自动翻译能力，但我们可以结合翻译API实现“自动翻译+实时加载”的效果，具体步骤如下：

1. 提取基准语言文案：用@formatjs/cli的extract命令，提取项目中所有<FormattedMessage>或formatMessage调用的文案，生成en.json基准文件。
2. 预生成常用语言翻译（可选）：用问题1中的方法，提前将en.json翻译成常用语言的文件（比如fr.json）并打包到项目中，确保用户切换语言时能快速加载。
3. 动态翻译兜底：如果某个语言的翻译文件不存在，或者某个文案未被翻译，可以在用户切换语言时，实时调用翻译API翻译对应文案，并缓存到本地（比如localStorage），避免重复请求。

这里给个动态翻译的组件思路示例：

import { useIntl } from 'react-intl';
import { useState, useEffect } from 'react';

// 建议将API调用封装到后端，避免前端暴露密钥
async function fetchTranslation(text, targetLang) {
  const res = await fetch('/api/translate', {
    method: 'POST',
    body: JSON.stringify({ text, targetLang })
  });
  return res.json();
}

function AutoTranslatedMessage({ id, defaultMessage }) {
  const intl = useIntl();
  const [translatedText, setTranslatedText] = useState(
    intl.formatMessage({ id, defaultMessage })
  );

  useEffect(() => {
    const currentLang = intl.locale;
    if (currentLang === 'en') return;

    // 优先读取本地缓存
    const cachedText = localStorage.getItem(`trans_${id}_${currentLang}`);
    if (cachedText) {
      setTranslatedText(cachedText);
      return;
    }

    // 缓存不存在则请求翻译
    fetchTranslation(defaultMessage, currentLang).then(data => {
      setTranslatedText(data.translation);
      localStorage.setItem(`trans_${id}_${currentLang}`, data.translation);
    });
  }, [intl.locale, id, defaultMessage]);

  return <span>{translatedText}</span>;
}

内容的提问来源于stack exchange，提问作者Vinee