Bootstrap & Vite

Nhungamiro yepamutemo yekubatanidza uye kuunganidza Bootstrap's CSS uye JavaScript mupurojekiti yako uchishandisa Vite.

Pa peji ino

Unoda kusvetuka kusvika kumagumo? Dhawunirodha iyo kodhi kodhi uye yekushanda demo yegwaro iri kubva kune twbs/examples repository . Iwe unogona zvakare kuvhura iyo muenzaniso muStackBlitz yekurarama editing.

Gadzirira

Tiri kuvaka Vite purojekiti neBootstrap kubva kutanga, saka pane zvimwe zvinodikanwa uye kumusoro nhanho tisati tanyatsotanga. Gwaro iri rinoda kuti iwe uve neNode.js yakaiswa uye kumwe kujairana neiyo terminal.

Gadzira purojekiti folda uye setup npm. Isu tichagadzira iyo my-projectfolda uye totanga npm -ynekupokana kuti tidzivise kutibvunza mibvunzo yese inopindirana.
```
mkdir my-project && cd my-project
npm init -y
```
Isa Vite. Kusiyana negwara redu reWebpack, pane chete kutsamira kwechishandiso chimwe chete pano. Isu tinoshandisa --save-devkuratidza kuti kutsamira uku ndekwekushandiswa kwekusimudzira kwete kugadzira.
```
npm i --save-dev vite
```
Isa Bootstrap. Iye zvino tinogona kuisa Bootstrap. Tichaisawo Popper sezvo kudonhedza kwedu, mapopovers, uye maturusi ezvishandiso zvinoenderana nazvo pazvinzvimbo zvavo. Kana iwe usingaronge kushandisa izvo zvikamu, unogona kusiya Popper pano.
```
npm i --save bootstrap @popperjs/core
```
Isa kumwe kutsamira. Pamusoro peVite neBootstrap, isu tinoda imwe inotsamira (Sass) kuti itore kunze uye bundle Bootstrap's CSS.
```
npm i --save-dev sass
```

Iye zvino zvatine zvese zvinodiwa zvinotsamira zvakaiswa uye kuseta, tinogona kusvika kubasa kugadzira mafaera eprojekiti uye kupinza Bootstrap.

Chirongwa cheprojekiti

Isu takatogadzira my-projectfolda uye takatanga npm. Iye zvino tichagadzirawo srcfolda yedu, stylesheet, uye JavaScript faira kutenderedza chimiro cheprojekiti. Mhanya zvinotevera kubva my-project, kana nemaoko gadzira iyo folda uye faira chimiro chinoratidzwa pazasi.

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

Kana wapedza, chirongwa chako chakazara chinofanira kutaridzika seizvi:

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

Panguva ino, zvese zviri munzvimbo chaiyo, asi Vite haishande nekuti isu hatisati tazadza zvedu vite.config.js.

Gadzirisa Vite

Nekutsamira kwakaiswa uye yedu purojekiti folda yakagadzirira kuti isu titange kukodha, isu tinogona ikozvino kugadzirisa Vite uye kumhanyisa chirongwa chedu munharaunda.

Vhura vite.config.jsmupepeti wako. Sezvo isina chinhu, isu tichada kuwedzera imwe boilerplate config kwairi kuti tikwanise kutanga server yedu. Ichi chikamu chegadziriso chinoudza Vite yaifanira kutsvaga JavaScript yepurojekiti yedu uye kuti sevha yekuvandudza inofanirwa kuita sei (kudhonza kubva srcpafolda nekupisa zvakare).
```
const path = require('path')

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

Zvadaro tinozadza src/index.html. Iri ndiro peji reHTML Vite rinozorodha mubrowser kuti ishandise mabundled CSS uye JS isu tichawedzera kwairi mumatanho anotevera.

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

Isu tiri kusanganisira zvishoma zveBootstrap styling pano neiyo div class="container"uye <button>kuti isu tione kana Bootstrap's CSS inotakurwa naVite.

Iye zvino tinoda npm script kumhanya Vite. Vhura package.jsonuye wedzera startscript inoratidzwa pazasi (iwe unofanirwa kunge watova nebvunzo script). Tichashandisa script iyi kutanga yedu yemunharaunda Vite dev server.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Uye pakupedzisira, tinogona kutanga Vite. Kubva pane my-projectfolda mune yako terminal, mhanyisa iyo ichangobva kuwedzerwa npm script:
```
npm start
```

Muchikamu chinotevera uye chekupedzisira kugwaro iri, tichapinza ese eBootstrap's CSS neJavaScript.

Ngenisa Bootstrap

Gadzira Bootstrap's Sass import in vite.config.js. Yako faira yekumisikidza ikozvino yakwana uye inofanirwa kufanana nesnippet iri pazasi. Chikamu chitsva chete pano ndicho resolvechikamu - isu tinoshandisa ichi kuwedzera alias kune yedu sosi mafaera mukati node_moduleskuti tichengete kunze zviri nyore sezvinobvira.
```
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
  }
}
```
Zvino, ngatitorei kunze Bootstrap's CSS. Wedzera zvinotevera src/scss/styles.scsskuunza kunze kweBootstrap's source Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Iwe unogona zvakare kuunza edu masitayera ega kana uchida. Verenga yedu Sass import docs kuti uwane ruzivo.
Tevere tinoisa iyo CSS uye tinopinza Bootstrap's JavaScript. Wedzera zvinotevera src/js/main.jskurodha iyo CSS uye pinza yese yeBootstrap's JS. Popper ichaendeswa kunze kwenyika kuburikidza neBootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Iwe unogona zvakare kupinza JavaScript plugins mumwe nemumwe sezvinodiwa kuti uchengetedze saizi dzemasumbu pasi:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Verenga yedu JavaScript docs kuti uwane rumwe ruzivo nezve mashandisiro eBootstrap's plugins.
Uye wapedza! 🎉 NeBootstrap 's sosi Sass uye JS yakazara yakazara, yako yenzvimbo yekuvandudza sevha inofanirwa kutaridzika seizvi.

Iye zvino unogona kutanga kuwedzera chero zvinhu zveBootstrap zvaunoda kushandisa. Ita shuwa yekutarisa yakazara Vite muenzaniso purojekiti yekubatanidza yakawedzera tsika Sass uye optimize chivakwa chako nekuunza kunze chete zvikamu zveBootstrap's CSS uye JS yaunoda.

Unoona chimwe chinhu chisina kunaka kana chekare pano? Ndokumbira uvhure nyaya paGitHub . Unoda rubatsiro kugadzirisa dambudziko? Tsvaga kana tanga nhaurirano paGitHub.