Bobine ya bottes & Vite

Guide officiel ya ndenge ya ko kotisa pe ko bundle CSS na JavaScript ya Bootstrap na projet na yo na nzela ya Vite.

Na lokasa oyo

Olingi kopumbwa tii na nsuka? Télécharger code source na démonstration ya mosala pona guide oyo na dépôt ya twbs/exemples . Okoki pe kofungola ndakisa na StackBlitz pona édition en direct.

Kobongisa

Tozali kotonga projet ya Vite na Bootstrap à partir ya zéro, yango wana ezali na mwa ba conditions préalables mpe na ba étapes ya liboso liboso ete tokoka mpenza kobanda. Guide oyo esengi ozala na Node.js installé pe mua familiarité na terminal.

Bosala dossier ya projet pe bo setup npm. Tokosala my-projectdossier pe toko initialiser npm na -yargument po e éviter etuna biso ba questions interactives nionso.
```
mkdir my-project && cd my-project
npm init -y
```
Botia Vite na esika na yango. Na bokeseni na buku na biso ya Webpack, ezali kaka na bozangi bondimi ya esaleli ya botongi moko awa. Tosalelaka --save-devpona kopesa signal que dépendance oyo ezali kaka pona usage ya développement et non pona production.
```
npm i --save-dev vite
```
Botia na esika bakomi Bootstrap. Sikoyo tokoki ko installer Bootstrap. Toko installer pe Popper puisque ba dropdowns na biso, ba popovers, na ba outils e dépend na yango pona positionnement na bango. Soki ozali na plan te ya kosalela ba composants wana, okoki ko omiter Popper awa.
```
npm i --save bootstrap @popperjs/core
```
Botia dépendance ya kobakisa. En plus ya Vite na Bootstrap, toza na besoin ya dépendance mosusu (Sass) pona ko importer pe ko bundle bien CSS ya Bootstrap.
```
npm i --save-dev sass
```

Sikoyo lokola tozali na ba dépendances nionso esengeli installé mpe setup, tokoki kozua mosala ya kosala ba fichiers ya projet mpe ko importer Bootstrap.

Bokeli ya mosala

Tosi tosala my-projectdossier pe to initialiser npm. Sikoyo tokosala pe srcdossier na biso, stylesheet, na fichier JavaScript pona ko arrondir structure ya projet. Salá oyo elandi uta na my-project, to sala na mabɔkɔ ebongiseli ya dosyé mpe ya fisyé oyo emonisami awa na nse.

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

Ntango osilisi, mosala na yo mobimba esengeli kozala boye:

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

Na point oyo, nionso ezali na esika ya malamu, kasi Vite ekosimba te mpo totondisi nanu ya biso vite.config.jste.

Bobongisa Vite

Na ba dépendances installées mpe dossier ya projet na biso prêt mpo tobanda codage, tokoki sikoyo ko configurer Vite mpe ko tambuisa projet na biso localement.

Fungola vite.config.jsna éditeur na yo. Lokola ezali vide, ekosenga tobakisa mwa config ya boilerplate na yango mpo tokoka kobanda serveur na biso. Eteni oyo ya config eyebisi Vite bazalaki koluka JavaScript ya projet na biso mpe ndenge nini serveur ya développement esengeli e se comporter (kobenda na srcdossier na recharge ya moto).
```
const path = require('path')

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

Na nsima tozali kotondisa src/index.html. Oyo ezali page HTML Vite eko charger na navigateur pona ko utiliser CSS na JS bundled toko bakisa na yango na ba étapes ya sima.

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

Tozali ko inclure mua styling ya Bootstrap awa na div class="container"pe <button>po to mona tango CSS ya Bootstrap ezo charger na Vite.

Sikoyo toza na besoin ya script ya npm pona ko tambuisa Vite. Fungola package.jsonmpe bakisa startscript oyo elakisami awa na nse (esengeli ozala déjà na script ya test). Tokosalela script oyo pona kobanda serveur na biso ya Vite dev local.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Mpe na nsuka, tokoki kobanda Vite. Na my-projectdossier na terminal na yo, sala script wana ya sika ya npm oyo ebakisami:
```
npm start
```

Na eteni elandi mpe ya nsuka ya buku oyo, tokokɔtisa CSS mpe JavaScript nyonso ya Bootstrap.

Kokɔtisa na Bootstrap

Bobongisa importation ya Sass ya Bootstrap na vite.config.js. Fisyé ya bobongisi na yo esili sikawa mpe esengeli kokokana na eteni oyo ezali awa na nse. Eteni se moko ya sika awa ezali resolveeteni —tosalelaka oyo mpo na kobakisa alias na ba fichiers na biso ya source na kati node_modulesmpo na kobatela ba importations pete lokola ekoki.
```
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
  }
}
```
Sikoyo, to importer CSS ya Bootstrap. Bakisa oyo elandi na mpo src/scss/styles.scssna kokɔtisa nyonso ya Bootstrap ya source Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Okoki pe ko importer ba feuilles de style na biso moko moko soki olingi. Tanga ba docs na biso ya import ya Sass pona ba détails.
Na sima to charger CSS pe to importer JavaScript ya Bootstrap. Bakisa oyo elandi na src/js/main.jsmpo na kozwa CSS mpe kokɔtisa JS nyonso ya Bootstrap. Popper ekozala importé automatiquement na nzela ya Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Okoki mpe kokɔtisa ba plugins ya JavaScript mokomoko soki esengeli mpo na kobatela bonene ya ba paquets na nse:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Tanga ba docs na biso ya JavaScript pona ba informations ebele na ndenge ya kosalela ba plugins ya Bootstrap.
Mpe osilisi! 🎉 Na source ya Bootstrap Sass na JS entièrement chargé, serveur ya développement local na yo esengeli sikoyo ezala boye.

Sikoyo okoki kobanda kobakisa ba composants nionso ya Bootstrap oyo olingi kosalela. Bozala sûr ya kotala projet ya exemple ya Vite mobimba pona ndenge ya ko inclure Sass personnalisé supplémentaire pe ko optimiser build na yo en important kaka ba parties ya CSS na JS ya Bootstrap oyo oza na besoin na yango.

Omoni eloko moko ya mabe to esi esila awa? Svp fungola likambo moko na GitHub . Ozali na mposa ya lisalisi mpo na kosilisa mikakatano? Luka to banda lisolo na GitHub.