בינאום (i18n) ב-Vue.js באמצעות vue-i18n ו-Intlayer

תוכן עניינים

מה זה Intlayer?

Intlayer היא ספריית בינאום חדשנית בקוד פתוח שתוכננה לפתור את המגבלות של פתרונות i18n מסורתיים. היא מציעה גישה מודרנית לניהול תוכן ביישומי Vue.js ו-Nuxt.

ראו השוואה מעשית מול vue-i18n בפוסט שלנו vue-i18n לעומת Intlayer.

מדוע לשלב את Intlayer עם vue-i18n?

בעוד ש-Intlayer מספקת פתרון i18n עצמאי מצוין (ראו את מדריך האינטגרציה ל-Vue.js שלנו), ייתכן שתרצו לשלב אותה עם vue-i18n מכמה סיבות:

Intlayer מציעה מגוון עשיר של תכונות מתקדמות החורגות מעבר לכלי i18n מסורתיים. היא מאפשרת לכם:

• לזהות ולמלא תרגומים חסרים באופן אוטומטי כדי לייעל את תהליך הלוקליזציה.
• לבדוק ולאמת את התרגומים שלכם ישירות בתהליכי הפיתוח או ה-CI/CD שלכם.
• לנהל תוכן ברמת הקומפוננטה, מה שמאפשר מבנה נקי, סקיילבילי וקל לתחזוקה ברחבי האפליקציה.
• להחצין את התוכן שלכם (Externalize), ובכך להפוך אותו לעריך בקלות עבור כל הצוות (מפתחים, מתרגמים ומנהלי תוכן).

עם זאת, vue-i18n נותרה פתרון i18n מצוין ונפוץ במיוחד בזכות האקוסיסטם הבוגר שלה, התמיכה הרחבה מהקהילה ותאימות התוספים הענפה שלה.

באמצעות שילוב Intlayer עם vue-i18n, אתם מקבלים את הטוב משני העולמות: היציבות ובשלות האקוסיסטם של vue-i18n, יחד עם ניהול התוכן המודרני, האוטומציה ושיפורי חוויית המפתח של Intlayer.

מדריך זה מסביר כיצד לרתום את Intlayer כמתאם (adapter) עבור vue-i18n, ומאפשר לכם:

• להגר בהדרגה מ-vue-i18n ל-Intlayer.
• לשמור על התוספים ותהליכי העבודה הקיימים שלכם ב-vue-i18n.
• לבצע אוטומציה של תרגומי JSON ב-CLI או בצינורות CI/CD.
• לבדוק, לסנכרן ולנהל תרגומים בצורה יעילה יותר.

כדי להבין מהיכן הגיעו ספריות אלו, קראו על ההיסטוריה של i18n ב-JavaScript.

מדריך שלב אחר שלב להגדרת Intlayer עם vue-i18n

1. 1

   התקנת תלויות

   התקינו את החבילות הנדרשות באמצעות מנהל החבילות המועדף עליכם:

   bash

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   npx intlayer init --interactive
   

   הדגל --interactive הוא אופציונלי. השתמשו ב-intlayer-cli init אם אתם סוכן AI.

   פקודה זו תזהה את הסביבה שלכם ותתקין את החבילות הנדרשות. לדוגמה:

   bash

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   npm install intlayer @intlayer/sync-json-plugin --save-dev
   

   הסבר על החבילות:

   • intlayer: ספריית הליבה להצהרת תוכן וניהולו
   • @intlayer/sync-json-plugin: תוסף לסנכרון הצהרות תוכן של Intlayer לפורמט JSON של vue-i18n
2. 2

   הטמעת תוסף Intlayer לעטיפת ה-JSON

   צרו קובץ תצורה של Intlayer כדי להגדיר את השפות הנתמכות שלכם:

   אם ברצונכם לייצא גם מילוני JSON עבור vue-i18n, הוסיפו את התוסף syncJSON:

   intlayer.config.ts

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

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

   התוסף syncJSON יעטוף אוטומטית את ה-JSON. הוא יקרא ויכתוב את קובצי ה-JSON מבלי לשנות את ארכיטקטורת התוכן.

   אם ברצונכם שקובצי ה-JSON יתקיימו לצד קובצי הצהרת התוכן של Intlayer (קובצי .content), Intlayer תפעל באופן הבא:

   1. טעינת קובצי ה-JSON וקובצי הצהרת התוכן והמרתם למילון של Intlayer.
   2. אם קיימות התנגשויות בין ה-JSON לבין קובצי הצהרת התוכן, Intlayer תבצע מיזוג (merge) של כל המילונים, בהתאם לעדיפות התוספים ועדיפות קובץ הצהרת התוכן (הכול ניתן להגדרה).

   אם מבוצעים שינויים באמצעות ה-CLI לתרגום ה-JSON, או באמצעות ה-CMS, Intlayer תעדכן את קובץ ה-JSON עם התרגומים החדשים.

   לפרטים נוספים אודות התוסף syncJSON, עיינו בתיעוד התוסף syncJSON.

   תיעוד התוסף syncJSON
3. 3

   הגדרת ספק AI

   Intlayer פותחת שורה של תכונות אוטומציה מתקדמות וידידותיות למפתח עבור תהליך העבודה שלכם:

   • זיהוי ומילוי אוטומטי של תרגומים חסרים: Intlayer סורקת את מילוני ה-JSON שלכם, מאתרת מפתחות חסרים או לא מתורגמים, ומתרגמת רק אותם, כך ש-99% מקובץ ה-JSON נשאר ללא שינוי.
   • תרגום במקטעים (Chunks) עבור קובצי JSON גדולים: כאשר קובצי התרגום גדולים מאוד, Intlayer מפצלת אוטומטית את העיבוד למקטעים הניתנים לניהול, ומתרגמת אותם באופן עצמאי כדי למנוע מגבלות API ובעיות זיכרון.
   • מקביליות של מרחבי שמות (Namespaces): אם יש לכם מאות מרחבי שמות (או קבצים), Intlayer מבצעת את משימות התרגום במקביל, ומאיצה ביעילות את תהליכי ה-CI/CD או פעולות תרגום מרוכזות.
   • תמיכה גמישה בספקי AI: בחרו את ספק ה-AI המועדף עליכם (למשל OpenAI, Claude, Gemini) פשוט על ידי הגדרת פרטי אימות. השתמשו במפתח API משלכם והחליפו ספקים לפי הצורך.
   • טיפול גמיש בתשובות AI: Intlayer יודעת להתמודד עם מקרי קצה שבהם ספק ה-AI מחזיר טקסט כמחרוזת או כאובייקט, ואף מנסה שוב אוטומטית כאשר הפורמט אינו עקבי.
   • מוכן ל-CLI ול-CI/CD: הריצו את הבדיקות והמילוי האוטומטי של Intlayer ישירות בבדיקות או בצינורות הפריסה שלכם, מה שהופך את תהליך הלוקליזציה לחזק ואוטומטי.
   • משתלב על גבי ההגדרה הקיימת שלכם: אינכם צריכים לשנות את תשתית ה-vue-i18n או ה-Vue/Nuxt שלכם. Intlayer פועלת כתוסף מוסף להגדרה הנוכחית שלכם, ומעניקה לכם את כל היתרונות הללו עם מינימום מאמץ הגירה.

   להלן דוגמה להגדרת ספק ה-AI:

   intlayer.config.ts

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   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,
     },
     ai: {
       provider: "openai",
       model: "gpt-5.6-terra",
       apiKey: process.env.OPENAI_API_KEY,
     },
     plugins: [
       syncJSON({
         format: "vue-i18n",
         source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
       }),
     ],
   };
   
   export default config;
   

   לאחר מכן תוכלו להריץ את הפקודה הבאה כדי למלא את התרגומים שלכם:

   bash

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   npx intlayer fill
   

   פקודה זו תמלא את התרגומים שלכם באמצעות ספק ה-AI שהגדרתם.

   ראו את כל ספקי ה-AI הזמינים בתיעוד הגדרת AI של Intlayer. ראו את כל הפקודות הזמינות בתיעוד ה-CLI של Intlayer.

   תיעוד הגדרת AI של Intlayer

   תיעוד ה-CLI של Intlayer

הגדרות Git

החריגו קבצים שנוצרו אוטומטית מניהול הגרסאות:

# התעלמות מקבצים שנוצרו על ידי Intlayer
.intlayer

קבצים אלו נוצרים מחדש אוטומטית במהלך תהליך ה-build ואין צורך לבצע להם commit למאגר שלכם.

הרחבה ל-VS Code

לחוויית פיתוח משופרת, התקינו את הרחבת VS Code הרשמית של Intlayer: