使用指南：react-intl-translations-manager

使用指南：react-intl-translations-manager

react-intl-translations-managerManage all translations based on the extracted messages of the babel-plugin-react-intl项目地址:https://gitcode.com/gh_mirrors/re/react-intl-translations-manager

1. 项目目录结构及介绍

react-intl-translations-manager 是一个用于管理由 react-intl 提取的多语言消息的工具。虽然具体的项目目录可能依据你的应用自定义有所不同，但使用该工具时通常涉及以下核心目录和文件结构：

• messages 目录：此目录存放所有原始的消息文件，通常是提取自代码中的 FormattedMessage 组件的文案。

• src/locales 目录：在使用 react-intl-translations-manager 后，它将为每种支持的语言创建或更新此目录下的对应翻译文件（如 en.json, es.json），这些文件存储了应用中所有消息的翻译。

• translationRunner.js：这是项目根目录下配置和运行翻译管理脚本的文件，用来自动化处理翻译状态和生成初始翻译文件。配置包括消息目录路径、翻译文件保存位置、支持的语言等。

• src/locales/index.js：这个文件通常用于统一导入所有语言环境文件，方便全局访问。

2. 项目启动文件介绍

尽管本指南专注于翻译管理，一般而言，React 应用的启动并非直接关联到 react-intl-translations-manager。不过，当你配置好翻译后，应用的主入口文件（通常为 index.js 或 index.tsx）中会包含 IntlProvider 组件以提供国际化上下文。简要示例如下：

import { IntlProvider } from 'react-intl';
import locales from './locales';

// 假设locale变量是动态设置的
const locale = 'en';
const messages = locales[`${locale}`];

ReactDOM.render(
  <IntlProvider locale={locale} messages={messages}>
    <App />
  </IntlProvider>,
  document.getElementById('root')
);

3. 项目的配置文件介绍

translationRunner.js

• 关键配置: 在这个文件中，你会配置 react-intl-translations-manager 的工作流程。示例配置如下所示：

  const manageTranslations = require('react-intl-translations-manager');
  
  manageTranslations([
    messagesDirectory: 'messages', // 消息源目录
    translationsDirectory: 'src/locales', // 翻译文件目标目录
    languages: ['en', 'es'], // 支持的语言列表
    singleMessagesFile: true, // 是否将翻译合并到单个文件中
  ]);
  

  这段脚本会自动处理翻译文件，检查哪些消息已经被翻译，哪些还需要翻译，并且可以基于命令行执行来保持翻译的最新。

通过以上三个部分的设置和理解，你可以有效地管理和维护一个具有多语言支持的React应用。记得每次新增或修改翻译消息后重新运行翻译管理脚本来同步变化。

react-intl-translations-managerManage all translations based on the extracted messages of the babel-plugin-react-intl项目地址:https://gitcode.com/gh_mirrors/re/react-intl-translations-manager