Bootstrap & Vite

המדריך הרשמי כיצד לכלול ולצרף את ה-CSS וה-JavaScript של Bootstrap בפרויקט שלך באמצעות Vite.

בעמוד זה

רוצה לדלג עד הסוף? הורד את קוד המקור ואת ההדגמה העובדת עבור מדריך זה ממאגר twbs/examples . אתה יכול גם לפתוח את הדוגמה ב-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 מכיוון שהתפריטים הנפתחים, הפופ-אוברים וטיפים שלנו תלויים בו לצורך מיקומם. אם אתה לא מתכנן להשתמש ברכיבים האלה, אתה יכול להשמיט את פופר כאן.
```
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בעורך שלך. מכיוון שהוא ריק, נצטרך להוסיף לו תצורת תצורת boilerplate כדי שנוכל להפעיל את השרת שלנו. חלק זה של התצורה אומר ש-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.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
ולבסוף, אנחנו יכולים להתחיל את Vite. my-projectמהתיקיה בטרמינל שלך, הפעל את הסקריפט החדש של npm שנוסף :
```
npm start
```

בסעיף הבא והאחרון למדריך זה, נייבא את כל ה-CSS וה-JavaScript של Bootstrap.

ייבוא Bootstrap

הגדר את ייבוא Sass של Bootstrap ב 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 ולייבא את כל ה-JS של Bootstrap. 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 מותאם אישית נוסף ולייעל את המבנה שלך על ידי ייבוא רק את החלקים של ה-CSS וה-JS של Bootstrap שאתה צריך.

רואה כאן משהו לא בסדר או לא מעודכן? אנא פתח בעיה ב-GitHub . זקוק לעזרה בפתרון תקלות? חפש או התחל דיון ב-GitHub.