Bootstrap & Vite ka baara

Gafe ofisiyali min bɛ Bootstrap ka CSS ni JavaScript doncogo n’u faralen ɲɔgɔn kan i ka porozɛ kɔnɔ ni Vite ye.

Nin ɲɛ in kan

Aw b’a fɛ ka tɛmɛn ka taa a laban na wa? Aw ye nin gafe in ka source code ni baarakɛcogo jiracogo telesarse ka bɔ twbs/examples marayɔrɔ la . Aw bɛ se fana ka misali da wuli StackBlitz kɔnɔ walasa ka ɲɛfɔli ɲɛnama sɔrɔ.

Ka bila sen kan

An bɛ Vite porozɛ dɔ jɔ ni Bootstrap ye ka bɔ fɛn fɔlɔ la, o la, fɛn dɔw bɛ yen minnu bɛ se ka kɛ sani an ka se ka daminɛ tiɲɛ na. Nin gafe in b’a ɲini i fɛ i ka Node.js sigi sen kan ani ka dɔnniya dɔw sɔrɔ terminal kan.

Porozɛ foli dɔ dabɔ ani ka npm sigi sen kan. An bɛna my-projectfoli Dabɔ ka npm daminɛ ni -yargument ye walasa a kana ɲininkaliw bɛɛ Kɛ an na minnu bɛ ɲɔgɔn Dòn.
```
mkdir my-project && cd my-project
npm init -y
```
Vite sigi sen kan. A tɛ i n’a fɔ an ka Webpack gafe, jɔli baarakɛminɛn kelen dɔrɔn de bɛ yan. An bɛ baara Kɛ --save-devk’a Jira ko nin jɔrɔnanko in ye yiriwali baara dɔrɔn de ye wa a tɛ Kɛ sɛnɛko ye.
```
npm i --save-dev vite
```
Bootstrap sigi sen kan. Sisan an bɛ se ka Bootstrap in sigi sen kan. An bɛna Popper fana sigi sen kan bawo an ka dropdowns, popovers, ani tooltips bɛ da a kan u jɔyɔrɔko la. Ni aw ma labɛn kɛ ka baara kɛ ni o yɔrɔw ye, aw bɛ se ka Popper bɔ yan.
```
npm i --save bootstrap @popperjs/core
```
Aw bɛ dependency wɛrɛw sigi sen kan. Ka fara Vite ni Bootstrap kan, an mago bɛ dependency wɛrɛ la (Sass) walasa ka Bootstrap ka CSS ladon ka ɲɛ ani k’a fara ɲɔgɔn kan.
```
npm i --save-dev sass
```

Sisan, an ye dependencies (daɲɛw) wajibiyalenw bɛɛ Sìgi sen kan ani ka setup (dadon) Kɛ, an bɛ Se ka Taa baara la ka poroze filenw Dabɔ ani ka Bootstrap (Bootstrap) Dòn.

Porozɛw sigicogo

An ye my-projectfoli Dabɔ kaban ka npm daminɛ. Sisan an bɛna an ka srcfoli, stylesheet ani JavaScript file fana Dabɔ walasa ka porozɛ in jɔcogo Lamini. Aw bɛ nin wale ninnu kɛ ka bɔ my-project, walima aw bɛ foli ni dosiyew jɔcogo da aw bolo la min jiralen bɛ jukɔrɔ.

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

Ni aw ye a kɛ ka ban, aw ka poroze dafalen ka kan ka kɛ nin cogo la:

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

Nin waati in na, fɛn bɛɛ bɛ yɔrɔ ɲuman na, nka Vite tɛna baara kɛ bawo an ma an ka fa vite.config.jsfɔlɔ.

Vite (Vite) labɛn

Ni dependencies (daɲɛw) sigilen don ani an ka poroze foli labɛnnen don an ka se ka kodɔnni daminɛ, an bɛ se sisan ka Vite labɛn ani k’an ka poroze boli sigida la.

Da wuli vite.config.jsi ka editor kɔnɔ. Komin a ye blank ye, an bɛna a ɲini ka boilerplate config dɔw fara a kan walasa an ka se k’an ka server daminɛ. Nin yɔrɔ in config b’a Fɔ Vite ye ko an ka an ka porozɛ ka JavaScript Лini ani yiriwali-sɛrɛkili ka kan ka Kɛ cogo min na (ka Bɔ srcfoli la ni hot reload ye).
```
const path = require('path')

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

O kɔfɛ an bɛ a dafa src/index.html. Nin ye HTML ɲɛ ye Vite bɛna min Lase navigatɔrɔn na walasa ka baara Kɛ ni CSS ni JS bundlelenw ye an bɛna minnu Fàra a kan kɔfɛtaama na.

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

An bɛ Bootstrap styling dɔɔnin Dòn yan ni div class="container"ani <button>walasa an k'a Ye tuma min na Bootstrap ka CSS bɛ Lase Vite fɛ.

Sisan an mago bɛ npm script na walasa ka Vite baara. Aw package.jsonbɛ startsɛbɛnni min jira jukɔrɔ, o da wuli ka a fara a kan (aw ka kan ka sɛgɛsɛgɛli sɛbɛn sɔrɔ kaban). An bɛna baara kɛ ni nin sɛbɛnni in ye walasa k’an ka sigida Vite dev server daminɛ.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Wa a laban na, an bɛ se ka Vite daminɛ. Ka bɔ my-projectfoli la i ka terminal kɔnɔ, i ka o npm script kura faralen in baara:
```
npm start
```

Nin gafe in dakun nata ni laban na, an bɛna Bootstrap ka CSS ni JavaScript bɛɛ ladon.

Import kɛ Bootstrap la

Bootstrap ka Sass import sigi sen kan vite.config.js. I ka labɛnni dosiye dafara sisan, wa a ka kan ka bɛn ni jukɔrɔla yɔrɔ ye. Yɔrɔ kura kelen min bɛ yan, o ye resolvedakun ye—an bɛ baara Kɛ ni nin ye walasa ka tɔgɔ wɛrɛ Fàra an ka source files (dakunw) kan kɔnɔna na node_moduleswalasa ka import (donni) nɔgɔya cogo min na.
```
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
  }
}
```
Sisan, an ka Bootstrap ka CSS ladon. Aw bɛ ninnu fara a kan walasa src/scss/styles.scsska Bootstrap ka source Sass bɛɛ ladon.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Aw bɛ se fana ka an ka stylesheets (sɛbɛnniw) ladon kelen-kelen n’aw b’a fɛ. Aw ye an ka Sass import docs kalan walasa ka kunnafoni wɛrɛw sɔrɔ.
O kɔ fɛ an bɛ CSS doni ka Bootstrap ka JavaScript ladon. Aw bɛ ninnu fara a kan walasa src/js/main.jska CSS doni ani ka Bootstrap ka JS bɛɛ ladon. Popper bɛna don a yɛrɛma Bootstrap fɛ.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Aw bɛ se fana ka JavaScript plugins kelen-kelen bɛɛ ladon i n’a fɔ a mago bɛ cogo min na walasa ka bundle hakɛw dɔgɔya:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Aw ye an ka JavaScript sɛbɛnw kalan walasa ka kunnafoni wɛrɛw sɔrɔ Bootstrap ka baarakɛminɛnw baaracogo kan.
Ani i ye baara kɛ ka ban! 🎉 Ni Bootstrap ka source Sass ni JS bɛ chargement dafalen na, i ka sigida yiriwali server ka kan ka kɛ nin cogo la sisan.

Sisan i bɛ se ka Bootstrap yɔrɔ o yɔrɔ fara a kan i b’a fɛ ka baara kɛ ni min ye. Aw ye aw jija ka Vite misali porozɛ dafalen lajɛ walasa ka Sass ladamu wɛrɛw fara a kan cogo min na ani ka aw ka jɔli kɛcogo ɲɛ ni Bootstrap ka CSS ni JS yɔrɔ minnu dɔrɔn de donna aw mago bɛ minnu na.

Aw ye fɛn dɔ ye min man ɲi walima min tɛmɛna yan wa? Aw ye ko dɔ da wuli GitHub kan . Aw mago bɛ dɛmɛ na gɛlɛyaw ɲɛnabɔli la wa? Aw ye ɲinini kɛ walima ka baro daminɛ GitHub kan.