באָאָצטראַפּ & פּעקל

דער באַאַמטער פירער פֿאַר ווי צו אַרייַננעמען און פּעקל Bootstrap ס CSS און דזשאַוואַסקריפּט אין דיין פּרויעקט ניצן פּאַרסעל.

אויף דעם בלאַט

ווילן צו שפּרינגען צו די סוף? אראפקאפיע די מקור קאָד און ארבעטן דעמאָ פֿאַר דעם פירער פֿון די twbs / ביישפילן ריפּאַזאַטאָרי . איר קענט אויך עפֿענען דעם ביישפּיל אין StackBlitz אָבער נישט לויפן עס ווייַל פּאַרסעל איז איצט נישט געשטיצט דאָרט.

שטעל אויף

מיר בויען אַ פּעקל פּרויעקט מיט Bootstrap פֿון קראַצן, אַזוי עס זענען עטלעכע פּרירעקוואַזאַץ און סטעפּס איידער מיר קענען טאַקע אָנהייבן. דער פירער ריקווייערז איר צו האָבן Node.js אינסטאַלירן און עטלעכע פאַמיליעראַטי מיט די וואָקזאַל.

שאַפֿן אַ פּרויעקט טעקע און סעטאַפּ npm. מיר וועלן מאַכן די my-projectטעקע און יניטיאַליזירן npm מיט די -yאַרגומענט צו ויסמיידן עס צו פרעגן אונדז אַלע ינטעראַקטיוו פֿראגן.
```
mkdir my-project && cd my-project
npm init -y
```
ינסטאַלירן פּעקל. ניט ענלעך אונדזער וועבפּאַקק פירער, עס איז בלויז אַ איין בויען געצייַג דעפּענדענסי דאָ. פּעקל וועט אויטאָמאַטיש ינסטאַלירן שפּראַך טראַנספאָרמערס (ווי Sass) ווען עס דיטעקץ זיי. מיר נוצן --save-devצו סיגנאַל אַז די דעפּענדענסי איז בלויז פֿאַר אַנטוויקלונג נוצן און נישט פֿאַר פּראָדוקציע.
```
npm i --save-dev parcel
```
ינסטאַלירן Bootstrap. איצט מיר קענען ינסטאַלירן Bootstrap. מיר וועלן אויך ינסטאַלירן פּאָפּער זינט אונדזער דראָפּדאָוונס, פּאָפּאָווערס און טאָאָלטיפּס אָפענגען אויף עס פֿאַר זייער פּאַזישאַנינג. אויב איר טאָן ניט פּלאַן צו נוצן די קאַמפּאָונאַנץ, איר קענען לאָזן פּאָפּער דאָ.
```
npm i --save bootstrap @popperjs/core
```

איצט אַז מיר האָבן אַלע די נויטיק דיפּענדאַנסיז אינסטאַלירן, מיר קענען באַקומען צו אַרבעטן קריייטינג די פּרויעקט טעקעס און ימפּאָרטינג Bootstrap.

פּרויעקט סטרוקטור

מיר האָבן שוין באשאפן דעם my-projectטעקע און יניטיאַלייזד npm. איצט מיר וועלן אויך מאַכן אונדזער srcטעקע, סטילעשעעט און דזשאַוואַסקריפּט טעקע צו פאַרענדיקן די פּרויעקט סטרוקטור. לויפן די פאלגענדע פֿון 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

אין דעם פונט, אַלץ איז אין די רעכט אָרט, אָבער פּאַרסעל דאַרף אַ HTML בלאַט און npm שריפט צו אָנהייבן אונדזער סערווער.

קאַנפיגיער פּעקל

מיט די דיפּענדאַנסיז אינסטאַלירן און אונדזער פּרויעקט טעקע גרייט פֿאַר אונדז צו אָנהייבן קאָודינג, מיר קענען איצט קאַנפיגיער פּאַרסעל און לויפן אונדזער פּרויעקט לאָוקאַלי. פּעקל זיך ריקווייערז קיין קאַנפיגיעריישאַן טעקע דורך פּלאַן, אָבער מיר דאַרפֿן אַ npm שריפט און אַ HTML טעקע צו אָנהייבן אונדזער סערווער.

פּלאָמבירן די src/index.htmlטעקע. פּעקל דאַרף אַ בלאַט צו מאַכן, אַזוי מיר נוצן אונדזער index.htmlבלאַט צו שטעלן עטלעכע יקערדיק HTML, אַרייַנגערעכנט אונדזער CSS און דזשאַוואַסקריפּט טעקעס.
```
<!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>אַזוי אַז מיר זען ווען Bootstrap ס CSS איז לאָודיד דורך וועבפּאַקק.

פּעקל וועט אויטאָמאַטיש דעטעקט אַז מיר נוצן Sass און ינסטאַלירן די Sass פּאַרסעל פּלוגין צו שטיצן עס. אָבער, אויב איר ווילט, איר קענען אויך מאַניואַלי לויפן npm i --save-dev @parcel/transformer-sass.
לייג די פּעקל 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"
   },
   // ...
}
```
און לעסאָף, מיר קענען אָנהייבן פּאַרסעל. פֿון דער my-projectטעקע אין דיין וואָקזאַל, לויפן דעם ניי צוגעלייגט npm שריפט:
```
npm start
```

אין דער ווייַטער און לעצט אָפּטיילונג פון דעם פירער, מיר אַרייַנפיר אַלע די CSS און דזשאַוואַסקריפּט פון Bootstrap.

אַרייַנפיר באָאָטסטראַפּ

ימפּאָרטינג באָאָטסטראַפּ אין פּאַרסעל ריקווייערז צוויי ימפּאָרץ, איינער אין אונדזער styles.scssאון איינער אין אונדזער main.js.

אַרייַנפיר Bootstrap ס CSS. לייג די פאלגענדע צו src/scss/styles.scssאַרייַנפיר אַלע די באָאָטסטראַפּ ס מקור סאַס.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
איר קענט אויך אַרייַנפיר אונדזער סטילעשעעץ ינדיווידזשואַלי אויב איר ווילט. לייענען אונדזער Sass אַרייַנפיר דאָקס פֿאַר דעטאַילס.
אַרייַנפיר Bootstrap ס JS. לייג די פאלגענדע צו src/js/main.jsאַרייַנפיר אַלע Bootstrap ס JS. פּאָפּער וועט זיין ימפּאָרטיד אויטאָמאַטיש דורך Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
איר קענען אויך אַרייַנפיר דזשאַוואַסקריפּט פּלוגינס ינדיווידזשואַלי ווי דארף צו האַלטן פּעקל סיזעס אַראָפּ:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
לייענען אונדזער דזשאַוואַסקריפּט דאָקס פֿאַר מער אינפֿאָרמאַציע וועגן ווי צו נוצן Bootstrap ס פּלוגינס.
און דו ביסט פארטיק! 🎉 מיט Bootstrap ס מקור Sass און JS גאָר לאָודיד, דיין היגע אַנטוויקלונג סערווער זאָל איצט קוקן ווי דאָס.

איצט איר קענען אָנהייבן אַדינג קיין Bootstrap קאַמפּאָונאַנץ איר ווילן צו נוצן. זייט זיכער צו קאָנטראָלירן די גאַנץ פּאַרסעל ביישפּיל פּרויעקט פֿאַר ווי צו אַרייַננעמען נאָך מנהג סאַס און אַפּטאַמייז דיין בויען דורך ימפּאָרטינג בלויז די פּאַרץ פון Bootstrap ס CSS און JS וואָס איר דאַרפֿן.

זען עפּעס פאַלש אָדער פאַרעלטערט דאָ? ביטע עפֿענען אַן אַרויסגעבן אויף GitHub . דאַרפֿן הילף טראָובלעשאָאָטינג? זוכן אָדער אָנהייבן אַ דיסקוסיע אויף GitHub.