React-intl JSON çevirilerinizi Intlayer kullanarak nasıl otomatikleştirirsiniz

İçindekiler

Intlayer Nedir?

Intlayer, geleneksel i18n çözümlerinin eksikliklerini gidermek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma kütüphanesidir. React uygulamalarında içerik yönetimine modern bir yaklaşım sunar.

react-intl ile somut bir karşılaştırma için react-i18next vs. react-intl vs. Intlayer blog yazımıza bakabilirsiniz.

Neden Intlayer'ı react-intl ile Birleştirmelisiniz?

Intlayer mükemmel bir bağımsız i18n çözümü sunarken (bkz. React entegrasyon rehberimiz), react-intl ile birleştirmek isteyebileceğiniz birkaç neden olabilir:

1. Mevcut kod tabanı: Yerleşik bir react-intl uygulamanız var ve Intlayer'ın geliştirilmiş geliştirici deneyimine kademeli olarak geçmek istiyorsunuz.
2. Eski gereksinimler: Projeniz mevcut react-intl eklentileri veya iş akışları ile uyumluluk gerektiriyor.
3. Ekip aşinalığı: Ekibiniz react-intl ile rahat ancak daha iyi içerik yönetimi istiyor.
4. Intlayer özelliklerini kullanma: İçerik beyanı, çeviri otomasyonu, çevirilerin test edilmesi ve daha fazlası gibi Intlayer özelliklerini kullanmak istiyorsunuz.

Bunun için, Intlayer react-intl için bir adaptör olarak uygulanabilir; böylece JSON çevirilerinizi CLI veya CI/CD boru hatlarında otomatikleştirebilir, çevirilerinizi test edebilir ve daha fazlasını yapabilirsiniz.

Bu rehber, react-intl ile uyumluluğu korurken Intlayer'ın üstün içerik beyan sistemi nasıl kullanılacağını gösterir.

Intlayer'ı react-intl ile Kurmak için Adım Adım Rehber

Adım 1: Bağımlılıkları Yükleyin

Gerekli paketleri yükleyin:

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

Paket açıklamaları:

• intlayer: Uluslararasılaştırma yönetimi, içerik beyanı ve derleme için temel kütüphane
• @intlayer/sync-json-plugin: Intlayer içerik beyanlarını react-intl uyumlu JSON formatına aktarmak için eklenti

Adım 2: JSON'u sarmak için Intlayer eklentisini uygulayın

Desteklenen yerel ayarları tanımlamak için bir Intlayer yapılandırma dosyası oluşturun:

Eğer react-intl için JSON sözlüklerini de dışa aktarmak istiyorsanız, syncJSON eklentisini ekleyin:

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;

syncJSON eklentisi JSON'u otomatik olarak saracaktır. İçerik mimarisini değiştirmeden JSON dosyalarını okuyup yazacaktır.

Eğer bu JSON'un intlayer içerik beyan dosyaları (.content dosyaları) ile birlikte var olmasını istiyorsanız, Intlayer şu şekilde ilerleyecektir:

1. Hem JSON hem de içerik beyan dosyalarını yükler ve bunları bir intlayer sözlüğüne dönüştürür.2. JSON ile içerik beyan dosyaları arasında çakışma varsa, Intlayer tüm sözlükleri birleştirme işlemi yapar. Bu işlem, eklentilerin önceliğine ve içerik beyan dosyasının önceliğine bağlıdır (hepsi yapılandırılabilir).

CLI kullanılarak JSON'un çevirisi yapılırsa veya CMS kullanılırsa, Intlayer JSON dosyasını yeni çevirilerle güncelleyecektir.

syncJSON eklentisi hakkında daha fazla ayrıntı için lütfen syncJSON eklenti dokümantasyonuna bakınız.

(İsteğe Bağlı) Adım 3: Bileşen başına JSON çevirilerini uygulama

Varsayılan olarak, Intlayer hem JSON hem de içerik beyan dosyalarını yükler, birleştirir ve senkronize eder. Daha fazla bilgi için içerik beyan dokümantasyonuna bakabilirsiniz. Ancak isterseniz, Intlayer eklentisi kullanarak kod tabanınızda herhangi bir yerde yerelleştirilmiş JSON'un bileşen bazında yönetimini de uygulayabilirsiniz.

Bunun için loadJSON eklentisini kullanabilirsiniz.

import { Locales, type IntlayerConfig } from "intlayer";import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  // Mevcut JSON dosyalarınızı Intlayer sözlükleri ile senkronize tutun  plugins: [    /**     * src içindeki {key}.i18n.json desenine uyan tüm JSON dosyalarını yükler     */    loadJSON({      source: ({ key }) => `./src/**/${key}.i18n.json`,      locale: Locales.ENGLISH,      priority: 1, // Bu JSON dosyalarının `./locales/en/${key}.json` dosyalarından öncelikli olmasını sağlar    }),    /**     * locales dizinindeki JSON dosyalarını yükler ve çıktı ile çevirileri geri yazar     */    syncJSON({      format: "icu",      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,      priority: 0,    }),  ],};export default config;

Bu, src dizininde {key}.i18n.json desenine uyan tüm JSON dosyalarını yükler ve bunları Intlayer sözlükleri olarak kullanır.

Git Yapılandırması

Otomatik oluşturulan Intlayer dosyalarını göz ardı etmek önerilir:

# Intlayer tarafından oluşturulan dosyaları göz ardı et.intlayer

Bu dosyalar derleme süreciniz sırasında yeniden oluşturulabilir ve sürüm kontrolüne dahil edilmesi gerekmez.

VS Code Eklentisi

Geliştirici deneyimini iyileştirmek için resmi Intlayer VS Code Eklentisini yükleyin:

VS Code Marketplace'ten yükleyin