Bootstrap ug Vite

Ang opisyal nga giya kung unsaon pag-apil ug pag-bundle sa Bootstrap's CSS ug JavaScript sa imong proyekto gamit ang Vite.

Niini nga panid

Gusto nga molaktaw hangtod sa katapusan? I-download ang source code ug working demo para niini nga giya gikan sa twbs/examples repository . Mahimo usab nimo ablihan ang panig-ingnan sa StackBlitz alang sa live nga pag-edit.

Setup

Nagtukod kami usa ka proyekto sa Vite nga adunay Bootstrap gikan sa wala, mao nga adunay pipila nga mga kinahanglanon ug mga lakang sa unahan sa dili pa kami makasugod. Kini nga giya nagkinahanglan kanimo nga ma-install ang Node.js ug pipila ka pamilyar sa terminal.

Paghimo og folder sa proyekto ug pag-setup sa npm. Himoon namo ang my-projectfolder ug sugdan ang npm gamit ang -yargumento aron malikayan kini nga mangutana kanamo sa tanang interactive nga mga pangutana.
```
mkdir my-project && cd my-project
npm init -y
```
I-install ang Vite. Dili sama sa among giya sa Webpack, adunay usa ra ka pagsalig sa tool sa pagtukod dinhi. Gigamit namon ang --save-devpagsenyas nga kini nga pagsalig alang lamang sa paggamit sa kalamboan ug dili alang sa produksiyon.
```
npm i --save-dev vite
```
I-install ang Bootstrap. Karon mahimo na namon i-install ang Bootstrap. I-install usab namo ang Popper tungod kay ang among mga dropdown, popovers, ug tooltips nagdepende niini alang sa ilang pagposisyon. Kung wala ka nagplano sa paggamit sa mga sangkap, mahimo nimong laktawan ang Popper dinhi.
```
npm i --save bootstrap @popperjs/core
```
I-install ang dugang nga pagsalig. Dugang pa sa Vite ug Bootstrap, nanginahanglan kami og laing dependency (Sass) aron husto ang pag-import ug pagbugkos sa Bootstrap's CSS.
```
npm i --save-dev sass
```

Karon nga naa na namo ang tanang gikinahanglang mga dependency nga na-install ug gi-setup, makatrabaho na kami sa paghimo sa mga file sa proyekto ug pag-import sa Bootstrap.

Istruktura sa proyekto

Nahimo na namo ang my-projectfolder ug gisugdan ang npm. Karon maghimo usab kami sa among srcfolder, stylesheet, ug file sa JavaScript aron malibot ang istruktura sa proyekto. Pagdalagan ang mosunud gikan sa my-project, o kamut paghimo sa folder ug istruktura sa file nga gipakita sa ubos.

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

Kung nahuman na ka, ang imong kompleto nga proyekto kinahanglan nga ingon niini:

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

Niining puntoha, naa sa saktong lugar ang tanan, apan dili molihok si Vite tungod kay wala pa namon mapuno ang among vite.config.js.

I-configure ang Vite

Uban sa mga dependency nga na-install ug ang among project folder andam na alang kanamo sa pagsugod sa coding, mahimo na namon nga i-configure ang Vite ug ipadagan ang among proyekto sa lokal.

Ablihi vite.config.jssa imong editor. Tungod kay blangko kini, kinahanglan namong idugang ang pipila ka boilerplate config niini aron makasugod kami sa among server. Kini nga bahin sa config nagsulti sa Vite nga pangitaon ang JavaScript sa among proyekto ug kung giunsa ang paggawi sa development server (pagbira gikan sa srcfolder nga adunay init nga pag-reload).
```
const path = require('path')

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

Sunod atong pun-on src/index.html. Kini ang HTML nga panid nga ikarga ni Vite sa browser aron magamit ang gibugkos nga CSS ug JS nga among idugang niini sa ulahi nga mga lakang.

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

Among gilakip ang gamay nga pag-istilo sa Bootstrap dinhi uban ang div class="container"ug <button>aron atong makita kung ang CSS sa Bootstrap gikarga ni Vite.

Karon kinahanglan namon ang usa ka npm script aron makadagan ang Vite. Ablihi package.jsonug idugang ang startscript nga gipakita sa ubos (kinahanglan naa na nimo ang test script). Gamiton namo kini nga script aron masugdan ang among lokal nga Vite dev server.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ug sa kataposan, makasugod na ta sa Vite. Gikan sa my-projectfolder sa imong terminal, padagana ang bag-ong gidugang nga npm script:
```
npm start
```

Sa sunod ug kataposang seksyon niini nga giya, atong i-import ang tanang CSS ug JavaScript sa Bootstrap.

Import nga Bootstrap

I-set up ang Sass import sa Bootstrap sa vite.config.js. Kompleto na ang imong configuration file ug kinahanglang motakdo sa snippet sa ubos. Ang bag-o lang nga bahin dinhi mao ang resolveseksyon—gigamit namo kini aron makadugang ug alyas sa among mga source file sa sulod node_modulesaron mapadayon ang mga import nga yano kutob sa mahimo.
```
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
  }
}
```
Karon, atong i-import ang Bootstrap's CSS. Idugang ang mosunod aron src/scss/styles.scssma-import ang tanan nga gigikanan sa Bootstrap nga Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Mahimo usab nimo nga i-import ang among mga stylesheet nga tagsa-tagsa kung gusto nimo. Basaha ang among Sass import docs para sa mga detalye.
Sunod among gikarga ang CSS ug gi-import ang JavaScript sa Bootstrap. Idugang ang mosunod aron src/js/main.jsmakarga ang CSS ug i-import ang tanan nga JS sa Bootstrap. Ang Popper awtomatikong ma-import pinaagi sa Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Mahimo ka usab nga mag-import sa mga plugin sa JavaScript nga tagsa-tagsa kung gikinahanglan aron mapadayon ang mga gidak-on sa bundle:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Basaha ang among JavaScript docs para sa dugang nga impormasyon kon unsaon paggamit ang Bootstrap's plugins.
Ug nahuman ka! 🎉 Uban sa tinubdan sa Bootstrap nga Sass ug JS nga bug-os nga na-load, ang imong lokal nga development server kinahanglan nga ingon niini karon.

Karon mahimo ka magsugod sa pagdugang bisan unsang mga sangkap sa Bootstrap nga gusto nimo gamiton. Siguruha nga susihon ang kompleto nga proyekto sa pananglitan sa Vite kung giunsa paglakip ang dugang nga kostumbre nga Sass ug pag-optimize sa imong pagtukod pinaagi sa pag-import lamang sa mga bahin sa CSS ug JS sa Bootstrap nga imong kinahanglan.

Nakita ba nimo ang usa ka butang nga sayup o wala sa panahon dinhi? Palihug ablihi ang usa ka isyu sa GitHub . Nagkinahanglan ug tabang sa pag-troubleshoot? Pangitaa o pagsugod og diskusyon sa GitHub.