在 React 应用程序中构建国际化：可扩展本地化综合指南

介绍

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

我面临的关键决定之一是是否集成国际化（i18n）以支持多种语言。最初，我倾向于推出纯英文版本，以便将来利用法学硕士进行翻译。然而，作为一个单人团队，我现在选择专注于一个利润丰厚的市场。

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

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

---

目标

一个好的国际化系统应该：

• 可扩展性： 支持跨团队无缝协作以进行翻译和语言更新。
• 模块化： 保持简单的结构，无需开销即可轻松扩展。
• 可预测性：遵循一致、可执行的本地化模式。
• 初学者友好：可供不同技能水平的开发人员使用。

---

可用工具

对于 JavaScript 的国际化，以下是一些流行的工具：

• i18next： 一个成熟、功能丰富的库，非常适合可扩展的专业级本地化。
• 替代方案： FormatJS、Polyglot.js、LinguiJS、GlobalizeJS、Mozilla 的 Fluent。

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

---

设计架构

国际化文件夹结构

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

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

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

3. 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 集成到组件中

示例组件（功能 A）：

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

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

  return (
    <div>
      <h2 id="Feature-A">Feature A</h2>
      <button>{t(keys.components.featureA.buttonText)}</button>
      <label>{t(keys.components.featureA.label)}</label>
    </div>
  );
};

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 (
    <div>
      <button onclick="{()"> changeLanguage("en")}>English</button>
      <button onclick="{()"> changeLanguage("ar")}>العربية</button>
    </div>
  );
};

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

---

超越

1. 利用人工智能进行翻译：使用法学硕士进行快速翻译。例如提示：
   
   “将以下 JSON 翻译为中文：{en.json 的内容}。”

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

---

演示

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

---

结论

国际化是在全球范围内扩展应用程序的关键一步。通过遵循本指南，您将拥有一个可扩展、模块化且适合初学者的架构，支持单独项目或大型团队的无缝本地化。

编码愉快！

— Ahmed R. Aldhafeeri

以上是在 React 应用程序中构建国际化：可扩展本地化综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！