Bootstrap & Parcel

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

בעמוד זה

רוצה לדלג עד הסוף? הורד את קוד המקור ואת ההדגמה העובדת עבור מדריך זה ממאגר twbs/examples . אתה יכול גם לפתוח את הדוגמה ב-StackBlitz אבל לא להפעיל אותה כי Parcel לא נתמך שם כרגע.

להכין

אנחנו בונים פרויקט Parcel עם Bootstrap מאפס, אז יש כמה דרישות מוקדמות ושלבים מקדימים לפני שנוכל באמת להתחיל. מדריך זה מחייב אותך להתקין את Node.js ולהכיר קצת את הטרמינל.

צור תיקיית פרויקט והגדר את npm. אנו ניצור את my-projectהתיקיה ונאתחל את npm עם -yהארגומנט כדי למנוע ממנו לשאול את כל השאלות האינטראקטיביות.
```
mkdir my-project && cd my-project
npm init -y
```
התקן חבילה. בניגוד למדריך Webpack שלנו, יש כאן רק תלות אחת בכלי בנייה. Parcel תתקין אוטומטית שנאי שפה (כמו Sass) כשהיא מזהה אותם. אנו נוהגים --save-devלאותת שהתלות הזו מיועדת רק לשימוש בפיתוח ולא לייצור.
```
npm i --save-dev parcel
```
התקן את Bootstrap. כעת נוכל להתקין את Bootstrap. אנו גם נתקין את 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 ולהפעיל את הפרויקט שלנו באופן מקומי. החבילה עצמה אינה דורשת קובץ תצורה לפי עיצוב, אבל אנחנו צריכים סקריפט 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לאובייקט. אנו נשתמש בסקריפט זה כדי להפעיל את שרת הפיתוח של החבילות שלנו ולעבד את קובץ ה-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 לקבלת פרטים.
ייבוא JS של Bootstrap. הוסף את הדברים הבאים src/js/main.jsכדי לייבא את כל ה-JS של Bootstrap. 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 מותאם אישית נוסף ולמטב את המבנה שלך על ידי ייבוא רק את החלקים של ה-CSS וה-JS של Bootstrap שאתה צריך.

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

Bootstrap & Parcel

להכין

מבנה הפרויקט

הגדר חבילה

ייבוא ​​Bootstrap

ייבוא Bootstrap