Cara mengotomatisasi terjemahan JSON i18next Anda menggunakan Intlayer

Apa itu Intlayer?

Intlayer adalah perpustakaan internasionalisasi sumber terbuka yang inovatif, dirancang untuk mengatasi kekurangan solusi i18n tradisional. Ini menawarkan pendekatan modern untuk manajemen konten dalam aplikasi JavaScript.

Lihat perbandingan konkret dengan i18next dalam posting blog kami next-i18next vs. next-intl vs. Intlayer.

Mengapa Menggabungkan Intlayer dengan i18next?

Meskipun Intlayer menyediakan solusi i18n mandiri yang sangat baik (lihat panduan integrasi Next.js), Anda mungkin ingin menggabungkannya dengan i18next karena beberapa alasan:

1. Basis kode yang sudah ada: Anda memiliki implementasi i18next yang sudah mapan dan ingin secara bertahap bermigrasi ke pengalaman pengembang Intlayer yang lebih baik.
2. Persyaratan warisan: Proyek Anda memerlukan kompatibilitas dengan plugin atau alur kerja i18next yang sudah ada.
3. Kenyamanan tim: Tim Anda sudah terbiasa dengan i18next tetapi menginginkan manajemen konten yang lebih baik.

Untuk itu, Intlayer dapat diimplementasikan sebagai adaptor untuk i18next guna membantu mengotomatisasi terjemahan JSON Anda dalam CLI atau pipeline CI/CD, menguji terjemahan Anda, dan lainnya.

Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten Intlayer yang unggul sambil mempertahankan kompatibilitas dengan i18next.

Daftar Isi

Panduan Langkah demi Langkah untuk Mengatur Intlayer dengan i18next

Langkah 1: Instalasi Dependensi

Pasang paket yang diperlukan:

npm install intlayer @intlayer/sync-json-plugin

Deskripsi paket:

• intlayer: Perpustakaan inti untuk manajemen internasionalisasi, deklarasi konten, dan pembangunan
• @intlayer/sync-json-plugin: Plugin untuk mengekspor deklarasi konten Intlayer ke format JSON yang kompatibel dengan i18next

Langkah 2: Implementasikan plugin Intlayer untuk membungkus JSON

Buat file konfigurasi Intlayer untuk mendefinisikan locale yang didukung:

Jika Anda juga ingin mengekspor kamus JSON untuk i18next, tambahkan plugin syncJSON:

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({      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,    }),  ],};export default config;

Plugin syncJSON akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur kontennya.

Jika Anda ingin membuat JSON tersebut hidup berdampingan dengan file deklarasi konten intlayer (.content files), Intlayer akan melanjutkan dengan cara berikut:

1. memuat baik file JSON maupun file deklarasi konten dan mengubahnya menjadi kamus intlayer.2. jika terdapat konflik antara JSON dan file deklarasi konten, Intlayer akan memproses penggabungan semua kamus tersebut. Tergantung pada prioritas plugin, dan prioritas file deklarasi konten (semua dapat dikonfigurasi).

Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru.

Konfigurasi Git

Disarankan untuk mengabaikan file Intlayer yang dihasilkan secara otomatis:

# Abaikan file yang dihasilkan oleh Intlayer.intlayer

File-file ini dapat dihasilkan ulang selama proses build Anda dan tidak perlu dikomit ke kontrol versi.

Ekstensi VS Code

Untuk pengalaman pengembang yang lebih baik, pasang Ekstensi VS Code Intlayer resmi:

Pasang dari VS Code Marketplace

Pasang dari VS Code Marketplace