Bootstrap & Vite

Ubuyobozi bwemewe bwo gushyiramo no guhuza CSS na JavaScript ya Bootstrap mumushinga wawe ukoresheje Vite.

Kuriyi page

Urashaka gusimbuka kugeza imperuka? Kuramo inkomoko yinkomoko hamwe na demo ikora kuriyi mfashanyigisho kuva ububiko bwa twbs / ingero . Urashobora kandi gufungura urugero muri StackBlitz kugirango uhindure neza.

Gushiraho

Turimo kubaka umushinga wa Vite hamwe na Bootstrap kuva kera, nuko haribintu bimwe bisabwa hamwe nintambwe yimbere mbere yuko dutangira rwose. Aka gatabo kagusaba kugira Node.js yashyizwemo kandi umenyereye na terminal.

Kora umushinga wububiko hanyuma ushireho npm. Tuzakora my-projectububiko hanyuma dutangire npm hamwe -ynimpaka kugirango twirinde kutubaza ibibazo byose byimikorere.
```
mkdir my-project && cd my-project
npm init -y
```
Shyiramo Vite. Bitandukanye nuyobora Webpack, hano harikintu kimwe gusa cyubaka ibikoresho. Dukoresha --save-devkwerekana ko uku kwishingikiriza kumikoreshereze yiterambere gusa atari kubikorwa.
```
npm i --save-dev vite
```
Shyiramo Bootstrap. Ubu turashobora gushiraho Bootstrap. Tuzashyiraho kandi Popper kuva ibitonyanga, popovers, hamwe nibikoresho byifashishwa kubirindiro byabo. Niba udateganya gukoresha ibyo bice, urashobora gusiba Popper hano.
```
npm i --save bootstrap @popperjs/core
```
Shiraho ubundi bwishingizi. Usibye Vite na Bootstrap, dukeneye ubundi bwishingizi (Sass) kugirango twinjize neza kandi duhuze CSS ya Bootstrap.
```
npm i --save-dev sass
```

Noneho ko dufite ibyangombwa byose bikenewe byashyizweho kandi bigashyirwaho, dushobora kubona akazi ko gukora dosiye zumushinga no gutumiza Bootstrap.

Imiterere yumushinga

Tumaze gukora my-projectububiko no gutangiza npm. Noneho tuzakora kandi srcububiko bwacu, imisusire, na dosiye ya JavaScript kugirango tuzenguruke imiterere yumushinga. Koresha ibikurikira kuva my-project, cyangwa intoki ukore ububiko nububiko bwa dosiye byerekanwe hepfo.

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

Iyo urangije, umushinga wawe wuzuye ugomba kumera gutya:

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

Kuri ubu, ibintu byose biri ahantu heza, ariko Vite ntabwo izakora kuko tutaruzuza ibyacu vite.config.js.

Shiraho Vite

Hamwe nubwishingizi bwashizweho hamwe nububiko bwumushinga witeguye kugirango dutangire coding, ubu dushobora gushiraho Vite hanyuma tugakoresha umushinga waho.

Fungura vite.config.jsmu mwanditsi wawe. Kubera ko ari ubusa, tuzakenera kongeramo ibyuma bimwe kugirango tubashe gutangira seriveri. Iki gice cya config kibwira Vite kwari ugushakisha JavaScript yumushinga nuburyo seriveri yiterambere igomba kwitwara (gukuramo srcmububiko hamwe na reload ishyushye).
```
const path = require('path')

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

Ubutaha turuzuza src/index.html. Uru nurupapuro rwa HTML Vite izapakira muri mushakisha kugirango ukoreshe CSS hamwe na JS tuzayongeraho mubyiciro byanyuma.

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

Turimo gushiramo akantu gato ka Bootstrap styling hano hamwe na div class="container"hamwe <button>kugirango tubone igihe CSS ya Bootstrap yuzuye na Vite.

Noneho dukeneye inyandiko ya npm kugirango dukore Vite. Fungura package.jsonhanyuma wongereho inyandiko startyerekanwe hepfo (ugomba kuba ufite inyandiko yikizamini). Tuzakoresha iyi nyandiko kugirango dutangire hafi ya Vite dev seriveri.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Hanyuma, dushobora gutangira Vite. Kuva my-projectmububiko muri terminal yawe, koresha iyo nyandiko yongeyeho npm inyandiko:
```
npm start
```

Mugice gikurikira nicyanyuma kuriyi mfashanyigisho, tuzatumiza muri CSS ya Bootstrap yose hamwe na JavaScript.

Kuzana Bootstrap

Shiraho Boassstrap ya Sass itumizwa muri vite.config.js. Idosiye yawe iboneza ubu iruzuye kandi igomba guhuza ibice hepfo. Igice gishya gusa hano ni resolveigice - dukoresha ibi kugirango twongere alias kumadosiye yaturutse imbere node_moduleskugirango dukomeze ibicuruzwa byoroshye byoroshye.

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

Noneho, reka twinjize CSS ya Bootstrap. Ongeraho ibikurikira kugirango src/scss/styles.scsswinjize isoko ya Bootstrap yose Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Urashobora kandi gutumiza impapuro zacu muburyo bwihariye niba ubishaka. Soma ibyinjira muri Sass byinjira kubisobanuro birambuye.
Ubutaha turapakira CSS hanyuma dutumiza JavaScript ya Bootstrap. Ongeraho ibikurikira kugirango src/js/main.jswikoreze CSS no gutumiza JS yose ya Bootstrap. Popper izatumizwa mu buryo bwikora binyuze muri Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Urashobora kandi kwinjiza amacomeka ya JavaScript kugiti cyawe nkuko bikenewe kugirango ubunini buke bugabanuke:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Soma inyandiko za JavaScript kugirango ubone ibisobanuro birambuye kuburyo wakoresha amacomeka ya Bootstrap.
Kandi urangije! 🎉 Hamwe na Bootstrap inkomoko ya Sass na JS yuzuye, seriveri yiterambere ryibanze igomba noneho kugaragara nkiyi.

Noneho urashobora gutangira kongeramo ibice byose bya Bootstrap ushaka gukoresha. Wemeze neza kugenzura umushinga wuzuye wa Vite yingero zuburyo washyiramo Sass yinyongera yihariye kandi uhindure inyubako yawe utumiza gusa ibice bya CSS na JS ya Bootstrap ukeneye.

Reba ikintu kibi cyangwa cyataye igihe hano? Nyamuneka fungura ikibazo kuri GitHub . Ukeneye ubufasha bwo gukemura ibibazo? Shakisha cyangwa utangire ikiganiro kuri GitHub.