Jak zautomatyzować tłumaczenia JSON react-intl za pomocą Intlayer

Spis treści

Czym jest Intlayer?

Intlayer to innowacyjna, otwartoźródłowa biblioteka do internacjonalizacji, zaprojektowana w celu rozwiązania niedoskonałości tradycyjnych rozwiązań i18n. Oferuje nowoczesne podejście do zarządzania treścią w aplikacjach React.

Zobacz konkretne porównanie z react-intl w naszym wpisie na blogu react-i18next vs. react-intl vs. Intlayer.

Dlaczego łączyć Intlayer z react-intl?

Chociaż Intlayer zapewnia doskonałe, samodzielne rozwiązanie i18n (zobacz nasz przewodnik integracji z React), możesz chcieć połączyć je z react-intl z kilku powodów:

1. Istniejąca baza kodu: Masz już wdrożoną implementację react-intl i chcesz stopniowo przejść na ulepszone doświadczenie deweloperskie Intlayer.
2. Wymagania dotyczące kompatybilności wstecznej: Twój projekt wymaga zgodności z istniejącymi wtyczkami lub procesami react-intl.
3. Znajomość zespołu: Twój zespół dobrze zna react-intl, ale chce lepszego zarządzania treścią.
4. Korzystanie z funkcji Intlayer: Chcesz korzystać z funkcji Intlayer, takich jak deklaracja treści, automatyzacja tłumaczeń, testowanie tłumaczeń i inne.

W tym celu Intlayer może być zaimplementowany jako adapter dla react-intl, aby pomóc w automatyzacji tłumaczeń JSON w CLI lub pipeline’ach CI/CD, testowaniu tłumaczeń i innych zadaniach.

Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści Intlayer, jednocześnie zachowując kompatybilność z react-intl.

Przewodnik krok po kroku: Konfiguracja Intlayer z react-intl

1. 1

   Instalacja zależności

   Zainstaluj niezbędne pakiety:

   bash

   Kopiuj zawartość

   Kopiuj kod

   Skopiuj kod do schowka

   npm install intlayer @intlayer/sync-json-plugin --save-devnpx intlayer init

   Opis pakietów:

   • intlayer: Podstawowa biblioteka do zarządzania internacjonalizacją, deklaracji treści i budowania
   • @intlayer/sync-json-plugin: Wtyczka do eksportowania deklaracji treści Intlayer do formatu JSON kompatybilnego z react-intl
2. 2

   Implementacja wtyczki Intlayer do opakowania JSON

   Utwórz plik konfiguracyjny Intlayer, aby zdefiniować obsługiwane lokalizacje:

   Jeśli chcesz również eksportować słowniki JSON dla react-intl, dodaj wtyczkę syncJSON:

   intlayer.config.ts

   Kopiuj zawartość

   Kopiuj kod

   Skopiuj kod do schowka

   import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      format: "icu",      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,    }),  ],};export default config;

   Wtyczka syncJSON automatycznie opakuje JSON. Będzie odczytywać i zapisywać pliki JSON bez zmiany architektury zawartości.

   Jeśli chcesz, aby JSON współistniał z plikami deklaracji zawartości Intlayer (.content), Intlayer postąpi w następujący sposób:

   plaintext

   Kopiuj zawartość

   Kopiuj kod

   Skopiuj kod do schowka

   1. załaduje zarówno pliki JSON, jak i pliki deklaracji zawartości, a następnie przekształci je w słownik Intlayer.2. jeśli wystąpią konflikty między plikami JSON a plikami deklaracji zawartości, Intlayer przeprowadzi scalanie wszystkich słowników. W zależności od priorytetu wtyczek oraz plików deklaracji zawartości (wszystko jest konfigurowalne).

   Jeśli zmiany zostaną dokonane za pomocą CLI do tłumaczenia JSON lub przy użyciu CMS, Intlayer zaktualizuje plik JSON o nowe tłumaczenia.

   Aby zobaczyć więcej szczegółów na temat wtyczki syncJSON, prosimy o zapoznanie się z dokumentacją wtyczki syncJSON.

Konfiguracja Git

Zaleca się ignorowanie automatycznie generowanych plików Intlayer:

# Ignoruj pliki generowane przez Intlayer.intlayer

Te pliki mogą być ponownie wygenerowane podczas procesu budowania i nie muszą być zatwierdzane do kontroli wersji.

Rozszerzenie VS Code

Dla lepszego doświadczenia deweloperskiego zainstaluj oficjalne rozszerzenie Intlayer dla VS Code:

Zainstaluj z Marketplace VS Code