הגדרת מסגרת ה-i18n של react-intl לאפליקציות React

אתה משיק אפליקציית React לשווקי חבר העמים ואירופה. מיד אתה נתקל בצורך ללוקליזציה של הממשק: נטיות, תאריכים, מטבעות. ללא מסגרת i18n מתאימה, הקוד הופך לגן חיות של פתרונות מאולתרים—כל מפתח כותב כלים משלו, מתרגמים מתבלבלים מהפורמטים, ובודקים מוצאים באגים חדשים.

אנו משתמשים ב-ICU Message Format—תקן בינלאומי התומך בעיצוב תאריכים, מספרים, מטבעות ורבים ללא ספריות צד שלישי. הבחירה שלנו היא react-intl, יישום ICU קפדני עבור React. בפרויקט אחרון, הקטנו את נפח קוד הלוקליזציה פי 3 בהשוואה לפתרונות המותאמים אישית של הלקוח.

בקש הערכה של הפרויקט שלך—נחזור אליך תוך יום. למהנדסים שלנו יש ניסיון של 5+ שנים ויותר מ-20 פרויקטי לוקליזציה שהושלמו. אנו עוזרים להימנע ממלכודות נפוצות ולבנות תהליך לוקליזציה שמתאים לעשרות שפות. אנו מתמחים בהגדרת i18n לאפליקציות בכל רמת מורכבות—מסטארטאפים ועד מוצרים ארגוניים עם מיליוני משתמשים.

בעיות שאנו פותרים

רבים וצורות דקדוקיות

רוסית דורשת ארבע צורות: אחד, כמה, רבים, אחר. React Intl תומך בכל אלה באמצעות ICU סטנדרטי ללא ספריות נוספות. דוגמה: '{count, plural, one {# товар} few {# товара} many {# товаров} other {# товаров}}'. עם i18next תצטרך תוספים או פונקציות מותאמות. ההבדל—עד פי 3 פחות קוד. חיסכון של כ-30% בזמן תחזוקת שפה.

עיצוב תאריכים, מספרים ומטבעות

תאריכים ומספרים מעוצבים אוטומטית לפי locale. רכיב FormattedDate ללא props מציג את התאריך בפורמט locale. עבור מטבעות, פשוט ציין style וקוד מטבע. אין צורך ב-moment.js או בכלים מגושמים.

תקן אחיד למתרגמים

ICU Message Format הוא תקן בינלאומי המובן למתרגמים מקצועיים. ניתן להעביר מחרוזות ל-Crowdin או Phrase ללא התאמה. זה מפחית שגיאות תרגום.

איך אנחנו עושים את זה

ההתקנה מתבצעת בכמה שלבים: 1) התקנת החבילה; 2) יצירת קבצי JSON של הודעות לכל שפה; 3) אתחול IntlProvider; 4) שימוש ברכיבים בקוד. המחסנית שלנו: React 18+, react-intl, TypeScript. מבנה ההודעות—קבצי JSON לכל שפה. אתחול דרך IntlProvider עם הודעות המועברות למטה. כל הרכיבים ניגשים ל-locale דרך context.

// Установка npm install react-intl
// Инициализация IntlProvider
import { IntlProvider } from 'react-intl'
import { ru } from '@/i18n/messages/ru'
import { en } from '@/i18n/messages/en'

const messages = { ru, en }

function App({ locale = 'ru' }: { locale: string }) {
  return (
    <IntlProvider
      locale={locale}
      messages={messages[locale]}
      defaultLocale="ru"
      onError={(err) => {
        if (err.code !== 'MISSING_TRANSLATION') throw err
      }}
    >
      <Router />
    </IntlProvider>
  )
}

שימוש ברכיבים

import { FormattedMessage, FormattedNumber, FormattedDate, useIntl } from 'react-intl'

// Плюрализация
function CartIcon({ count }: { count: number }) {
  return <FormattedMessage id="nav.cart" values={{ count }} />
}
// count=1: "Корзина (1 товар)", count=5: "Корзина (5 товаров)"

// Валюта
function Price({ value }: { value: number }) {
  return <FormattedNumber value={value} style="currency" currency="USD" maximumFractionDigits={0} />
}
// ru: "$130–190"

// Дата
function ProductDate({ date }: { date: Date }) {
  return <FormattedDate value={date} year="numeric" month="long" day="numeric" />
}
// ru: "28 марта"

defineMessages לטיפוס

import { defineMessages, useIntl } from 'react-intl'

const messages = defineMessages({
  title: {
    id: 'catalog.title',
    defaultMessage: 'Каталог товаров',
  },
})

function CatalogPage() {
  const intl = useIntl()
  return <h1>{intl.formatMessage(messages.title)}</h1>
}

טעינה אסינכרונית של תרגומים

async function loadMessages(locale: string) {
  switch (locale) {
    case 'ru':
      return (await import('@/i18n/messages/ru')).ru
    case 'en':
      return (await import('@/i18n/messages/en')).en
    default:
      return (await import('@/i18n/messages/ru')).ru
  }
}

// В компоненте
function LocalizedApp({ locale }: { locale: string }) {
  const [messages, setMessages] = useState(null)
  useEffect(() => {
    loadMessages(locale).then(setMessages)
  }, [locale])
  if (!messages) return <PageLoader />
  return <IntlProvider locale={locale} messages={messages}><App /></IntlProvider>
}

למה react-intl על פני i18next לפרויקטים מורכבים?

לפרויקטים עם עשרות שפות וכללי עיצוב מורכבים, react-intl מציע יתרונות במהירות הפיתוח ובתחזוקה. הודעות ICU ברורות למתרגמים, ומפחיתות שגיאות בכ-30%. בנוסף, עיצוב תאריכים/מספרים מובנה מבטל תלות נוספות, ומקטין את גודל ה-bundle.

מה לבחור: react-intl או i18next?

react-intl מייצר כ-30% פחות קוד עבור רבים, וטעינת הודעות מהירה פי 1.5 בזכות עיצוב מובנה.

איך react-intl מפשט לוקליזציה של צורות מורכבות?

שימוש בתחביר ICU יחיד מאפשר לתאר את כל הנטיות והבחירות במחרוזת אחת. זה מפחית קוד ושגיאות. לדוגמה, סטטוסי הזמנות: // Установка npm install react-intl // Инициализация IntlProvider import { IntlProvider } from 'react-intl' import { ru } from '@/i18n/messages/ru' import { en } from '@/i18n/messages/en' const messages = { ru, en } function App({ locale = 'ru' }: { locale: string }) { return ( <IntlProvider locale={locale} messages={messages[locale]} defaultLocale="ru" onError={(err) => { if (err.code !== 'MISSING_TRANSLATION') throw err }} > <Router /> </IntlProvider> ) } . ללא react-intl תצטרך switch לכל רכיב.

שלבי יישום

מה כלול

• הגדרת IntlProvider ומבנה הודעות
• מערכת רכיבים בסיסית (תאריכים, מספרים, מטבע, רבים)
• חילוץ מחרוזות CLI ויצירת JSON למתרגמים
• טעינת תרגומים אסינכרונית לפרויקטים גדולים
• תיעוד להוספת שפות ומפתחות חדשים
• שרת בדיקה עם דוגמת אינטגרציה
• הדרכת צוות (מפגש של שעה)
• חודש תמיכה לאחר המסירה

לוחות זמנים ועלות

אינטגרציה בסיסית (IntlProvider, 2 שפות, 50 מפתחות)—מ-1 עד 2 ימים. מחזור מלא עם חילוץ CLI ו-CI—מ-3 עד 5 ימים. העלות מחושבת בנפרד לאחר ניתוח הפרויקט. חיסכון ממוצע בזמן צוות יכול להגיע עד 40% בזכות אוטומציה. צור קשר לייעוץ—אנו מבטיחים איכות ועמידה בלוחות זמנים. הניסיון של הצוות שלנו: 5+ שנים ויותר מ-20 פרויקטי לוקליזציה.

סיכום

React Intl הוא פתרון אמין לבינאום אפליקציות React. אנו נעזור לך ליישם אותו בהתאמה לדרישות העסקיות שלך. בקש הערכת פרויקט—נחזור אליך תוך יום.