Bootstrap & Vite

“Vite” ulanyp, “Bootstrap” -yň CSS we JavaScript-i nädip goşmaly we birikdirmelidigi barada resmi gollanma.

Bu sahypada

Ahyryna geçmek isleýärsiňizmi? Bu gollanma üçin deslapky kody we iş demosyny twbs / mysallar ammaryndan göçürip alyň . Göni redaktirlemek üçin mysaly StackBlitz- de açyp bilersiňiz .

Gurmak

“Bootstrap” bilen “Vite” taslamasyny noldan gurýarys, şonuň üçin hakykatdanam başlamazdan ozal käbir zerur şertler we öňdäki ädimler bar. Bu gollanma size Node.js gurulmagyny we terminal bilen belli bir tanyşlygy talap edýär.

Taslama bukjasyny dörediň we npm guruň. Papkany dörederis we ähli interaktiw soraglary bermezlik my-projectüçin argument bilen npm başlarys .-y
```
mkdir my-project && cd my-project
npm init -y
```
Vite guruň. Webpack gollanmamyzdan tapawutlylykda, bu ýerde diňe bir gural guralyna baglylyk bar. --save-devBu garaşlylygyň önümçilik üçin däl-de, diňe ösüş üçin ulanylýandygyny görkezmek üçin ulanýarys .
```
npm i --save-dev vite
```
Bootstrap guruň. Indi “Bootstrap” gurup bileris. Şeýle hem, Popper-i gurarys, sebäbi aşak düşýänlerimiz, açýan ýerlerimiz we gurallarymyz olaryň ýerleşişine baglydyr. Şol komponentleri ulanmagy meýilleşdirmeýän bolsaňyz, Popper-i şu ýerde goýup bilersiňiz.
```
npm i --save bootstrap @popperjs/core
```
Goşmaça garaşlylygy guruň. “Vite” we “Bootstrap” -dan başga-da, “Bootstrap” -yň CSS-ni dogry import etmek we birikdirmek üçin başga bir garaşlylyk (Sass) gerek.
```
npm i --save-dev sass
```

Gurnalan we gurnalan ähli zerur garaşlylyklarymyz bolansoň, taslama faýllaryny döretmek we Bootstrap import etmek işine başlap bileris.

Taslamanyň gurluşy

Biz eýýäm my-projectbukjany döretdik we npm başladyk. srcIndi taslama gurluşyny jemlemek üçin bukjamyzy, stil tablisamyzy we JavaScript faýlymyzy dörederis . Aşakdakylary işlediň my-projectýa-da aşakda görkezilen bukjany we faýl gurluşyny el bilen dörediň.

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

Gutaranyňyzdan soň, doly taslamaňyz şeýle bolmaly:

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

Şu wagt hemme zat dogry ýerde, ýöne Vite işlemez, sebäbi vite.config.jsentek doldurmadyk.

Sahypany sazlaň

Baglanyşyklar gurlup, kodlaşdyrmaga başlamagymyz üçin taslama bukjamyz bilen, indi “Vite” -ni sazlap, taslamamyzy ýerli derejede işledip bileris.

vite.config.jsRedaktoryňyzda açyň . Boş bolansoň, serwerimizi başlap biler ýaly, oňa birnäçe gazanlar konfigurasiýasy goşmaly bolarys. Sazlamanyň bu bölegi Vite taslamamyzyň JavaScript-i we ösüş serweriniň özüni alyp barşyny gözlemelidigini aýdýar ( srcbukjadan gyzgyn ýüklemek bilen).
```
const path = require('path')

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

Soňundan doldurýarys src/index.html. Bu, HTML sahypasy, Vite birikdirilen CSS we JS-ni ulanmak üçin brauzerde ýüklener, indiki ädimlerde goşarys.

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

div class="container"Bootstrap-yň CSS- i <button>Vite ýükländigini görmek üçin bu ýerde biraz Bootstrap stilini goşýarys.

Indi “Vite” -ni işletmek üçin npm skript gerek. Aşakda görkezilen skripti açyň package.jsonwe goşuň start(synag skripti eýýäm bolmaly). Scripterli “Vite dev” serwerimizi başlamak üçin bu skripti ulanarys.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Netijede, “Vite” başlap bileris. Terminalyňyzdaky bukjadan , my-projecttäze goşulan npm skriptini işlediň:
```
npm start
```

Bu gollanmanyň indiki we soňky bölüminde Bootstrap-yň ähli CSS we JavaScript-i import ederis.

Bootstrap import ediň

“Bootstrap's Sass” importyny guruň vite.config.js. Konfigurasiýa faýlyňyz indi gutardy we aşakdaky bölek bilen gabat gelmeli. Bu ýerde ýeke-täk täze bölüm, importy mümkin boldugyça ýönekeýleşdirmek üçin resolveiçindäki çeşme faýllarymyza lakam goşmak üçin ulanýarys .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
  }
}
```
Indi, “Bootstrap” -yň CSS-ni import edeliň. src/scss/styles.scssBootstrap-yň ähli çeşmesi Sass-y import etmek üçin aşakdakylary goşuň .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Şeýle hem isleseňiz, stil sahypalarymyzy aýratyn import edip bilersiňiz. Jikme-jiklikler üçin Sass import resminamalarymyzy okaň .
Ondan soň CSS-i ýükleýäris we Bootstrap-yň JavaScript-i import edýäris. src/js/main.jsCSS-ni ýüklemek we Bootstrap-yň ähli JS-lerini import etmek üçin aşakdakylary goşuň . Popper Bootstrap arkaly awtomatiki usulda getiriler.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Şeýle hem, bukjanyň ululygyny peseltmek üçin zerur bolanda JavaScript plaginlerini aýratyn import edip bilersiňiz:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Bootstrap-yň plaginlerini nädip ulanmalydygy barada has giňişleýin maglumat üçin JavaScript resminamalarymyzy okaň .
Sen gutardyň! Bo Bootstrap çeşmesi Sass we JS doly ýüklenensoň, ýerli ösüş serweri indi şeýle bolmaly.

Indi ulanmak isleýän islendik Bootstrap komponentleriňizi goşup bilersiňiz. Goşmaça adaty Sass-y nädip goşmalydygyny we diňe Bootstrap-yň CSS we JS-iň zerur böleklerini import edip, binany optimizirlemek üçin doly “Vite” mysal taslamasyny gözden geçiriň .

Bu ýerde nädogry ýa-da köne bir zady görüň? GitHub-da bir mesele açmagyňyzy haýyş edýäris . Näsazlyklary düzetmek üçin kömek gerekmi? GitHub -da gözläň ýa-da çekişmä başlaň .