Afɔkpa ƒe ƒuƒoƒo & Vite

Mɔfiame si dziɖuɖua da asi ɖo na alesi nàde Bootstrap ƒe CSS kple JavaScript wò dɔa me ahaƒo wo nu ƒu to Vite zazã me.

Le axa sia dzi

Àdi be yeadzo ayi nuwuwua? Wɔ mɔfiame sia ƒe dzɔtsoƒe ƒe nuŋɔŋlɔ kple dɔwɔwɔ ƒe wɔwɔfia tso twbs/examples ƒe nudzraɖoƒe . Àteŋu aʋu kpɔɖeŋua hã le StackBlitz me hena ɖɔɖɔɖo le agbe me.

Ɖo anyi

Míele Vite dɔ aɖe tum kple Bootstrap tso gɔmedzedzea me ke, eyata nudidi aɖewo li do ŋgɔ kple afɔɖeɖe siwo le ŋgɔ hafi míate ŋu adze egɔme ŋutɔŋutɔ. Mɔfiame sia bia be nàda Node.js ɖe wò kɔmpiuta dzi eye nànya nu tso terminal la ŋu vie.

Wɔ dɔ ƒe agbalẽdzraɖoƒe eye nàɖo npm. Míawɔ my-projectagbalẽdzraɖoƒea eye míadze npm gɔme kple -ynyaʋiʋlia be wòagabia nya siwo katã wotsɔ wɔa dɔe la mí o.
```
mkdir my-project && cd my-project
npm init -y
```
De Vite ɖe wò kɔmpiuta dzi. To vovo na míaƒe Webpack mɔfiame la, xɔtudɔwɔnu ɖeka koe li si dzi woanɔ te ɖo le afisia. Míezãnɛ --save-devtsɔ ɖea dzesi be ŋgɔyiyi zazã koe ŋuɖoɖo ɖe nu ŋu sia nye ke menye nuwɔwɔ ta o.
```
npm i --save-dev vite
```
De Bootstrap la ɖe wò kɔmpiuta dzi. Fifia míate ŋu aɖo Bootstrap ɖe wò kɔmpiuta dzi. Míaɖo Popper hã ɖe eme elabena míaƒe dropdowns, popovers, kple dɔwɔnu ƒe aɖaŋuɖoɖowo nɔ te ɖe edzi hena woƒe nɔƒe. Ne mèɖoe be yeazã akpa mawo o la, àte ŋu aɖe Popper ɖa le afisia.
```
npm i --save bootstrap @popperjs/core
```
De nusiwo dzi woanɔ te ɖo kpee ɖe eme. Tsɔ kpe ɖe Vite kple Bootstrap ŋu la, míehiã dependency bubu (Sass) be míatsɔ Bootstrap ƒe CSS la ade eme nyuie ahaƒoe nu ƒu ɖekae.
```
npm i --save-dev sass
```

Fifia si míeɖo dependencies siwo katã hiã la ɖe ɖoɖo nu eye míeɖo wo ɖe ɖoɖo nu la, míate ŋu adze dɔ gɔme awɔ dɔa ƒe faɛlwo kple Bootstrap tsɔtsɔ va eme.

Dɔa ƒe ɖoɖowɔwɔ

Míewɔ my-projectagbalẽdzraɖoƒea xoxo eye míedze npm gɔme. Fifia míawɔ míaƒe srcagbalẽdzraɖoƒe, atsyãgbalẽ, kple JavaScript faɛl hã be míaƒo dɔa ƒe ɖoɖo nu ƒu. Wɔ nusiwo gbɔna tso my-project, alo tsɔ asi wɔ agbalẽdzraɖoƒe kple faɛl ƒe ɖoɖo si woɖe fia le ete.

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

Ne èwu enu la, ele be wò dɔ bliboa nanɔ ale:

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

Le afisia la, nusianu le teƒe nyuitɔ, gake Vite mawɔ dɔ o elabena míekpe míaƒe vite.config.jshaɖe o.

Ðoɖowɔwɔ ɖe Vite ŋu

Esi woda nusiwo dzi woanɔ te ɖo eye míaƒe dɔa ƒe agbalẽdzraɖoƒe le klalo na mí be míadze kɔdaɖoɖo gɔme la, míate ŋu aɖo Vite azɔ eye míawɔ míaƒe dɔa le nutoa me.

Ʋu vite.config.jsle wò nuŋlɔla me. Esi wònye be ele ƒuƒlu ta la, ahiã be míatsɔ boilerplate config aɖewo akpe ɖe eŋu ale be míate ŋu adze míaƒe server gɔme. config ƒe akpa sia gblɔ na Vite be woadi míaƒe dɔa ƒe JavaScript kple alesi wòle be ŋgɔyiyidɔdzikpɔla nawɔ nui (he tso srcagbalẽdzraɖoƒea kple hot reload).
```
const path = require('path')

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

Eyome míekpea src/index.html. Esia nye HTML axa si Vite atsɔ ade web-browser la me be wòazã CSS kple JS si woƒo ƒu la atsɔ akpe ɖe eŋu le afɔɖeɖe siwo gbɔna me.

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

Míele Bootstrap ƒe atsyã vi aɖe dem afisia kple div class="container"kple <button>ale be míakpɔ ne Bootstrap ƒe CSS la le agba me to Vite dzi.

Fifia míehiã npm script be míate ŋu awɔ Vite. Ʋu package.jsoneye nàtsɔ startnuŋɔŋlɔ si woɖe fia le ete la akpe ɖe eŋu (ele be dodokpɔ nuŋɔŋlɔa nanɔ asiwò xoxo). Míazã ŋɔŋlɔdzesi sia atsɔ adze míaƒe Vite dev server si le mia gbɔ la gɔme.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Eye mlɔeba la, míate ŋu adze Vite gɔme. Tso my-projectagbalẽdzraɖoƒe si le wò terminal me la, wɔ npm ŋɔŋlɔdzesi yeye ma si nètsɔ kpe ɖe eŋu la:
```
npm start
```

Le mɔfiame sia ƒe akpa si kplɔe ɖo kple mamlɛtɔ me la, míaxɔ Bootstrap ƒe CSS kple JavaScript katã.

Tsɔ Bootstrap la va dukɔa me

Ðo Bootstrap ƒe Sass import le vite.config.js. Wò ɖoɖowɔɖi faɛl la wu enu azɔ eye ele be wòasɔ kple akpa si le ete la. Akpa yeye ɖeka kolia si le afisiae nye resolveakpaa—míezãa esia tsɔ tsɔa ŋkɔ bubu kpena ɖe míaƒe dzɔtsoƒe faɛlwo ŋu le eme node_modulesbe nusiwo wotsɔ tso duta vɛ nanɔ bɔbɔe alesi míate ŋui.
```
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
  }
}
```
Azɔ, mina míatsɔ Bootstrap ƒe CSS la ade eme. Tsɔ nusiwo gbɔna kpe ɖe eŋu src/scss/styles.scssbe nàxɔ Bootstrap ƒe dzɔtsoƒe Sass katã.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Àte ŋu atsɔ míaƒe atsyãgbalẽwo hã ava ɖekaɖeka ne èdi. Xlẽ míaƒe Sass import docs hena numeɖeɖe bubuwo.
Eyome míetsɔa CSS la dea eme eye míetsɔa Bootstrap ƒe JavaScript la vaa eme. Tsɔ nusiwo gbɔna kpe ɖe eŋu src/js/main.jsbe nàtsɔ CSS la ade eme eye nàxɔ Bootstrap ƒe JS la katã. Woatsɔ Popper ava le eɖokui si to Bootstrap dzi.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Àteŋu atsɔ JavaScript ƒe kpeɖeŋutɔwo hã ava ɖekaɖeka alesi wòhiã be nàna bundle ƒe lolomewo naɖiɖi:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Xlẽ míaƒe JavaScript docs hena nyatakaka bubuwo tso alesi nàzã Bootstrap ƒe plugins ŋu.
Eye èwu enu! 🎉 Esi Bootstrap ƒe dzɔtsoƒe Sass kple JS tsɔ agba bliboe la, ele be wò nutoa me ŋgɔyiyi dɔdzikpɔla nanɔ abe alea ene azɔ.

Fifia àteŋu adze Bootstrap ƒe akpa ɖesiaɖe si nèdi be yeazã la tsɔtsɔ kpee gɔme. Kpɔ egbɔ be yekpɔ Vite ƒe kpɔɖeŋudɔ bliboa hena alesi nàde Sass tɔxɛ bubuwo eme eye nàwɔ wò xɔtutu wòanyo wu to Bootstrap ƒe CSS kple JS ƒe akpa siwo nèhiã la ko tsɔtsɔ va eme.

Èkpɔ nane si mesɔ o alo do xoxo le afisiaa? Taflatse ʋu nya aɖe le GitHub . Èhiã kpekpeɖeŋu le kuxiwo gbɔ kpɔkpɔ mea? Di alo dze numedzodzro gɔme le GitHub.