التمهيد والطرود

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

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

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

اقامة

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

قم بإنشاء مجلد مشروع وإعداد 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 نظرًا لأن القوائم المنسدلة والقوائم المنبثقة وتلميحات الأدوات الخاصة بنا تعتمد عليها في تحديد المواقع الخاصة بها. إذا كنت لا تخطط لاستخدام هذه المكونات ، فيمكنك حذف Popper هنا.
```
npm i --save bootstrap @popperjs/core
```

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

هيكل المشروع

لقد قمنا بالفعل بإنشاء my-projectالمجلد وتهيئة npm. سنقوم الآن أيضًا بإنشاء srcالمجلد وورقة الأنماط وملف 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 نفسه أي ملف تكوين حسب التصميم ، لكننا نحتاج إلى برنامج نصي 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 بواسطة Webpack.

سيكتشف Parcel تلقائيًا أننا نستخدم Sass ونثبت المكون الإضافي Sass Parcel لدعمه. ومع ذلك ، إذا كنت ترغب في ذلك ، يمكنك أيضًا التشغيل يدويًا npm i --save-dev @parcel/transformer-sass.
أضف البرامج النصية Parcel npm. افتح 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المجلد الموجود في الجهاز الطرفي ، قم بتشغيل البرنامج النصي 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";
```
يمكنك أيضًا استيراد أوراق الأنماط الخاصة بنا بشكل فردي إذا كنت تريد ذلك. اقرأ مستندات استيراد Sass الخاصة بنا للحصول على التفاصيل.
استيراد Bootstrap's JS. أضف ما يلي src/js/main.jsلاستيراد كل من Bootstrap's JS. سيتم استيراد Popper تلقائيًا من خلال Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
يمكنك أيضًا استيراد مكونات JavaScript الإضافية بشكل فردي حسب الحاجة للحفاظ على أحجام الحزم منخفضة:
```
import Alert from 'bootstrap/js/dist/alert'

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

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

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