حزمة الويب هي أداة قوية لبناء وتغليف تطبيقات جافا سكريبت. يسمح للمطورين بإدارة تبعيات وموارد المشروع بشكل فعال. تتمثل إحدى المهام المهمة التي قد تنشأ عند تطوير تطبيق ويب في توصيل الخطوط. يمكن أن تؤثر الخطوط بشكل كبير على مظهر الموقع وانطباعه ، لذلك تحتاج إلى معرفة كيفية توصيل الخطوط بشكل صحيح باستخدام حزمة الويب.
الخطوة الأولى في توصيل الخطوط هي تحميل الخطوط إلى المشروع. يمكن تقديم الخطوط في أشكال مختلفة مثل تف ، أوتف ، وف وغيرها. من المهم معرفة أنه لا تدعم جميع المتصفحات جميع تنسيقات الخطوط ، لذلك يوصى بتنزيل الخطوط بتنسيقات مختلفة لضمان أقصى قدر من التوافق مع المتصفحات المختلفة.
بعد تنزيل الخطوط ، يجب عليك تحديد كيفية استخدام هذه الخطوط في صفحة الويب. ويمكن القيام بذلك باستخدام قواعد كس. ومع ذلك ، للتأكد من أن الخطوط سيتم تحميلها بنجاح وعرضها بشكل صحيح على الصفحة ، يجب عليك استخدام مكون إضافي خاص لمحمل ملفات حزمة الويب.
ملف محمل هو البرنامج المساعد الذي يسمح لك لتحميل الملفات إلى مشروع وإرجاع المسار إلى هذه الملفات كسلسلة. يمكن استخدام أداة تحميل الملفات لتنزيل الخطوط بالإضافة إلى الملفات الأخرى مثل الصور أو مقاطع الفيديو.
لتثبيت المكون الإضافي لمحمل الملفات وتوصيل الخط ، تحتاج إلى اتباع بعض الخطوات البسيطة. قم أولا بتثبيت حزمة محمل الملفات باستخدام إدارة حزم الآلية الوقائية الوطنية:
الآلية الوقائية الوطنية تثبيت ملف محمل-حفظ ديف
ثم أضف قاعدة إلى ملف تكوين حزمة الويب لتحميل الخطوط باستخدام أداة تحميل الملفات:
الوحدة: { القواعد: [{اختبار:/\.(وف / وف 2|يوت|تف / أوتف) i / أنا ، محمل: 'ملف محمل'،}،]،},
الآن بعد أن تم تحميل الخطوط وتكوينها بشكل صحيح في المشروع ، يمكن استخدامها في قواعد كس. ما عليك سوى تحديد المسار إلى ملف الخط في خصائص عائلة الخط.
قد يبدو توصيل الخطوط بحزمة الويب مهمة شاقة للمطورين المبتدئين ، ولكن بمساعدة المكون الإضافي لمحمل الملفات والتكوين المناسب لحزمة الويب ، تصبح العملية أسهل بكثير. استخدم هذا الدليل لمعرفة كيفية توصيل الخطوط في مشروعك وإنشاء تطبيقات ويب مذهلة.
- كيفية توصيل خط في حزمة الويب
- تثبيت حزمة الويب
- إنشاء مشروع
- تثبيت وحدة للعمل مع الخطوط
- الحصول على الخطوط
- إضافة خطوط إلى مشروع
كيفية توصيل خط في حزمة الويب
تتيح لك وحدة حزمة الويب المجمعة إدارة موارد تطبيقات الويب بشكل فعال ، بما في ذلك الخطوط. يتم توصيل الخطوط بحزمة الويب باستخدام لوادر خاصة وملف تكوين.
أولا ، تحتاج إلى تثبيت محمل الخط. استخدام الآلية الوقائية الوطنية أو الغزل لتثبيت الحزمة التالية:
- نبم تثبيت د ملف محمل
- غزل إضافة د ملف محمل
بعد تثبيت المحمل ، تحتاج إلى إضافته إلى ملف تكوين حزمة الويب. ابحث عن قسم القواعد وأضف قاعدة خط جديدة:
الوحدة.الصادرات = {// أخرى
إعدادات الوحدة: {
القواعد: [// قواعد أخرى
{
اختبار:/\.(وف / وف 2 / يوت|تف / أوتف) i / أنا,
نوع: 'الأصول / الموارد',
},
],
},
};
تخبر هذه القاعدة حزمة الويب بكيفية التعامل مع الملفات ذات الامتدادات.ووف,.2,.محكمة تكافؤ الفرص, .صندوق النقد الدولي و .أوتف. سيتم استخدام محمل 'ملف محمل' لمعالجة ونسخ ملفات الخط إلى مجلد البناء المناسب.
الآن يمكنك استخدام الخطوط في مشروعك. إضافة ملف نمط المغلق الجديد واستيراد الخطوط على النحو التالي:
@الخط الوجه {
الخط الأسرة: 'ميفونت';
سرك: ورل ('../ الخطوط / ميفونت.تف') شكل ('تروتايب');
الخط الوزن: عادي;
نمط الخط: عادي;
}
- الجسم {
- الخط الأسرة: 'ميفونت';
- قد تختلف المسارات إلى ملفات الخطوط اعتمادا على بنية المشروع. تأكد من تحديد المسار بشكل صحيح بالنسبة إلى ملف نمط كس.
وبالتالي ، فإن توصيل الخط بحزمة الويب ليس بالأمر الصعب ، ولكنه يتطلب تكوين ملف التكوين واستخدام المحمل المناسب. بعد ذلك ، يمكنك بسهولة استخدام الخط المحدد في المشروع وإنشاء تصميم فريد لتطبيق الويب الخاص بك.
تثبيت حزمة الويب
قبل البدء في العمل مع ويباك ، تحتاج إلى التأكد من أن لديك بالفعل عقدة مثبتة.جس و نبم (مدير حزمة عقدة) ، كما يعمل ويبباك على عقدة النظام الأساسي.شبيبة .الخطوة 2: تحقق من تثبيت العقدة.شبيبة
افتح موجه الأوامر أو المحطة الطرفية واكتب أمر العقدة-الخامس. إذا كان لديك عقدة مثبتة.شبيبة ، وحدة التحكم سيتم عرض عقدة الإصدار.شبيبة .
الخطوة 3: تثبيت حزمة الويب باستخدام الآلية الوقائية الوطنية
يتم تثبيت حزمة الويب باستخدام نبم ، لذلك تثبيته عن طريق إدخال نبم تثبيت ويبباك —الأمر العالمي. سيقوم هذا الأمر بتثبيت حزمة الويب عالميا على نظامك.الخطوة 4: التحقق من تثبيت حزمة الويب
إنشاء مشروع
قبل أن نبدأ ، تأكد من تثبيت العقدة.شبيبة على جهاز الكمبيوتر الخاص بك.هنا "مشروعي" هو اسم الدليل الخاص بك. يمكنك اختيار أي اسم آخر.
انتقل إلى الدليل الذي تم إنشاؤه باستخدام الأمر:
نتيجة لتنفيذ هذا الأمر ، سيتم إنشاء ملف حزمة
.جسون
الملف الذي يحتوي على معلومات حول مشروعك وتبعياته.الخطوة 3: تثبيت الحزم اللازمة.
في هذا المشروع ، سوف نستخدم حزمة الويب لبناء مشروعنا وبابل لنقل شفرة جافا سكريبت الخاصة بنا. قم بتشغيل الأوامر التالية لتثبيت الحزم:
نبم تثبيت ويباك ويبباك-كلي بابل-لودر @ بابل / كور @ بابل / مسبقا-إنف-حفظ ديف
الخطوة 4: إنشاء ملفات التكوين.
إنشاء ملف
حزمة الويب.التكوين.شبيبة
موجود في المجلد الجذر لمشروعك. فتحه مع محرر نص وإضافة التعليمات البرمجية التالية:
مسار كونست = تتطلب ('مسار');
الوحدة.الصادرات = {
دخول:'./سرك / فهرس.شبيبة,
انتاج: {
اسم الملف: 'حزمة.شبيبة,
المسار: المسار.حل (__اسم العائلة ، 'حي'),
},
الوحدة: {
القواعد: [
{
اختبار:/\.شبيبة$/,
| استبعاد: / (وحدات العقدة)/, | استعمال: { |
|---|---|
| محمل: 'بابل لودر', | }, |
| }, | ], |
},
};
يحدد ملف التكوين هذا نقطة إدخال التطبيق الخاص بك (
- الدخول
- ) والمكان الذي ستبني فيه حزمة الويب مشروعك (
- الناتج
- ). تم تكوينه أيضا لاستخدام بابل باستخدام بابل محمل.
الخطوة 5: قم بإنشاء دليل وملفات للرمز الخاص بك.
إنشاء
- دليل سرك
في المجلد الجذر لمشروعك. إنشاء ملف فهرس داخل هذا الدليل
.شبيبة
، حيث سيتم وضع شفرة جافا سكريبت الخاصة بك. يمكنك استخدام الملفات والدلائل الأخرى كما يحلو لك.
سيكون لمشروعك الهيكل التالي: