تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

أدوات البناء

تعرف على كيفية استخدام البرامج النصية npm المضمنة في Bootstrap لإنشاء وثائقنا ، وتجميع التعليمات البرمجية المصدر ، وتشغيل الاختبارات ، والمزيد.

على هذه الصفحة

إعداد الأدوات

يستخدم Bootstrap البرامج النصية npm لنظام الإنشاء الخاص به. تتضمن package.json طرقًا ملائمة للعمل مع إطار العمل ، بما في ذلك تجميع التعليمات البرمجية وتشغيل الاختبارات والمزيد.

لاستخدام نظام البناء الخاص بنا وتشغيل وثائقنا محليًا ، ستحتاج إلى نسخة من ملفات مصدر Bootstrap و Node. اتبع هذه الخطوات ويجب أن تكون مستعدًا لموسيقى الروك:

  1. قم بتنزيل وتثبيت Node.js ، والذي نستخدمه لإدارة تبعياتنا.
  2. إما أن تقوم بتنزيل مصادر Bootstrap أو مستودع Bootstrap الخاص بالشوكة .
  3. انتقل إلى الدليل الجذر /bootstrapوقم بالتشغيل npm installلتثبيت التبعيات المحلية الخاصة بنا المدرجة في package.json .

عند الانتهاء ، ستتمكن من تشغيل الأوامر المختلفة المتوفرة من سطر الأوامر.

استخدام البرامج النصية npm

تتضمن package.json الخاصة بنا العديد من المهام لتطوير المشروع. اركض npm runلترى جميع نصوص npm في جهازك الطرفي. تشمل المهام الأساسية ما يلي:

مهمة وصف
npm start يجمع CSS و JavaScript ، ويبني التوثيق ، ويبدأ خادمًا محليًا.
npm run dist ينشئ dist/الدليل بالملفات المترجمة. يتطلب Sass و Autoprefixer و terser .
npm test يجري الاختبارات محليًا بعد الجريnpm run dist
npm run docs-serve يبني ويدير الوثائق محليا.
ابدأ مع Bootstrap عبر npm من خلال مشروعنا المبدئي! توجه إلى مستودع قوالب twbs / bootstrap-npm-starter لمعرفة كيفية إنشاء Bootstrap وتخصيصه في مشروع npm الخاص بك. يتضمن برنامج Sass compiler و Autoprefixer و Stylelint و PurgeCSS و Bootstrap Icons.

ساس

يستخدم Bootstrap Dart Sass لتجميع ملفات مصدر Sass الخاصة بنا في ملفات CSS (المضمنة في عملية البناء الخاصة بنا) ، ونوصيك بفعل الشيء نفسه إذا كنت تقوم بتجميع Sass باستخدام خط أنابيب الأصول الخاص بك. استخدمنا سابقًا Node Sass لـ Bootstrap v4 ، لكن LibSass والحزم المبنية فوقه ، بما في ذلك Node Sass ، أصبحت الآن مهملة .

يستخدم Dart Sass دقة تقريب تبلغ 10 ولأسباب تتعلق بالكفاءة لا تسمح بتعديل هذه القيمة. نحن لا نقلل من هذه الدقة أثناء المعالجة الإضافية لـ CSS المُنشأ لدينا ، على سبيل المثال أثناء التصغير ، ولكن إذا اخترت القيام بذلك ، فإننا نوصي بالحفاظ على دقة لا تقل عن 6 لمنع حدوث مشكلات في تقريب المتصفح.

المصفف الآلي

يستخدم Bootstrap Autoprefixer (مضمن في عملية الإنشاء الخاصة بنا) لإضافة بادئات البائع تلقائيًا إلى بعض خصائص CSS في وقت الإنشاء. يؤدي القيام بذلك إلى توفير الوقت والشفرة من خلال السماح لنا بكتابة الأجزاء الرئيسية من CSS الخاص بنا مرة واحدة مع التخلص من الحاجة إلى مزج البائعين مثل تلك الموجودة في الإصدار 3.

نحتفظ بقائمة المتصفحات المدعومة من خلال Autoprefixer في ملف منفصل داخل مستودع GitHub الخاص بنا. انظر .browserslistrc للحصول على التفاصيل.

RTLCSS

يستخدم Bootstrap RTLCSS لمعالجة CSS المترجمة وتحويلها إلى RTL - لاستبدال الخصائص المدركة للاتجاه الأفقي (على سبيل المثال padding-left) بعكسها. يسمح لنا فقط بكتابة CSS الخاصة بنا مرة واحدة وإجراء تعديلات طفيفة باستخدام توجيهات التحكم والقيمة RTLCSS .

الوثائق المحلية

يتطلب تشغيل وثائقنا محليًا استخدام Hugo ، والذي يتم تثبيته عبر حزمة hugo-bin npm. Hugo هو مولد موقع ثابت سريع للغاية وقابل للتوسعة يوفر لنا: التضمينات الأساسية ، والملفات المستندة إلى Markdown ، والقوالب ، والمزيد. إليك كيفية البدء:

  1. قم بتشغيل إعداد الأدوات أعلاه لتثبيت جميع التبعيات.
  2. من الدليل الجذر /bootstrap، قم بتشغيل npm run docs-serveسطر الأوامر.
  3. افتح http://localhost:9001/في المتصفح الخاص بك ، وفويلا.

تعرف على المزيد حول استخدام Hugo من خلال قراءة وثائقه .

استكشاف الأخطاء وإصلاحها

إذا واجهت مشاكل في تثبيت التبعيات ، فقم بإلغاء تثبيت جميع إصدارات التبعية السابقة (العالمية والمحلية). ثم أعد التشغيل npm install.