Bootstrap at Vite

Ang opisyal na gabay para sa kung paano isama at i-bundle ang CSS at JavaScript ng Bootstrap sa iyong proyekto gamit ang Vite.

Sa pahinang ito

Gusto mo bang lumaktaw hanggang dulo? I-download ang source code at gumaganang demo para sa gabay na ito mula sa twbs/examples repository . Maaari mo ring buksan ang halimbawa sa StackBlitz para sa live na pag-edit.

Setup

Bumubuo kami ng isang proyekto ng Vite gamit ang Bootstrap mula sa simula, kaya mayroong ilang mga kinakailangan at mga hakbang sa harap bago kami makapagsimula. Ang gabay na ito ay nangangailangan sa iyo na magkaroon ng Node.js na naka-install at ilang pamilyar sa terminal.

Lumikha ng folder ng proyekto at i-setup ang npm. Gagawin namin ang my-projectfolder at pasimulan ang npm gamit ang -yargumento upang maiwasang itanong sa amin ang lahat ng mga interactive na tanong.
```
mkdir my-project && cd my-project
npm init -y
```
I-install ang Vite. Hindi tulad ng aming gabay sa Webpack, mayroon lamang iisang build tool dependency dito. Ginagamit namin --save-devupang hudyat na ang dependency na ito ay para lamang sa paggamit ng development at hindi para sa produksyon.
```
npm i --save-dev vite
```
I-install ang Bootstrap. Ngayon ay maaari na nating i-install ang Bootstrap. Mag-i-install din kami ng Popper dahil ang aming mga dropdown, popover, at tooltip ay nakasalalay dito para sa kanilang pagpoposisyon. Kung hindi mo planong gamitin ang mga bahaging iyon, maaari mong alisin ang Popper dito.
```
npm i --save bootstrap @popperjs/core
```
Mag-install ng karagdagang dependency. Bilang karagdagan sa Vite at Bootstrap, kailangan namin ng isa pang dependency (Sass) upang maayos na mai-import at ma-bundle ang CSS ng Bootstrap.
```
npm i --save-dev sass
```

Ngayon na mayroon na tayong lahat ng kinakailangang dependency na naka-install at naka-setup, maaari na tayong magtrabaho sa paggawa ng mga file ng proyekto at pag-import ng Bootstrap.

Istraktura ng proyekto

Nagawa na namin ang my-projectfolder at sinimulan ang npm. Ngayon ay gagawa din kami ng aming srcfolder, stylesheet, at JavaScript file upang i-round out ang istraktura ng proyekto. Patakbuhin ang sumusunod mula sa my-project, o manu-manong gawin ang folder at istraktura ng file na ipinapakita sa ibaba.

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

Kapag tapos ka na, ang iyong kumpletong proyekto ay dapat magmukhang ganito:

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

Sa puntong ito, nasa tamang lugar ang lahat, ngunit hindi gagana ang Vite dahil hindi vite.config.jspa namin napupunan ang aming.

I-configure ang Vite

Sa mga naka-install na dependency at handa na ang aming folder ng proyekto para sa amin upang simulan ang coding, maaari na naming i-configure ang Vite at patakbuhin ang aming proyekto nang lokal.

Buksan vite.config.jssa iyong editor. Dahil blangko ito, kakailanganin naming magdagdag ng ilang boilerplate config dito para masimulan namin ang aming server. Ang bahaging ito ng config ay nagsasabi kay Vite na hanapin ang JavaScript ng aming proyekto at kung paano dapat kumilos ang development server (pagkuha mula sa srcfolder na may mainit na reload).
```
const path = require('path')

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

Susunod na punan namin src/index.html. Ito ang HTML page na ilo-load ng Vite sa browser upang magamit ang naka-bundle na CSS at JS na idaragdag namin dito sa mga susunod na hakbang.

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

Nagsasama kami ng kaunting pag-istilo ng Bootstrap dito kasama ang div class="container"at <button>para makita namin kapag ni-load ng Vite ang CSS ng Bootstrap.

Ngayon kailangan namin ng isang npm script upang patakbuhin ang Vite. Buksan package.jsonat idagdag ang startscript na ipinapakita sa ibaba (dapat mayroon ka na ng test script). Gagamitin namin ang script na ito upang simulan ang aming lokal na Vite dev server.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
At sa wakas, maaari na nating simulan ang Vite. Mula sa my-projectfolder sa iyong terminal, patakbuhin ang bagong idinagdag na npm script:
```
npm start
```

Sa susunod at huling seksyon sa gabay na ito, ii-import namin ang lahat ng CSS at JavaScript ng Bootstrap.

Mag-import ng Bootstrap

I-set up ang Sass import ng Bootstrap sa vite.config.js. Kumpleto na ang iyong configuration file at dapat tumugma sa snippet sa ibaba. Ang tanging bagong bahagi dito ay ang resolveseksyon—ginagamit namin ito upang magdagdag ng alias sa aming mga source file sa loob node_modulesupang panatilihing simple ang mga pag-import hangga't maaari.
```
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
  }
}
```
Ngayon, i-import natin ang CSS ng Bootstrap. Idagdag ang sumusunod sa src/scss/styles.scssupang i-import ang lahat ng pinagmulan ng Bootstrap na Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Maaari mo ring i-import ang aming mga stylesheet nang paisa-isa kung gusto mo. Basahin ang aming Sass import docs para sa mga detalye.
Susunod na nilo-load namin ang CSS at nag-import ng JavaScript ng Bootstrap. Idagdag ang sumusunod sa src/js/main.jsupang i-load ang CSS at i-import ang lahat ng JS ng Bootstrap. Awtomatikong mai-import ang Popper sa pamamagitan ng Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Maaari ka ring mag-import ng mga plugin ng JavaScript nang paisa-isa kung kinakailangan upang mapanatiling pababa ang mga laki ng bundle:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Basahin ang aming JavaScript docs para sa higit pang impormasyon sa kung paano gamitin ang mga plugin ng Bootstrap.
At tapos ka na! 🎉 Dahil ganap na na-load ang source ng Bootstrap na Sass at JS, dapat ganito na ang hitsura ng iyong lokal na development server.

Ngayon ay maaari kang magsimulang magdagdag ng anumang mga bahagi ng Bootstrap na gusto mong gamitin. Tiyaking tingnan ang kumpletong proyekto ng halimbawa ng Vite para sa kung paano magsama ng karagdagang custom na Sass at i-optimize ang iyong build sa pamamagitan ng pag-import lamang ng mga bahagi ng CSS at JS ng Bootstrap na kailangan mo.

May nakikita kang mali o hindi napapanahon dito? Mangyaring magbukas ng isyu sa GitHub . Kailangan ng tulong sa pag-troubleshoot? Maghanap o magsimula ng talakayan sa GitHub.