Bootstrap & Vite

Ntuziaka gọọmentị maka otu esi etinye na chịkọta Bootstrap's CSS na JavaScript na ọrụ gị site na iji Vite.

Na ibe a

Achọrọ ịmafe na njedebe? Budata koodu iyi yana ngosi ngosi arụ ọrụ maka ntuziaka a site na ebe nchekwa twbs/ihe atụ . Ị nwekwara ike imepe ihe atụ na StackBlitz maka ndezi ndụ.

Melite

Anyị na-eji Bootstrap arụ ọrụ Vite site na ọkọ, yabụ enwere ụfọdụ ihe achọrọ na nzọụkwụ dị n'ihu tupu anyị enwee ike ibido n'ezie. Ntuziaka a chọrọ ka etinyere Node.js yana ụfọdụ amata na njedebe.

Mepụta folda ọrụ wee hazie npm. Anyị ga-emepụta my-projectfolda ahụ wee jiri arụmụka bido npm -yka ọ ghara ịjụ anyị ajụjụ niile gbasara mmekọrịta.
```
mkdir my-project && cd my-project
npm init -y
```
Wụnye Vite. N'adịghị ka ntuziaka Webpack anyị, enwere naanị otu ịdabere na ngwa nrụpụta ebe a. Anyị na-eji --save-devgosi na ndabere a bụ naanị maka iji mmepe ọ bụghị maka mmepụta.
```
npm i --save-dev vite
```
Wụnye Bootstrap. Ugbu a, anyị nwere ike ịwụnye Bootstrap. Anyị ga-etinyekwa Popper ebe ọ bụ na mwụda anyị, popovers, na ndụmọdụ ngwaọrụ dabere na ya maka ọnọdụ ha. Ọ bụrụ na ị naghị eme atụmatụ iji ihe ndị ahụ, ị nwere ike hapụ Popper ebe a.
```
npm i --save bootstrap @popperjs/core
```
Wụnye ndabere ọzọ. Na mgbakwunye na Vite na Bootstrap, anyị chọrọ ndabere ọzọ (Sass) iji bubata na chịkọta CSS Bootstrap nke ọma.
```
npm i --save-dev sass
```

Ugbu a na anyị nwere ihe ndabere niile dị mkpa arụnyere na nhazi, anyị nwere ike ịrụ ọrụ ịmepụta faịlụ ọrụ na ibubata Bootstrap.

Usoro oru ngo

Anyị emepụtala my-projectfolda ahụ wee malite npm. Ugbu a, anyị ga- srcekepụtakwa folda anyị, ụdị mpempe akwụkwọ na faịlụ Javascript iji mechaa usoro ọrụ ahụ. Gbaa ihe ndị a site na my-project, ma ọ bụ jiri aka mepụta folda na nhazi faịlụ egosiri n'okpuru.

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

Mgbe ịmechara, ọrụ gị zuru oke kwesịrị ịdị ka nke a:

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

N'oge a, ihe niile dị n'ebe kwesịrị ekwesị, ma Vite agaghị arụ ọrụ n'ihi na anyị ejupụtabeghị na anyị vite.config.js.

Hazie Vite

Site na etinyere ihe ndabere yana folda ọrụ anyị dị njikere ka anyị malite itinye koodu, anyị nwere ike hazie Vite ugbu a wee rụọ ọrụ anyị na mpaghara.

Mepee vite.config.jsna nchịkọta akụkọ gị. Ebe ọ bụ oghere, anyị ga-mkpa itinye ụfọdụ boilerplate config na ya ka anyị nwee ike malite anyị sava. Akụkụ a nke nhazi ahụ na-agwa Vite ka ọ chọọ JavaScript nke ọrụ anyị yana otu ihe nkesa mmepe kwesịrị isi na-akpa àgwà (si na srcfolda ahụ na-ebugharị ọkụ).
```
const path = require('path')

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

Ọzọ anyị dejupụta src/index.html. Nke a bụ ibe HTML Vite ga-ebuba na ihe nchọgharị ahụ iji jiri CSS jikọtara ya na JS anyị ga-agbakwunye ya na usoro ọzọ.

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

Anyị na-etinye ntakịrị ụdị Bootstrap ebe a div class="container"ka <button>anyị wee hụ mgbe Vite bujuru CSS Bootstrap.

Ugbu a, anyị chọrọ edemede npm iji mee Vite. Mepee package.jsonma tinye startscript egosiri n'okpuru (ịkwesịrị ịnwelarị edemede ule). Anyị ga-eji edemede a malite sava Vite dev nke mpaghara anyị.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
N'ikpeazụ, anyị nwere ike ịmalite Vite. Site na my-projectfolda dị na ọdụ gị, mee ihe npm agbakwunyere ọhụrụ:
```
npm start
```

Na ngalaba na-esote na nke ikpeazụ na ntuziaka a, anyị ga-ebubata Bootstrap CSS na Javascript niile.

Bubata Bootstrap

Hazie mbubata Sass Bootstrap na vite.config.js. Faịlụ nhazi gị ezuola ugbu a ma kwekọọ na snippet dị n'okpuru. Naanị akụkụ ọhụrụ ebe a bụ resolvengalaba-anyị na-eji nke a ịgbakwunye utu aha na faịlụ isi mmalite anyị dị n'ime node_modulesiji mee ka mbubata dị mfe dị ka o kwere mee.
```
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
  }
}
```
Ugbu a, ka anyị bubata Bootstrap's CSS. Tinye ihe ndị a src/scss/styles.scsska ibubata isi mmalite Bootstrap Sass niile.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ị nwekwara ike ibubata ụdị anyị n'otu n'otu ma ọ bụrụ na ịchọrọ. Gụọ akwụkwọ mbubata Sass maka nkọwa.
Ọzọ anyị na-ebu CSS wee bubata JavaScript nke Bootstrap. Tinye ihe ndị a ka src/js/main.jsibunye CSS wee bubata Bootstrap JS niile. A ga-ebubata popper na-akpaghị aka site na Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Ị nwekwara ike ibubata plugins Javascript n'otu n'otu ka ọ dị mkpa iji dobe nha ngwugwu ala:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Gụọ docs Javascript anyị maka ozi ndị ọzọ gbasara otu esi eji plugins Bootstrap.
I mechaala! 🎉 Site na isi mmalite Bootstrap Sass na JS zuru ezu, ihe nkesa mmepe mpaghara gị kwesịrị ịdị ugbu a ka nke a.

Ugbu a ị nwere ike ịmalite ịgbakwunye ngwa Bootstrap ọ bụla ịchọrọ iji. Jide n'aka na ị ga- elele ọrụ ihe atụ Vite zuru ezu maka otu esi etinye Sass omenala ndị ọzọ wee bulie ihe owuwu gị site na ibubata naanị akụkụ Bootstrap's CSS na JS nke ịchọrọ.

Hụ ihe na-adịghị mma ma ọ bụ nke merela ebe a? Biko mepee esemokwu na GitHub . Achọrọ enyemaka nchọpụta nsogbu? Chọọ ma ọ bụ malite mkparịta ụka na GitHub.