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 dist npm run distينشئ /dist/الدليل مع الملفات المترجمة. يستخدم Sass و Autoprefixer و terser .
npm test يجري الاختبارات محليًا بعد الجريnpm run dist
npm run docs-serve يبني ويدير الوثائق محليا.

تشغيل npm runلرؤية جميع البرامج النصية npm.

ابدأ مع Bootstrap عبر npm من خلال مشروعنا المبدئي! توجه إلى مستودع قوالب twbs / bootstrap-npm-starter لمعرفة كيفية إنشاء Bootstrap وتخصيصه في مشروع npm الخاص بك. يتضمن برنامج Sass compiler و Autoprefixer و Stylelint و PurgeCSS و Bootstrap Icons.

ساس

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

إذا كنت تحتاج إلى ميزات Sass أحدث أو توافق مع معايير CSS الأحدث ، فإن Dart Sass هو الآن التطبيق الأساسي لـ Sass ويدعم واجهة برمجة تطبيقات JavaScript متوافقة تمامًا مع Node Sass (مع بعض الاستثناءات المدرجة في صفحة Dart Sass's GitHub ).

لقد قمنا بزيادة دقة تقريب Sass إلى 6 (افتراضيًا ، تكون 5 في Node Sass) لمنع حدوث مشكلات في تقريب المتصفح. إذا كنت تستخدم Dart Sass ، فلن تحتاج إلى تعديل ، لأن هذا المترجم يستخدم دقة تقريب تبلغ 10 ولأسباب تتعلق بالكفاءة لا يسمح بتعديله.

المصفف الآلي

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

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

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

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

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

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

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

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