Bootstrap & Vite

Gid ofisyèl la pou kòman pou w mete ak pake CSS ak JavaScript Bootstrap nan pwojè w la lè l sèvi avèk Vite.

Nan paj sa a

Vle sote nan fen a? Telechaje kòd sous la ak demo k ap travay pou gid sa a nan depo twbs/egzanp yo . Ou kapab tou louvri egzanp lan nan StackBlitz pou koreksyon ap viv la.

Enstalasyon

Nou ap bati yon pwojè Vite ak Bootstrap depi nan grafouyen, kidonk gen kèk kondisyon anvan ak etap anvan nou ka reyèlman kòmanse. Gid sa a mande pou ou gen Node.js enstale ak kèk abitye ak tèminal la.

Kreye yon katab pwojè ak konfigirasyon npm. Nou pral kreye my-projectkatab la epi inisyalize npm ak -yagiman an pou evite li mande nou tout kesyon entèaktif yo.
```
mkdir my-project && cd my-project
npm init -y
```
Enstale Vite. Kontrèman ak gid Webpack nou an, gen sèlman yon sèl depandans zouti bati isit la. Nou itilize --save-devpou siyal ke depandans sa a se sèlman pou itilizasyon devlopman epi pa pou pwodiksyon.
```
npm i --save-dev vite
```
Enstale Bootstrap. Koulye a, nou ka enstale Bootstrap. Nou pral enstale Popper tou paske dropdowns, popovers, ak konsèy sou zouti nou yo depann sou li pou pwezante yo. Si ou pa planifye sou itilize eleman sa yo, ou ka omisyon Popper isit la.
```
npm i --save bootstrap @popperjs/core
```
Enstale depandans adisyonèl. Anplis Vite ak Bootstrap, nou bezwen yon lòt depandans (Sass) pou byen enpòte ak pake CSS Bootstrap la.
```
npm i --save-dev sass
```

Kounye a ke nou gen tout depandans ki nesesè yo enstale ak konfigirasyon, nou ka jwenn nan travay kreye dosye yo pwojè ak enpòte Bootstrap.

Estrikti pwojè

Nou te deja kreye my-projectkatab la ak inisyalize npm. Koulye a, nou pral tou kreye srcdosye nou an, stylesheet, ak JavaScript fichye awondi estrikti pwojè a. Kouri sa ki annapre yo soti nan my-project, oswa manyèlman kreye katab ak estrikti dosye yo montre anba a.

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

Lè w fini, pwojè konplè ou a ta dwe sanble sa a:

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

Nan pwen sa a, tout bagay an bon plas, men Vite pa pral travay paske nou poko ranpli nan nou an vite.config.js.

Konfigirasyon Vite

Avèk depandans yo enstale ak katab pwojè nou an pare pou nou kòmanse kodaj, nou ka kounye a konfigirasyon Vite epi kouri pwojè nou an lokalman.

Louvri vite.config.jsnan editè ou. Depi li vid, nou pral bezwen ajoute kèk konfigirasyon boilerplate nan li pou nou ka kòmanse sèvè nou an. Pati sa a nan konfigirasyon an di Vite yo te chèche JavaScript pwojè nou an ak ki jan sèvè devlopman an ta dwe konpòte (rale soti nan srckatab la ak rechaje cho).
```
const path = require('path')

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

Apre sa nou ranpli src/index.html. Sa a se paj HTML Vite pral chaje nan navigatè a pou itilize CSS ak JS ki pakè nou pral ajoute sou li nan etap pita yo.

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

Nou ap enkli yon ti kras nan stil Bootstrap isit la ak la div class="container"ak <button>pou nou wè lè CSS Bootstrap a chaje pa Vite.

Koulye a, nou bezwen yon script npm pou kouri Vite. Louvri package.jsonepi ajoute startscript ki montre anba a (ou ta dwe deja gen script tès la). Nou pral sèvi ak script sa a pou kòmanse sèvè lokal Vite dev nou an.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Epi finalman, nou ka kòmanse Vite. Soti nan my-projectkatab la nan tèminal ou a, kouri sa a ki fèk ajoute script npm:
```
npm start
```

Nan pwochen ak dènye seksyon gid sa a, nou pral enpòte tout CSS ak JavaScript Bootstrap la.

Enpòte Bootstrap

Mete kanpe enpòte Sass Bootstrap a nan vite.config.js. Fichye konfigirasyon ou an konplè kounye a epi li ta dwe matche ak ti bout ki anba a. Sèl pati nan nouvo isit la se resolveseksyon an—nou itilize sa a pou ajoute yon alyas nan dosye sous nou yo andedan node_modulespou kenbe enpòtasyon yo senp ke posib.
```
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
  }
}
```
Koulye a, an n enpòte CSS Bootstrap la. Ajoute sa ki annapre yo src/scss/styles.scsspou enpòte tout sous Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ou kapab tou enpòte stylesheets nou yo endividyèlman si ou vle. Li dokiman Sass enpòte nou an pou plis detay.
Apre sa, nou chaje CSS la epi enpòte JavaScript Bootstrap la. Ajoute sa ki annapre yo src/js/main.jspou chaje CSS la epi enpòte tout JS Bootstrap la. Popper pral enpòte otomatikman atravè Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Ou ka enpòte grefon JavaScript tou endividyèlman jan sa nesesè pou kenbe gwosè pake yo:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Li dokiman JavaScript nou yo pou plis enfòmasyon sou kijan pou itilize grefon Bootstrap yo.
Epi ou fini! 🎉 Avèk sous Bootstrap Sass ak JS konplètman chaje, sèvè devlopman lokal ou a ta dwe kounye a sanble tankou sa a.

Koulye a, ou ka kòmanse ajoute nenpòt eleman Bootstrap ou vle itilize. Asire w ke w tcheke pwojè egzanp Vite konplè a pou kijan pou w enkli plis Sass koutim epi optimize konstriksyon w lè w enpòte sèlman pati CSS ak JS Bootstrap ou bezwen yo.

Wè yon bagay ki mal oswa demode isit la? Tanpri louvri yon pwoblèm sou GitHub . Bezwen èd pou depanaj? Chèche oswa kòmanse yon diskisyon sou GitHub.