在 React Apps 中构建国际化：可扩展本地化的综合指南

# Web 开发 # JavaScript # 编程 # React

介绍

在过去三个月里，我一直在独自研究一个大型 SaaS 创意。虽然这是一段令人兴奋的旅程，但挑战也非常巨大。在过去两周里，交付高优先级用例并保持质量一直是我的首要任务。

我面临的一个关键决定是是否要集成国际化 (i18n) 来支持多种语言。最初，我倾向于只推出英文版，将来利用法学硕士进行翻译。但是，作为一个单人团队，我选择暂时专注于一个利润丰厚的市场。

虽然对于我的项目来说国际化是可选的，但由于法律和监管要求，国际化在专业环境中是必不可少的。本博客探讨了如何设计可扩展且高效的 i18n 架构，避免高复杂性或结构不良等陷阱 - 这些见解对个人开发人员和团队都有好处。

由于我决定不在我的项目中实现 i18n，因此我分享本指南来帮助其他人（以及我未来的自己！）。

目标

良好的国际化系统应该：

可扩展性：支持跨团队的无缝协作，进行翻译和语言更新。

模块化：维护一个简单的结构，易于扩展且无开销。

可预测性：遵循一致、可执行的本地化模式。

适合初学者：适合不同技能水平的开发人员。

可用工具

对于 JavaScript 中的国际化，这里有一些流行的工具：

i18next：一个成熟、功能丰富的库，非常适合可扩展的专业级本地化。

替代方案：Mozilla 的 FormatJS、Polyglot.js、LinguiJS、GlobalizeJS、Fluent。

每种工具都有其优点和缺点。为简单起见，本指南重点介绍 **i18next**。

设计架构

国际化的文件夹结构

该架构以 **i18n** 文件夹为中心，包含三个关键组件：

Translations 文件夹：存储每种语言的 JSON 文件（例如，en.json、ar.json、ch.json）以及新语言的 base.json 模板。

index.js：配置并初始化 i18n 库（例如 i18next），设置后备语言和其他选项。

keys.js：定义翻译键的集中结构，确保一致性并避免重复。

文件夹结构示例：

src/
├── i18n/
│   ├── translations/
│   │   ├── en.json       # English translations
│   │   ├── ar.json       # Arabic translations
│   │   ├── ch.json       # Chinese translations
│   │   └── base.json     # Template for new languages
│   ├── index.js          # i18n configuration
│   └── keys.js           # Centralized keys for consistency

keys.js 作为中央枢纽

**keys.js** 文件反映了项目的结构，按功能或模块对密钥进行分组。此结构使密钥管理变得直观且可扩展。

示例keys.js：

const keys = {
  components: {
    featureA: {
      buttonText: "components.featureA.buttonText",
      label: "components.featureA.label",
    },
    featureB: {
      header: "components.featureB.header",
    },
  },
};

export default keys;

翻译文件

翻译 JSON 文件与“keys.js”中的结构一致，确保一致性。

示例 en.json：

{
  "components": {
    "featureA": {
      "buttonText": "Submit",
      "label": "Enter your name"
    },
    "featureB": {
      "header": "Welcome to Feature B"
    }
  }
}

示例 ar.json：

{
  "components": {
    "featureA": {
      "buttonText": "إرسال",
      "label": "أدخل اسمك"
    },
    "featureB": {
      "header": "مرحبًا بكم في الميزة ب"
    }
  }
}

设置 i18next

安装 i18next 及其 React 集成：

npm install i18next react-i18next

i18n/index.js：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./translations/en.json";
import ar from "./translations/ar.json";

i18n.use(initReactI18next).init({
  resources: { en: { translation: en }, ar: { translation: ar } },
  lng: "en", // Default language
  fallbackLng: "en",
  interpolation: { escapeValue: false }, // React handles escaping
});

export default i18n;

将 i18n 集成到组件中

示例组件（FeatureA）：

import React from "react";
import { useTranslation } from "react-i18next";
import keys from "../../i18n/keys";

const FeatureA = () => {
  const { t } = useTranslation();

  return (
    
      Feature A
      
      {t(keys.components.featureA.label)}
    
  );
};

export default FeatureA;

添加语言切换器

语言切换器允许用户在语言之间切换。

LanguageSwitcher.jsx：

import React from "react";
import { useTranslation } from "react-i18next";

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    
      
      
    
  );
};

export default LanguageSwitcher;

最终文件夹结构

src/
├── components/
│   ├── featureA/
│   │   ├── index.jsx
│   │   └── featureAStyles.css
│   └── shared/
│       └── LanguageSwitcher.jsx
├── i18n/
│   ├── translations/
│   │   ├── en.json
│   │   ├── ar.json
│   │   └── base.json
│   ├── keys.js
│   └── index.js
├── App.jsx
├── index.js

超越

利用 AI 进行翻译：使用 LLM 进行快速翻译。例如，提示：“将以下 JSON 翻译成中文：{en.json 的内容}。”

后端驱动的翻译：将翻译集中在后端，无需部署代码即可实现动态更新。选项包括 GitOps 或专用后端服务。

演示

沙盒：https://codesandbox.io/p/sandbox/785hpz

结论

国际化是实现应用程序的全球扩展的关键步骤。按照本指南操作，您将拥有一个可扩展、模块化且适合初学者的架构，支持单个项目或大型团队的无缝本地化。

祝你编码愉快！

— **Ahmed R. Aldhafeeri**

CLIS.CC