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

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

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

لماذا تدمج Intlayer؟

• إدارة المحتوى مدعومة بجافاسكريبت: استغل مرونة جافاسكريبت لتعريف وإدارة المحتوى الخاص بك بكفاءة.
• بيئة آمنة من حيث النوع: استفد من 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.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}.

يمكنك تعديل الامتداد الافتراضي عن طريق تعيين خاصية 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",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),    numberOfCar: enu({      "<-1": "أقل من ناقص سيارة واحدة",      "-1": "ناقص سيارة واحدة",      "0": "لا سيارات",      "1": "سيارة واحدة",      ">5": "بعض السيارات",      ">19": "العديد من السيارات",    }),  },} satisfies Dictionary;export default clientComponentContent;

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

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

npx intlayer dictionaries build

يقوم هذا الأمر بمسح جميع ملفات *.content.*، وتجميعها، وكتابة النتائج في الدليل المحدد في ملف intlayer.config.ts الخاص بك (افتراضيًا، ./.intlayer).

قد يبدو الناتج النموذجي كما يلي:

.└── .intlayer    ├── dictionary  # يحتوي على قاموس المحتوى الخاص بك    │   ├── client-component.json    │   └── server-component.json    ├── main  # يحتوي على نقطة الدخول لقاموسك لاستخدامه في تطبيقك    │   ├── dictionary.cjs    │   └── dictionary.mjs    └── types  # يحتوي على تعريفات الأنواع التي تم إنشاؤها تلقائيًا لقاموسك        ├── intlayer.d.ts  # يحتوي على تعريفات الأنواع التي تم إنشاؤها تلقائيًا لـ Intlayer        ├── client-component.d.ts        └── server-component.d.ts

بناء موارد i18next

يمكن تكوين Intlayer لبناء قواميس لـ i18next. للقيام بذلك، تحتاج إلى إضافة التكوين التالي إلى ملف intlayer.config.ts الخاص بك:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // يخبر Intlayer بإنشاء ملفات الرسائل لـ i18next    dictionaryOutput: ["i18next"],    // الدليل الذي سيكتب فيه Intlayer ملفات JSON الخاصة بالرسائل    i18nextResourcesDir: "./i18next/resources",  },};

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

الناتج:

.└── i18next    └── resources        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

على سبيل المثال، قد يبدو ملف en/client-component.json كما يلي:

{  "myTranslatedContent": "Hello World",  "zero_numberOfCar": "No cars",  "one_numberOfCar": "One car",  "two_numberOfCar": "Two cars",  "other_numberOfCar": "بعض السيارات"}

بناء قواميس next-intl

يمكن تكوين Intlayer لبناء قواميس لـ i18next أو next-intl. للقيام بذلك، تحتاج إلى إضافة التكوين التالي إلى ملف intlayer.config.ts الخاص بك:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // يخبر Intlayer بإنشاء ملفات الرسائل لـ i18next    dictionaryOutput: ["next-intl"],    // الدليل الذي سيكتب فيه Intlayer ملفات JSON الخاصة بالرسائل    nextIntlMessagesDir: "./i18next/messages",  },};

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

الناتج:

.└── intl    └── messages        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

على سبيل المثال، قد يبدو ملف en/client-component.json كما يلي:

{  "myTranslatedContent": "مرحبا بالعالم",  "zero_numberOfCar": "لا سيارات",  "one_numberOfCar": "سيارة واحدة",  "two_numberOfCar": "سيارتان",  "other_numberOfCar": "بعض السيارات"}

أدوات CLI

يوفر Intlayer أداة CLI لـ:

• تدقيق إعلانات المحتوى الخاصة بك واستكمال الترجمات المفقودة
• بناء القواميس من إعلانات المحتوى الخاصة بك
• دفع وسحب القواميس البعيدة من نظام إدارة المحتوى الخاص بك إلى مشروع اللغة المحلية الخاص بك

راجع intlayer-cli لمزيد من المعلومات.

استخدام Intlayer في تطبيقك

بمجرد إعلان المحتوى الخاص بك، يمكنك استهلاك قواميس Intlayer في تطبيقك.

يتوفر Intlayer كحزمة لتطبيقك.

تطبيق React

لاستخدام Intlayer في تطبيق React الخاص بك، يمكنك استخدام react-intlayer.

تطبيق Next.js

لاستخدام Intlayer في تطبيق Next.js الخاص بك، يمكنك استخدام next-intlayer.

تطبيق Express

لاستخدام Intlayer في تطبيق Express الخاص بك، يمكنك استخدام express-intlayer.

الوظائف المقدمة من حزمة intlayer

توفر حزمة intlayer أيضًا بعض الوظائف لمساعدتك في تعريب تطبيقك.

• getConfiguration()
• getTranslation()
• getEnumeration()
• getLocaleName()
• getLocaleLang()
• getHTMLTextDir()
• getPathWithoutLocale()
• getMultilingualUrls()
• getLocalizedUrl()
• getPathWithoutLocale()

تاريخ الوثيقة

• 5.5.10 - 2025-06-29: بداية السجل