الـ Bootstrap و (Parcel)

الدليل الرسمي لكيفية تضمين وتجميع الـ CSS والـ JavaScript الخاص بـ Bootstrap في مشروعك باستخدام Parcel.

في هذه الصفحة

هل تريد الانتقال إلى النهاية مباشرة؟ قم بتنزيل الكود المصدري والعرض التوضيحي الشغال لهذا الدليل من مستودع twbs/examples. يمكنك أيضاً فتح المثال في StackBlitz ولكن لا يمكنك تشغيله لأن الـ Parcel غير مدعوم حالياً هناك.

ما هو Parcel؟

الـ Parcel هو مجمع تطبيقات ويب (web application bundler) مصمم لتبسيط عملية التطوير مع إعدادات صفرية (zero-configuration) فور التثبيت. وهو يوفر ميزات موجودة في المجمعات الأكثر تقدماً مع التركيز على سهولة الاستخدام، مما يجعله مثالياً للمطورين الذين يسعون لبداية سريعة.

التثبيت

نحن نقوم ببناء مشروع Parcel باستخدام الـ Bootstrap من الصفر، لذا هناك بعض المتطلبات المسبقة والخطوات الأولية قبل أن نبدأ فعلياً. يتطلب هذا الدليل تثبيت Node.js وبعض المعرفة بالـ terminal.

إنشاء مجلد المشروع وإعداد npm. سنقوم بإنشاء مجلد my-project وتهيئة npm باستخدام الوسيط -y لتجنب طرح جميع الأسئلة التفاعلية علينا.
```
mkdir my-project && cd my-project
npm init -y
```
تثبيت Parcel. على عكس دليل Webpack الخاص بنا، يوجد هنا اعتماد واحد فقط لأداة البناء. سيقوم Parcel تلقائياً بتثبيت محولات اللغة (مثل Sass) بمجرد اكتشافها. نستخدم --save-dev للإشارة إلى أن هذا الاعتماد مخصص للاستخدام في التطوير فقط وليس للإنتاج.
```
npm i --save-dev parcel
```
تثبيت Bootstrap. الآن يمكننا تثبيت الـ Bootstrap. سنقوم أيضاً بتثبيت Popper لأن القوائم المنسدلة (dropdowns) والنوافذ المنبثقة (popovers) وتلميحات الأدوات (tooltips) تعتمد عليه في تحديد مواقعها. إذا كنت لا تخطط لاستخدام تلك المكونات، يمكنك حذف Popper هنا.
```
npm i --save bootstrap @popperjs/core
```

الآن بعد أن قمنا بتثبيت جميع الاعتمادات اللازمة، يمكننا البدء في إنشاء ملفات المشروع واستيراد الـ Bootstrap.

هيكل المشروع

لقد قمنا بالفعل بإنشاء مجلد my-project وتهيئة npm. الآن سنقوم أيضاً بإنشاء مجلد src، وورقة أنماط (stylesheet)، وملف JavaScript لاستكمال هيكل المشروع. قم بتشغيل ما يلي من my-project، أو قم بإنشاء هيكل المجلدات والملفات الموضح أدناه يدوياً.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

عند الانتهاء، يجب أن يبدو مشروعك الكامل بهذا الشكل:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

في هذه المرحلة، كل شيء في مكانه الصحيح، ولكن Parcel يحتاج إلى صفحة HTML وسكريبت npm لبدء تشغيل الخادم الخاص بنا.

تهيئة الـ (Parcel)

بعد تثبيت الاعتمادات وتجهيز مجلد المشروع لبدء البرمجة، يمكننا الآن تهيئة Parcel وتشغيل مشروعنا محلياً. Parcel نفسه لا يتطلب ملف تهيئة حسب تصميمه، ولكننا نحتاج إلى سكريبت npm وملف HTML لبدء تشغيل الخادم الخاص بنا.

تعبئة ملف src/index.html. يحتاج Parcel إلى صفحة لعرضها، لذا نستخدم صفحة index.html لإعداد بعض أساسيات HTML، بما في ذلك ملفات CSS وJavaScript الخاصة بنا.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
لقد قمنا بتضمين القليل من تنسيقات الـ Bootstrap هنا باستخدام div class="container" و <button> حتى نرى متى يتم تحميل CSS الخاص بالـ Bootstrap بواسطة Parcel.

سيكتشف Parcel تلقائياً أننا نستخدم Sass وسيقوم بتثبيت إضافة Sass Parcel لدعمه. ومع ذلك، إذا كنت ترغب في ذلك، يمكنك أيضاً تشغيل npm i --save-dev @parcel/transformer-sass يدوياً.
إضافة سكريبتات npm الخاصة بـ Parcel. افتح ملف package.json وأضف سكريبت start التالي إلى كائن scripts. سنستخدم هذا السكريبت لبدء خادم تطوير Parcel وعرض ملف HTML الذي أنشأناه بعد تجميعه في مجلد dist.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
وأخيراً، يمكننا بدء تشغيل Parcel. من مجلد my-project في الـ terminal الخاص بك، قم بتشغيل سكريبت npm الذي تمت إضافته حديثاً:
```
npm start
```

في القسم القادم والأخير من هذا الدليل، سنقوم باستيراد جميع ملفات CSS وJavaScript الخاصة بالـ Bootstrap.

استيراد الـ (Bootstrap)

يتطلب استيراد الـ Bootstrap في Parcel عمليتي استيراد، واحدة في ملف styles.scss وأخرى في ملف main.js.

استيراد CSS الخاص بالـ Bootstrap. أضف ما يلي إلى src/scss/styles.scss لاستيراد جميع ملفات Sass المصدرية الخاصة بالـ Bootstrap.
```
// Import all of Bootstrap’s CSS
@import "bootstrap/scss/bootstrap";
```
يمكنك أيضاً استيراد أوراق الأنماط (stylesheets) الخاصة بنا بشكل فردي إذا كنت ترغب في ذلك. اقرأ مستندات استيراد Sass لمزيد من التفاصيل.

اختياري: قد تظهر لك تحذيرات باستبعاد (deprecation) Sass مع أحدث إصدارات Dart Sass. يمكن إسكات هذه التحذيرات عن طريق إضافة التهيئة التالية في ملف .sassrc.js في المجلد الرئيسي كما يلي:
```
module.exports = {
  silenceDeprecations: ['import', 'mixed-decls', 'color-functions', 'global-builtin']
}
```
استيراد JS الخاص بالـ Bootstrap. أضف ما يلي إلى src/js/main.js لاستيراد جميع ملفات JS الخاصة بالـ Bootstrap. سيتم استيراد Popper تلقائياً من خلال الـ Bootstrap.
```
// Import all of Bootstrap’s JS
import * as bootstrap from 'bootstrap'
```
يمكنك أيضاً استيراد الإضافات (plugins) الخاصة بـ JavaScript بشكل فردي حسب الحاجة لتقليل أحجام الحزم:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
اقرأ مستندات JavaScript الخاصة بنا لمزيد من المعلومات حول كيفية استخدام إضافات (plugins) الـ Bootstrap.
وهكذا انتهيت! 🎉 مع تحميل Sass وJS المصدرية الخاصة بالـ Bootstrap بالكامل، يجب أن يبدو خادم التطوير المحلي الخاص بك الآن بهذا الشكل:

الآن يمكنك البدء في إضافة أي مكونات Bootstrap تريد استخدامها. تأكد من الاطلاع على مشروع مثال Parcel الكامل لمعرفة كيفية تضمين Sass مخصص إضافي وتحسين عملية البناء الخاصة بك عن طريق استيراد أجزاء فقط من CSS وJS الخاصة بالـ Bootstrap التي تحتاجها.

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