بناء حزم محلية
أنشئ إصدارات للتطبيق لكل محلية
بناء حزم محلية درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
بناء واحد لكل إعداد محلي
يعمل i18n في Angular وقت التجميع؛ إذ ينتج حزمة محسّنة بالكامل ومنفصلة لكل إعداد محلي، مع تضمين الترجمات فيها. ولا يحمّل المستخدمون سوى لغتهم، من دون تكلفة ترجمة أثناء التشغيل.
إعداد عمليات البناء المترجمة محليًا
بعد تعريف الإعدادات المحلية في angular.json، عيّن localize: true في خيارات البناء لإنشاء كل الإعدادات المحلية دفعةً واحدة.
"build": {
"options": {
"localize": true,
"outputPath": "dist/app"
}
}بناء جميع الإعدادات المحلية
شغّل بناء الإنتاج؛ فسيُخرج CLI مجلدًا واحدًا لكل إعداد محلي، ويحتوي كل مجلد على تطبيق كامل.
ng build --localize
# dist/app/en/ dist/app/fr/ dist/app/es/بناء إعداد محلي واحد
لتسريع التكرار، يمكنك بناء إعداد محلي واحد فقط بتمرير رمزه.
ng build --localize=frضبط base href لكل إعداد محلي
يمكن أن يحصل بناء كل إعداد محلي على baseHref خاص به، بحيث يُخدَّم من مسار فرعي مثل /fr/. اضبطه ضمن كل إعداد محلي في angular.json.
"locales": {
"fr": {
"translation": "src/locale/messages.fr.xlf",
"baseHref": "/fr/"
}
}تشغيل إعداد محلي محدد في التطوير
يخدم ng serve إعدادًا محليًا واحدًا في كل مرة. مرّر الإعداد أو الإعداد المحلي الذي تريد معاينة ترجماته أثناء التطوير.
ng serve --configuration=frتوجيه المستخدمين إلى إعدادهم المحلي
بما أن كل إعداد محلي يمثل مجلدًا منفصلًا قابلًا للنشر، فعادةً ما تستخدم الخادم أو شبكة CDN لإعادة توجيه المستخدمين إلى المسار الفرعي الصحيح بناءً على ترويسة Accept-Language أو أداة تبديل اللغة.
استخدام $localize أثناء التشغيل للإعدادات المخصصة
يمكن للإعدادات المتقدمة تحميل الترجمات أثناء التشغيل باستخدام loadTranslations() من @angular/localize قبل عملية الإقلاع. ويستبدل هذا بناءً منفصلًا لكل إعداد محلي بحزمة واحدة وخريطة ترجمات يتم جلبها.
import { loadTranslations } from '@angular/localize';
loadTranslations(frTranslations);
// then bootstrapApplication(App)متطلب Polyfill
يتطلب استخدام $localize إضافة Polyfill الخاصة بـ @angular/localize. أضيفوها مرة واحدة باستخدام CLI؛ فهي تسجّل الكائن العام المطلوب لترجمة القوالب المعلّمة.
ng add @angular/localizeيبقى حجم الحزمة صغيرًا
نظرًا إلى أن الترجمة تحدث وقت البناء، تحتوي حزمة اللغة الفرنسية على النصوص الفرنسية فقط، من دون لغات أخرى أو محرك ترجمة يُرسل إلى المتصفح. ولهذا تحافظ i18n وقت الترجمة على خفة التطبيقات.
نشر المخرجات
انشروا الدليل dist/app بأكمله؛ فكل مجلد فرعي خاص بلغة هو تطبيق مستقل. اضبطوا المضيف بحيث يقدّم البناء الفرنسي عند المسار /fr/، وتكون اللغة الافتراضية متاحة في الجذر أو في مسارها الخاص.
تحقق سريع
كيف يوزّع Angular الترجمات؟
مراجعة
اضبطوا localize: true وشغّلوا ng build --localize لإنشاء مجلد لكل لغة، بحيث يكون كل مجلد تطبيقًا كاملًا. استخدموا baseHref خاصًا بكل لغة (مثلًا /fr/)، وقدّموا لغة واحدة في بيئة التطوير باستخدام --configuration، وأضيفوا Polyfill الخاصة بـ @angular/localize، ويمكنكم اختياريًا تحميل الترجمات وقت التشغيل في الإعدادات المخصصة.
الأسئلة الشائعة
هل درس «بناء حزم محلية» مجاني؟
نعم — نص درس «بناء حزم محلية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «بناء حزم محلية»؟
أنشئ إصدارات للتطبيق لكل محلية تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «بناء حزم محلية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.