Bootstrap & Vite

Rêbernameya fermî ji bo meriv çawa bi karanîna Vite-ê CSS û JavaScript-a Bootstrap-ê di projeya xwe de tevde û berhev bike.

Li ser vê rûpelê

Dixwazin heya dawiyê derbas bibin? Koda çavkanî û demo ya xebatê ji bo vê rêbernameyê ji depoya twbs/nimûneyan dakêşin . Her weha hûn dikarin mînaka li StackBlitz ji bo guherandina zindî vekin.

Damezirandin

Em projeyek Vite bi Bootstrap ji sifrê ava dikin, ji ber vê yekê hin şert û gavên pêşîn hene berî ku em bi rastî dest pê bikin. Ev rêber ji we re hewce dike ku hûn Node.js sazkirî bin û bi termînalê re hinekî nas bikin.

Peldankek projeyê biafirînin û npm saz bikin. Em ê my-projectpeldankê biafirînin û npm bi -yargumana xwe bidin destpêkirin da ku ew hemî pirsên înteraktîf ji me nepirse.
```
mkdir my-project && cd my-project
npm init -y
```
Vite saz bikin. Berevajî rêberê meya Webpackê, li vir tenê girêdanek amûrek çêkirinê heye. Em bikar tînin --save-devku nîşan bidin ku ev girêdayî tenê ji bo karanîna pêşveçûnê ye û ne ji bo hilberînê ye.
```
npm i --save-dev vite
```
Bootstrap saz bikin. Naha em dikarin Bootstrap saz bikin. Em ê Popper-ê jî saz bikin ji ber ku dakêşan, popover û serişteyên amûran ji bo pozîsyona wan bi wê ve girêdayî ne. Heke hûn ne plan dikin ku van hêmanan bikar bînin, hûn dikarin Popper li vir derxînin.
```
npm i --save bootstrap @popperjs/core
```
Girêdana zêde saz bikin. Ji bilî Vite û Bootstrap, ji me re pêwendiyek din (Sass) hewce ye ku CSS-ya Bootstrap bi rêkûpêk import û berhevkirin.
```
npm i --save-dev sass
```

Naha ku me hemî girêdanên pêwîst saz kirine û saz kirine, em dikarin dest bi çêkirina pelên projeyê û importkirina Bootstrap bikin.

Struktura projeyê

Me berê my-projectpeldank çêkir û npm dest pê kir. srcNaha em ê peldanka xwe , peldanka şêwazê, û pelê JavaScript- ê jî biafirînin da ku strukturên projeyê dorpêç bikin. Ya jêrîn ji my-project, an jî bi destan peldank û peldanka ku li jêr tê xuyang kirin biafirînin.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js

Dema ku we qediya, divê projeya weya tevahî bi vî rengî xuya bike:

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

Di vê nuqteyê de, her tişt li cîhê rast e, lê Vite dê nexebite ji ber ku me vite.config.jshîna xwe tije nekiriye.

Veavakirina Vite

Digel ku girêdayîn hatine saz kirin û peldanka projeya me amade ye ku em dest bi kodkirinê bikin, em naha dikarin Vite mîheng bikin û projeya xwe ya herêmî bimeşînin.

vite.config.jsDi edîtorê xwe de vekin . Ji ber ku ew vala ye, em ê hewce bikin ku hin konfigurasyona boilerplate li wê zêde bikin da ku em servera xwe bidin destpêkirin. Ev beşa mîhengê ji Vite re dibêje ku divê li JavaScript-a projeya me bigere û servera pêşkeftinê çawa tevbigere (ji srcpeldankê bi nûvekirina germ vekêşe).
```
const path = require('path')

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

Piştre em tijî src/index.htmldikin. Ev rûpela HTML-ê ye ku Vite dê di gerokê de bar bike da ku CSS û JS-ya hevgirtî bikar bîne, em ê di gavên paşîn de lê zêde bikin.

<!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>

Em li vir piçek şêwazê Bootstrap-ê bi hev re vedigirin div class="container"û <button>ji ber vê yekê em dibînin gava CSS-ya Bootstrap ji hêla Vite ve tê barkirin.

Naha ji me re skrîptek npm hewce ye ku Vite bimeşîne. Skrîpta ku li jêr tê xuyang kirin vekin package.jsonû lê zêde bikin start(divê hûn jixwe skrîpta testê hebin). Em ê vê skrîptê bikar bînin da ku servera xweya devkî ya Vite ya herêmî dest pê bikin.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Û di dawiyê de, em dikarin Vite dest pê bikin. Ji my-projectpeldanka li termînalê xwe, wê skrîpta npm ya nû hatî zêdekirin bimeşînin:
```
npm start
```

Di beşa paşîn û paşîn a vê rêbernameyê de, em ê hemî CSS û JavaScript-a Bootstrap-ê derxînin.

Bootstrap import bikin

Inporta Sass a Bootstrap saz bikin vite.config.js. Pelê veavakirina we naha qediya ye û divê bi perçeya jêrîn re li hev bike. Yekane beşa nû ya li vir resolvebeş e - em vê yekê bikar tînin da ku navekî li pelên çavkaniya xwe li hundur zêde node_modulesbikin da ku îtxal bi qasî ku gengaz bihêlin.
```
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
  }
}
```
Naha, werin em CSS-ya Bootstrap-ê derxînin. Ya jêrîn lê zêde bikin da src/scss/styles.scssku hemî çavkaniya Bootstrap Sass têxe nav xwe.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ger hûn bixwazin hûn dikarin şêwazên me bi rengek ferdî jî derxînin. Ji bo hûragahiyan , belgeyên me yên importa Sass bixwînin .
Dûv re em CSS-ê bar dikin û JavaScript-a Bootstrap-ê derdixin. Ya jêrîn lê zêde bikin da src/js/main.jsku CSS-ê bar bikin û hemî JS-ya Bootstrap-ê derxînin. Popper dê bixweber bi navgîniya Bootstrap ve were şandin.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Her weha hûn dikarin pêvekên JavaScript-ê li gorî hewcedariyê bi rengek ferdî derxînin da ku mezinahiyên pakêtê kêm bibin:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Ji bo bêtir agahdarî li ser meriv çawa pêvekên Bootstrap bikar tîne, belgeyên me yên JavaScript bixwînin .
Û hûn qedandin! 🎉 Li gel çavkaniya Bootstrap Sass û JS bi tevahî barkirî, servera weya pêşkeftina herêmî divê naha bi vî rengî xuya bike.

Naha hûn dikarin dest bi lê zêdekirina pêkhateyên Bootstrap-ê yên ku hûn dixwazin bikar bînin bikin. Pê bawer bin ku hûn projeya mînaka Vite ya bêkêmasî binihêrin ka meriv çawa Sass-a xwerû ya zêde tê de vedihewîne û avakirina xwe xweşbîn bike bi tenê beşên Bootstrap-ê CSS û JS-ya ku hûn hewce ne.

Li vir tiştek xelet an kevnar dibînin? Ji kerema xwe pirsgirêkek li ser GitHub vekin . Ji bo çareserkirina pirsgirêkan arîkariyê divê? Li GitHub nîqaşek bigerin an dest pê bikin .