Bootstrap & Vite

La oficiala gvidilo pri kiel inkludi kaj kunligi CSS kaj JavaScript de Bootstrap en via projekto uzante Vite.

Sur ĉi tiu paĝo

Ĉu vi volas salti ĝis la fino? Elŝutu la fontkodon kaj labordemonstraĵon por ĉi tiu gvidilo el la twbs/examples-deponejo . Vi ankaŭ povas malfermi la ekzemplon en StackBlitz por viva redaktado.

Agordi

Ni konstruas Vite-projekton kun Bootstrap de nulo, do ekzistas kelkaj antaŭkondiĉoj kaj antaŭaj paŝoj antaŭ ol ni vere povas komenci. Ĉi tiu gvidilo postulas, ke vi havu Node.js instalita kaj iom da familiareco kun la terminalo.

Kreu projektan dosierujon kaj agordu npm. Ni kreos la my-projectdosierujon kaj pravalorigos npm kun la -yargumento por eviti ke ĝi faru al ni ĉiujn interagajn demandojn.
```
mkdir my-project && cd my-project
npm init -y
```
Instalu Vite. Male al nia Webpack-gvidilo, ekzistas nur unu konstruila dependeco ĉi tie. Ni uzas --save-devpor signali, ke ĉi tiu dependeco estas nur por disvolva uzo kaj ne por produktado.
```
npm i --save-dev vite
```
Instalu Bootstrap. Nun ni povas instali Bootstrap. Ni ankaŭ instalos Popper ĉar niaj falmenuoj, popovers kaj konsiletoj dependas de ĝi por sia poziciigado. Se vi ne planas uzi tiujn komponantojn, vi povas preterlasi Popper ĉi tie.
```
npm i --save bootstrap @popperjs/core
```
Instalu plian dependecon. Krom Vite kaj Bootstrap, ni bezonas alian dependecon (Sass) por taŭge importi kaj kunigi la CSS de Bootstrap.
```
npm i --save-dev sass
```

Nun kiam ni havas ĉiujn necesajn dependecojn instalitajn kaj agordita, ni povas eklabori kreante la projektdosierojn kaj importante Bootstrap.

Projekta strukturo

Ni jam kreis la my-projectdosierujon kaj pravigis npm. Nun ni ankaŭ kreos nian srcdosierujon, stilfolion kaj JavaScript-dosieron por rondigi la projektan strukturon. Rulu la jenon de my-project, aŭ permane kreu la dosierujon kaj dosierstrukturon montritan sube.

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

Kiam vi finos, via kompleta projekto devus aspekti jene:

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

Ĉi-momente ĉio estas en la ĝusta loko, sed Vite ne funkcios ĉar ni ankoraŭ ne plenigis nian vite.config.js.

Agordu Vite

Kun dependecoj instalitaj kaj nia projekta dosierujo preta por ni komenci kodigon, ni nun povas agordi Vite kaj ruli nian projekton loke.

Malfermu vite.config.jsen via redaktilo. Ĉar ĝi estas malplena, ni devos aldoni iom da agordo al ĝi por ke ni povu komenci nian servilon. Ĉi tiu parto de la agordo diras al Vite serĉi JavaScript de nia projekto kaj kiel la disvolva servilo devus konduti (tiri el la srcdosierujo kun varma reŝargi).
```
const path = require('path')

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

Poste ni plenigu src/index.html. Ĉi tiu estas la HTML-paĝo, kiun Vite ŝargos en la retumilo por uzi la kunmetitajn CSS kaj JS, kiujn ni aldonos al ĝi en postaj paŝoj.

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

Ni inkluzivas iom da Bootstrap-stilado ĉi tie kun la div class="container"kaj <button>por ke ni vidu kiam la CSS de Bootstrap estas ŝarĝita de Vite.

Nun ni bezonas npm-skripton por ruli Vite. Malfermu package.jsonkaj aldonu la startskripton montritan sube (vi jam havu la testan skripton). Ni uzos ĉi tiun skripton por komenci nian lokan Vite-dev-servilon.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Kaj finfine, ni povas komenci Vite. El la my-projectdosierujo en via terminalo, rulu tiun lastatempe aldonitan npm-skripton:
```
npm start
```

En la sekva kaj fina sekcio de ĉi tiu gvidilo, ni importos ĉiujn CSS kaj JavaScript de Bootstrap.

Importu Bootstrap

Agordu la Sass-importadon de Bootstrap en vite.config.js. Via agorda dosiero nun estas kompleta kaj devus kongrui kun la suba fragmento. La nura nova parto ĉi tie estas la resolvesekcio—ni uzas ĉi tion por aldoni kaŝnomon al niaj fontdosieroj interne node_modulespor konservi importadon kiel eble plej simpla.
```
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
  }
}
```
Nun ni importu CSS de Bootstrap. Aldonu la jenon al src/scss/styles.scsspor importi la tutan fonton de Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Vi ankaŭ povas importi niajn stilfoliojn individue, se vi volas. Legu niajn Sass-importdokumentojn por detaloj.
Poste ni ŝarĝas la CSS kaj importas la JavaScript de Bootstrap. Aldonu la jenon al src/js/main.jspor ŝargi la CSS kaj importi ĉiujn JS de Bootstrap. Popper estos aŭtomate importita per Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Vi ankaŭ povas importi JavaScript-kromaĵojn individue laŭbezone por malpliigi pakaĵgrandojn:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Legu niajn JavaScript-dokumentojn por pliaj informoj pri kiel uzi la kromaĵojn de Bootstrap.
Kaj vi finis! 🎉 Kun la fonto de Bootstrap Sass kaj JS plene ŝarĝitaj, via loka disvolva servilo nun devus aspekti tiel.

Nun vi povas komenci aldoni iujn ajn Bootstrap-komponentojn, kiujn vi volas uzi. Nepre kontrolu la kompletan ekzemplan projekton de Vite por kiel inkluzivi plian kutiman Sass kaj optimumigi vian konstruon importante nur la partojn de CSS kaj JS de Bootstrap, kiujn vi bezonas.

Vidas ion malĝustan aŭ malmodernan ĉi tie? Bonvolu malfermi problemon en GitHub . Ĉu vi bezonas helpon pri solvo de problemoj? Serĉu aŭ komencu diskuton en GitHub.