الترحيل من vue-i18n إلى Intlayer

لماذا الترحيل من vue-i18n إلى Intlayer؟

استراتيجيات الترحيل

هناك استراتيجيتان متكاملتان للترحيل من vue-i18n إلى Intlayer:

1. محول التوافق (موصى به للتطبيقات الموجودة) — قم بتثبيت @intlayer/vue-i18n (لمكونات Vue). تكشف هذه الحزمة عن نفس API تماماً من vue-i18n ولكن تفوض كل عمل الترجمة إلى Intlayer تحت الغطاء. تحافظ على استدعاءات $t و useI18n() و <i18n-t> الموجودة — التغيير الوحيد هو مسار الاستيراد والتهيئة.

2. الترحيل الكامل — استبدل تدريجياً APIs من vue-i18n بـ hooks Intlayer الأصلية (useIntlayer) ودمج المحتوى في ملفات .content.ts بجانب المكونات الخاصة بك.

يغطي هذا الدليل الاستراتيجية 1 أولاً (محول التوافق drop-in)، ثم يرشدك عبر الترحيل الكامل الاختياري.

جدول المحتويات

الترحيل السريع

الخطوات التالية هي الحد الأدنى المطلوب لتشغيل تطبيق vue-i18n الموجود على Intlayer بدون تغيير الكود في المكونات.

1. 1

   تثبيت التبعيات

   قم بتثبيت حزم Intlayer الأساسية ومحول التوافق:

   bash

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   npx intlayer-cli init --interactive

   العلم --interactive اختياري. استخدم intlayer-cli init إذا كنت وكيل ذكي.

   سيكتشف هذا الأمر بيئتك وسيثبت الحزم المطلوبة. على سبيل المثال:

   bash

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   npm install intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin

   يمكنك الاحتفاظ بـ vue-i18n مثبتة — يستخدم محول التوافق كـ devDependency / peerDependency لأنواع TypeScript.

2. 2

   تكوين Intlayer

   ينشئ أمر intlayer init ملف intlayer.config.ts بدء. حدثّه ليطابق البيئات المحلية الموجودة لديك وأشر إلى مكوّن 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({
         // يطابق صيغة ملاصقات vue-i18n: {name}
         format: "icu",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
   };
   
   export default config;

   source يعيّن بيئة محلية إلى مسار ملف JSON الخاص بها. location يخبر مراقب Intlayer أي مجلد للبحث عن التغييرات. يضمن الخيار format: 'icu' أن الملاصقات يتم تحليلها بشكل صحيح لـ vue-i18n.

3. 3

   إضافة مكوّن Intlayer إلى Bundler الخاص بك

   غلّف تكوين bundler الموجود مع مكوّن التوافق. يُنشئ هذا مكوّن Intlayer الأساسي، ويوصل مراقبة المحتوى، و— بشكل حاسم — يحقن اسم مستعار module حتى استدعاءات import … from 'vue-i18n' الموجودة لديك تُعاد توجيهها بشفافية إلى @intlayer/vue-i18n في وقت البناء. لا يلزم تغيير ملفات المصدر.

   لـ Vite:

   vite.config.ts

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import { vueI18nVitePlugin } from "@intlayer/vue-i18n/plugin";
   
   export default defineConfig({
     plugins: [vue(), vueI18nVitePlugin()],
   });

   vueI18nVitePlugin() يغلف مكوّن intlayer() من vite-intlayer ويضيف اسم مستعار vue-i18n. يجمّع المكوّن العادي intlayer() من vite-intlayer القواامس ولكن لا يضيف الاسم المستعار — يمكنك حينها إعادة تسمية الاستيرادات إلى @intlayer/vue-i18n يدويياً (انظر الخطوة 4).

   لـ Nuxt:

   إذا كنت تستخدم @nuxtjs/i18n (تكامل Nuxt)، قم بتثبيت nuxt-intlayer وأضفها إلى nuxt.config.ts الخاص بك:

   bash

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   npm install nuxt-intlayer

   nuxt.config.ts

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   export default defineNuxtConfig({
     modules: ["nuxt-intlayer"],
     // يمكنك إزالة @nuxtjs/i18n من مكوّنات الخاصة بك بأمان
   });

   لا تحتاج بعد الآن إلى createI18n() أو bootstrap provider يدويياً. يجمّع Intlayer جميع القواامس في وقت البناء، حيث لا توجد خطوة تحميل runtime. يتولى provider المُحتفَظ به التهيئة لك.

هذا كل شيء للترحيل السريع. يعمل التطبيق الخاص بك الآن على Intlayer مع الاحتفاظ بكل استيراد ومكون API من vue-i18n.

مفاتيح ترجمة مكتوبة — تلقائي. بمجرد أن يجمّع Intlayer القواامس الخاصة بك، يُكتب useI18n مقابل المحتوى الفعلي الخاص بك عندما تمرر خيار namespace. يتم إكمال المفاتيح تلقائياً في IDE الخاص بك وتسبب المسارات غير الصحيحة أخطاء TypeScript في وقت البناء — لا يلزم أي إعداد إضافي.

ts

نسخ المحتوى

نسخ الكود

نسخ الكود إلى الحافظة

// 'about' هو مفتاح قاموس مسجلconst { t } = useI18n({ namespace: "about" });t("counter.label"); // ✓ مكمل تلقائياًt("does.not.exist"); // ✗ خطأ TypeScript

الترحيل الكامل

الخطوات أدناه اختيارية ويمكن إنجازها بشكل تدريجي. تفتح مجموعة ميزات Intlayer الكاملة: محرر مرئي، CMS، ملفات محتوى مكتوبة، ترجمة مدفوعة بالذكاء الاصطناعي، والمزيد.

1. 4

   إعادة تسمية الاستيراد الصريحة (اختياري)

   اختياري

   تتعامل مكوّنات Intlayer بالفعل مع الأسماء المستعارة على مستوى bundler. إذا كنت تفضل جعل التبعية صريحة في ملفات المصدر الخاصة بك، يمكنك إعادة تسمية الاستيرادات يدويياً:

   اظهار جميع محتويات الجدول

   اظهار جميع محتويات الجدول

   افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح

   قبل	بعد
   import { useI18n } from 'vue-i18n'	import { useI18n } from '@intlayer/vue-i18n'
   import { createI18n } from 'vue-i18n'	import { createI18n } from '@intlayer/vue-i18n'

   هذه بدائل drop-in — لا تغييرات في توقيعات الدالة أو الحجج أو أنواع الإرجاع مطلوبة.

2. 5

   تفعيل أتمتة الترجمة المدفوعة بالذكاء الاصطناعي

   اختياري

   بمجرد توصيل Intlayer، استخدم CLI الخاص به لملء الترجمات المفقودة تلقائياً:

   bash

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   # اختبر الترجمات المفقودة (أضف إلى CI)npx intlayer test# ملء الترجمات المفقودة بـ AInpx intlayer fill

   أضف تكوين AI إلى intlayer.config.ts:

   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: "icu",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
     ai: {
       apiKey: process.env.OPENAI_API_KEY,
       // provider: "openai",     // افتراضي
       // model: "gpt-4o-mini",   // افتراضي
     },
   };
   
   export default config;

   انظر وثائق Intlayer CLI لجميع الخيارات المتاحة.

ما يمكنك حذفه بعد الترحيل

بمجرد وضع محولات التوافق، يمكن إزالة نموذج vue-i18n التالي:

عندما تكون جاهزاً للمضي أبعد، يكتشف Intlayer تلقائياً جميع ملفات .content.ts و .content.json في أي مكان في قاعدة الكود الخاصة بك (افتراضياً، في أي مكان داخل ./src). يمكنك وضع ملف my-component.content.ts بجانب MyComponent.vue مباشرة وسيلتقطه Intlayer في وقت البناء بدون تكوين إضافي — لا استيرادات، لا تسجيل، لا حاجة لملف فهرس مركزي. هذا يجعل دمج الترجمات مع الصفحات والمكونات بدون احتكاك تماماً.

تكوين TypeScript

يستخدم Intlayer module augmentation لتوفير intellisense TypeScript الكامل لمفاتيح الترجمة الخاصة بك. تأكد من أن tsconfig.json الخاص بك يتضمن الأنواع المُنتجة تلقائياً:

{  // ... تكوينات TypeScript الموجودة لديك  "include": [    // ... تكوينات TypeScript الموجودة لديك    ".intlayer/**/*.ts", // تضمين الأنواع المُنتجة تلقائياً  ],}

تكوين Git

أضف مجلد Intlayer المُنتج إلى .gitignore الخاص بك:

# تجاهل الملفات المُنتجة بواسطة Intlayer.intlayer

اذهب أبعد

• محرر مرئي — إدارة الترجمات بصرياً في متصفحك: محرر Intlayer المرئي
• CMS — خارج الخدمة وإدارة المحتوى بعداً: CMS Intlayer
• VS Code Extension — الحصول على الإكمال التلقائي واكتشاف أخطاء الترجمة في الوقت الفعلي: ملحق Intlayer VS Code
• مرجع CLI — قائمة كاملة بأوامر CLI: Intlayer CLI
• Intlayer مع Vue — دليل الإعداد الكامل لـ Vue: intlayerwithvite+vue.md
• Intlayer مع Nuxt — دليل الإعداد الكامل لـ Nuxt: intlayerwithnuxt.md