React 国际化

项目所需插件

• react-i18next：react i18n 的核心库
• i18next：i18n 的核心库

npm install react-i18next i18next --save

配置

目录结构

├── src
│   ├── i18n
│   │   ├── en.json
│   │   ├── zh.json
│   │   └── index.ts
│   ├── App.tsx
│   └── main.tsx

1. 配置 i18n/index.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// 导入语言模块
import zh from "./locales/zh.json";
import en from "./locales/en.json";
const resources = {
  en: { translation: en },
  zh: { translation: zh },
};

i18n.use(initReactI18next).init({
  resources,
  lng: "zh",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;
// ps 需要再app.tsx 中引入当前模块

2. 关于翻译文件的配置

• 支持 json、yaml、ts、js 等格式
• 支持嵌套对象
• 关于各种不同的好处如下

IDE 插件 i18n-Ally

• 作用：在代码中自动生成翻译文件
• 安装：在 插件 中搜索 i18n-Ally 安装即可

i18n-Ally 设置

// .vscode/settings.json 安装后会自动在当前文件生成此文件
{
  // 指定语言文件路径
  "i18n-ally.localesPaths": ["src/i18n/locales"],
  // 指定语言文件格式 当前是嵌套对象
  "i18n-ally.keystyle": "nested",
  // 支持的文件格式
  "i18n-ally.enabledParsers": ["json", "yaml", "ts"],
  // 指定源语言
  "i18n-ally.sourceLanguage": "en",
  // 指定显示语言
  "i18n-ally.displayLanguage": "zh",
  // 指定框架
  "i18n-ally.enabledFrameworks": ["react", "vue"]
}

文件格式对比

格式	可读	可编辑	支持注释	说明
JSON	✓	✓	✓	最常用的格式，结构清晰，易于编辑
YAML	✓	✓	✓	评论不会被保留
JSON5	✓	✓	✗	评论不会被保留
INI	✓	✓	✗	评论不会被保留
JavaScript	✓	✗	✗	只读
TypeScript	✓	✗	✗	只读

选择建议

• 推荐使用JSON格式作为主要的翻译文件格式, 因为它是最常见的格式, 易于编辑和查看。
• 如果翻译内容过多，会导致后期不太好维护，可以考虑ts格式，拆分各个模块的翻译文件。
• 因为ts格式不支持编辑，所以操作比较麻烦，需要手动修改。
• 根据项目实际情况选择 ts 还是 json 格式。