Senibina Pengantarabangsaan Dalam Aplikasi React: Panduan Komprehensif untuk Penyetempatan Boleh Skala

pengenalan

Sejak tiga bulan lalu, saya telah bekerja secara solo pada idea Mega SaaS. Walaupun ia merupakan satu perjalanan yang menarik, cabarannya amat besar. Semasa saya menghampiri dua minggu lepas, menyampaikan kes penggunaan keutamaan tinggi sambil mengekalkan kualiti menjadi keutamaan saya.

Salah satu keputusan utama yang saya hadapi ialah sama ada untuk menyepadukan pengantarabangsaan (i18n) untuk menyokong berbilang bahasa. Pada mulanya, saya cenderung untuk melancarkan dengan versi bahasa Inggeris sahaja, memanfaatkan LLM untuk terjemahan pada masa hadapan. Namun, sebagai pasukan seorang, saya memilih untuk menumpukan pada satu pasaran yang menguntungkan buat masa ini.

Walaupun pilihan untuk projek saya, pengantarabangsaan adalah penting dalam tetapan profesional kerana keperluan undang-undang dan peraturan. Blog ini meneroka cara mereka bentuk seni bina i18n yang berskala dan cekap, mengelakkan perangkap seperti kerumitan tinggi atau struktur yang lemah—cerapan yang boleh memberi manfaat kepada pembangun solo dan pasukan.

Memandangkan saya memutuskan untuk tidak melaksanakan i18n dalam projek saya, saya berkongsi panduan ini untuk membantu orang lain (dan diri masa depan saya!).

Matlamat

Sistem pengantarabangsaan yang baik harus:

• Skalabiliti: Sokong kerjasama yang lancar merentas pasukan untuk terjemahan dan kemas kini bahasa.
• Modulariti: Kekalkan struktur ringkas yang mudah dipanjangkan tanpa overhead.
• Kebolehramalan: Ikuti corak yang konsisten dan boleh dikuatkuasakan untuk penyetempatan.
• Mesra Permulaan: Boleh diakses oleh pembangun dari pelbagai tahap kemahiran.

Alat yang Tersedia

Untuk pengantarabangsaan dalam JavaScript, berikut ialah beberapa alatan popular:

• i18next: Perpustakaan matang yang kaya dengan ciri yang sesuai untuk penyetempatan gred profesional yang boleh diskala.
• Alternatif: FormatJS, Polyglot.js, LinguiJS, GlobalizeJS, Fluent by Mozilla.

Setiap alat mempunyai kebaikan dan keburukan. Untuk memudahkan, panduan ini memfokuskan pada i18next.

Merekabentuk Seni Bina

Struktur Folder untuk Pengantarabangsaan

Seni bina berpusat di sekitar folder i18n yang mengandungi tiga komponen utama:

1. Folder Terjemahan: Menyimpan fail JSON untuk setiap bahasa (cth., en.json, ar.json, ch.json) dan templat base.json untuk bahasa baharu.

2. index.js: Mengkonfigurasikan dan memulakan pustaka i18n (cth., i18next), menetapkan bahasa sandaran dan pilihan lain.

3. keys.js: Struktur terpusat yang menentukan kunci terjemahan, memastikan konsistensi dan mengelakkan pertindihan.

Contoh Struktur Folder:

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 sebagai Hab Pusat

Fail keys.js mencerminkan struktur projek, mengumpulkan kunci mengikut ciri atau modul. Struktur ini menjadikan pengurusan kunci intuitif dan berskala.

Contoh keys.js:

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

export default keys;

Fail Terjemahan

Fail JSON terjemahan sejajar dengan struktur dalam keys.js, memastikan ketekalan.

Contoh en.json:

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

Contoh ar.json:

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

Menyediakan i18next

Pasang i18next dan integrasi Reactnya:

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;

Mengintegrasikan i18n ke dalam Komponen

Komponen Contoh (Ciri A):

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

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

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

export default FeatureA;

Menambah Penukar Bahasa

Penukar bahasa membolehkan pengguna menogol antara bahasa.

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;

Struktur Folder Akhir

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

Melangkaui

1. Leverage AI untuk Terjemahan: Gunakan LLM untuk terjemahan pantas. Contohnya, gesaan:
   
   "Terjemahkan JSON berikut kepada bahasa Cina: {contents of en.json}."

2. Terjemahan Didorong Belakang: Pusatkan terjemahan pada bahagian belakang untuk mendayakan kemas kini dinamik tanpa penggunaan kod. Pilihan termasuk GitOps atau perkhidmatan hujung belakang khusus.

Demo

Kotak pasir: https://codesandbox.io/p/sandbox/785hpz

Kesimpulan

Pengantarabangsaan ialah langkah kritikal untuk menskalakan aplikasi secara global. Dengan mengikuti panduan ini, anda akan mempunyai seni bina berskala, modular dan mesra pemula yang menyokong penyetempatan yang lancar untuk projek solo atau pasukan besar.

Selamat pengekodan!

— Ahmed R. Aldhafeeri

Atas ialah kandungan terperinci Senibina Pengantarabangsaan Dalam Aplikasi React: Panduan Komprehensif untuk Penyetempatan Boleh Skala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!