intlayer: حزمة NPM لإدارة القاموس متعدد اللغات (i18n)

Intlayer هي مجموعة من الحزم المصممة خصيصًا لمطوري JavaScript. وهي متوافقة مع أطر العمل مثل React، Next.js، و Express.js.

حزمة intlayer تتيح لك إعلان المحتوى الخاص بك في أي مكان في الكود الخاص بك. تقوم بتحويل إعلانات المحتوى متعدد اللغات إلى قواميس منظمة تتكامل بسلاسة مع تطبيقك. مع TypeScript، تعزز Intlayer تطويرك من خلال توفير أدوات أقوى وأكثر كفاءة.

لماذا دمج Intlayer؟

• إدارة المحتوى المدعومة بـ JavaScript: استغل مرونة JavaScript لتعريف وإدارة المحتوى الخاص بك بكفاءة.
• بيئة آمنة من الأخطاء: استفد من TypeScript لضمان أن تكون جميع تعريفات المحتوى دقيقة وخالية من الأخطاء.
• ملفات محتوى متكاملة: احتفظ بترجماتك بالقرب من مكوناتها ذات الصلة، مما يعزز القابلية للصيانة والوضوح.

التثبيت

قم بتثبيت الحزمة اللازمة باستخدام مدير الحزم المفضل لديك:

npm install intlayer

إعداد Intlayer

يوفر Intlayer ملف إعداد لتكوين مشروعك. ضع هذا الملف في جذر مشروعك.

// إعداد اللغات الافتراضيةimport { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

للحصول على قائمة كاملة بالمعلمات المتاحة، راجع وثائق الإعداد.

مثال على الاستخدام

مع Intlayer، يمكنك إعلان المحتوى الخاص بك بطريقة منظمة في أي مكان في قاعدة الكود الخاصة بك.

بشكل افتراضي، يقوم Intlayer بفحص الملفات ذات الامتداد .content.{ts,tsx,js,jsx,mjs,cjs}.

يمكن تعديل الامتداد الافتراضي عن طريق تعيين خاصية contentDir في ملف الإعداد.

.├── intlayer.config.ts└── src    ├── ClientComponent    │   ├── index.content.ts    │   └── index.tsx    └── ServerComponent        ├── index.content.ts        └── index.tsx

إعلان المحتوى الخاص بك

إليك مثال على إعلان المحتوى:

// إعلان المحتوى المترجمimport { t, type Dictionary } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",      ar: "مرحباً بالعالم",    }),    numberOfCar: enu({      "<-1": "أقل من ناقص سيارة واحدة",      "-1": "ناقص سيارة واحدة",      "0": "لا سيارات",      "1": "سيارة واحدة",      ">5": "بعض السيارات",      ">19": "الكثير من السيارات",    }),  },} satisfies Dictionary;export default clientComponentContent;

بناء القواميس الخاصة بك

يمكنك بناء القواميس الخاصة بك باستخدام intlayer-cli.

npx intlayer build

...