Bootstrap & Vite

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

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

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

اقامة

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

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

الآن بعد أن تم تثبيت جميع التبعيات الضرورية وإعدادها ، يمكننا العمل على إنشاء ملفات المشروع واستيراد 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 vite.config.js

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

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

في هذه المرحلة ، كل شيء في المكان المناسب ، لكن Vite لن يعمل لأننا لم نملأ ما لدينا vite.config.jsبعد.

تكوين Vite

مع تثبيت التبعيات ومجلد مشروعنا جاهزًا لنا لبدء الترميز ، يمكننا الآن تكوين Vite وتشغيل مشروعنا محليًا.

افتح vite.config.jsفي محررك. نظرًا لأنه فارغ ، سنحتاج إلى إضافة بعض التكوين المعياري إليه حتى نتمكن من بدء تشغيل الخادم الخاص بنا. يخبر هذا الجزء من التكوين أن Vite كان يبحث عن JavaScript الخاص بمشروعنا وكيف يجب أن يتصرف خادم التطوير (يسحب من srcالمجلد مع إعادة التحميل السريع).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

بعد ذلك نملأ src/index.html. هذه هي صفحة HTML التي سيتم تحميل Vite في المتصفح لاستخدام CSS و JS المجمعين اللذين سنضيفهما إليها في خطوات لاحقة.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

نحن نقوم بتضمين القليل من تصميم Bootstrap هنا مع div class="container"و <button>حتى نرى متى يتم تحميل CSS لـ Bootstrap بواسطة Vite.

نحتاج الآن إلى برنامج نصي npm لتشغيل Vite. افتح البرنامج النصي الموضح أدناه package.jsonوأضفه start(يجب أن يكون لديك بالفعل البرنامج النصي للاختبار). سنستخدم هذا البرنامج النصي لبدء خادم Vite dev المحلي الخاص بنا.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
وأخيرًا ، يمكننا بدء Vite. من my-projectالمجلد الموجود في الجهاز الطرفي ، قم بتشغيل البرنامج النصي npm المضاف حديثًا:
```
npm start
```

في القسم التالي والأخير من هذا الدليل ، سنقوم باستيراد كل CSS و JavaScript من Bootstrap.

استيراد Bootstrap

قم بإعداد استيراد Bootstrap's Sass بتنسيق vite.config.js. اكتمل ملف التهيئة الآن ويجب أن يتطابق مع المقتطف أدناه. الجزء الجديد الوحيد هنا هو resolveالقسم - نستخدم هذا لإضافة اسم مستعار إلى ملفات المصدر بالداخل node_modulesللحفاظ على عمليات الاستيراد بسيطة قدر الإمكان.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
الآن ، دعنا نستورد CSS الخاص بـ Bootstrap. أضف ما يلي src/scss/styles.scssلاستيراد كل مصدر Sass الخاص بـ Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
يمكنك أيضًا استيراد أوراق الأنماط الخاصة بنا بشكل فردي إذا كنت تريد ذلك. اقرأ مستندات استيراد Sass الخاصة بنا للحصول على التفاصيل.
بعد ذلك نقوم بتحميل CSS واستيراد JavaScript من Bootstrap. أضف ما يلي src/js/main.jsلتحميل CSS واستيراد كل من Bootstrap's JS. سيتم استيراد Popper تلقائيًا من خلال Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 تريد استخدامها. تأكد من إطلاعك على مشروع مثال Vite الكامل لمعرفة كيفية تضمين Sass مخصص إضافي وتحسين التصميم الخاص بك عن طريق استيراد أجزاء من Bootstrap's CSS و JS التي تحتاجها فقط.

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