Bootstrap & Vite

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

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

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

שטעל אויף

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

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

איצט אַז מיר האָבן אַלע די נויטיק דיפּענדאַנסיז אינסטאַלירן און סעטאַפּ, מיר קענען באַקומען צו אַרבעטן קריייטינג די פּרויעקט טעקעס און ימפּאָרטינג 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 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.config.jsאין דיין רעדאַקטאָר. זינט עס איז ליידיק, מיר דאַרפֿן צו לייגן עטלעכע בוילערפּלאַטע קאַנפיגיעריישאַן צו עס אַזוי מיר קענען אָנהייבן אונדזער סערווער. דער טייל פון די קאָנפיג דערציילט אַז Vite איז צו קוקן פֿאַר די דזשאַוואַסקריפּט פון אונדזער פּרויעקט און ווי די אַנטוויקלונג סערווער זאָל זיין ביכייווז (פּולינג פון דער srcטעקע מיט הייס רילאָוד).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
ווייַטער מיר פּלאָמבירן אין src/index.html. דאָס איז דער HTML בלאַט וויטע וועט לאָדן אין דעם בלעטערער צו נוצן די באַנדאַלד 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>אַזוי אַז מיר זען ווען Bootstrap ס CSS איז לאָודיד דורך 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 און דזשאַוואַסקריפּט פון Bootstrap.

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

שטעלן די סאַס ימפּאָרט פון 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
  }
}
```
איצט, לאָזן אונדז אַרייַנפיר Bootstrap ס CSS. לייג די פאלגענדע צו src/scss/styles.scssאַרייַנפיר אַלע די באָאָטסטראַפּ ס מקור סאַס.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
איר קענט אויך אַרייַנפיר אונדזער סטילעשעעץ ינדיווידזשואַלי אויב איר ווילט. לייענען אונדזער Sass אַרייַנפיר דאָקס פֿאַר דעטאַילס.
דערנאָך מיר לאָדן די CSS און אַרייַנפיר Bootstrap ס דזשאַוואַסקריפּט. לייג די פאלגענדע צו src/js/main.jsצו מאַסע די CSS און אַרייַנפיר אַלע Bootstrap ס JS. פּאָפּער וועט זיין ימפּאָרטיד אויטאָמאַטיש דורך Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 קאַמפּאָונאַנץ איר ווילן צו נוצן. זייט זיכער צו קאָנטראָלירן די גאַנץ וויטע ביישפּיל פּרויעקט פֿאַר ווי צו אַרייַננעמען נאָך מנהג Sass און אַפּטאַמייז דיין בויען דורך ימפּאָרטינג בלויז די פּאַרץ פון Bootstrap ס CSS און JS וואָס איר דאַרפֿן.

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