Bootstrap & Vite

Pandhuan resmi babagan carane nyakup lan mbundel CSS lan JavaScript Bootstrap ing proyek sampeyan nggunakake Vite.

Ing kaca iki

Pengin skip nganti pungkasan? Ngundhuh kode sumber lan demo sing digunakake kanggo pandhuan iki saka gudang twbs/conto . Sampeyan uga bisa mbukak conto ing StackBlitz kanggo nyunting langsung.

Setup

Kita lagi mbangun proyek Vite karo Bootstrap saka awal, supaya ana sawetara prasyarat lan langkah ngarep sadurunge kita bisa miwiti tenan. Pandhuan iki mbutuhake sampeyan duwe Node.js diinstal lan sawetara menowo karo terminal.

Nggawe folder proyek lan persiyapan npm. Kita bakal nggawe my-projectfolder lan miwiti npm kanthi -yargumen supaya ora takon kabeh pitakonan interaktif.
```
mkdir my-project && cd my-project
npm init -y
```
Instal Vite. Ora kaya pandhuan Webpack, mung ana siji ketergantungan alat mbangun ing kene. Kita digunakake --save-devkanggo menehi tandha yen ketergantungan iki mung kanggo panggunaan pembangunan lan ora kanggo produksi.
```
npm i --save-dev vite
```
Instal Bootstrap. Saiki kita bisa nginstal Bootstrap. Kita uga bakal nginstal Popper amarga dropdowns, popovers, lan tooltips gumantung ing posisi. Yen sampeyan ora rencana nggunakake komponen kasebut, sampeyan bisa ngilangi Popper ing kene.
```
npm i --save bootstrap @popperjs/core
```
Instal ketergantungan tambahan. Saliyane Vite lan Bootstrap, kita butuh ketergantungan liyane (Sass) kanggo ngimpor lan mbundel CSS Bootstrap kanthi bener.
```
npm i --save-dev sass
```

Saiki kita wis nginstal lan nyetel kabeh dependensi sing dibutuhake, kita bisa nggawe file proyek lan ngimpor Bootstrap.

Struktur proyek

Kita wis nggawe my-projectfolder kasebut lan miwiti npm. Saiki kita uga bakal nggawe srcfolder, stylesheet, lan file JavaScript kanggo ngrampungake struktur proyek. Jalanake ing ngisor iki saka my-project, utawa nggawe folder lan struktur file kanthi manual ing ngisor iki.

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

Yen wis rampung, proyek lengkap sampeyan kudu katon kaya iki:

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

Ing wektu iki, kabeh wis ana ing panggonan sing bener, nanging Vite ora bisa digunakake amarga durung ngisi vite.config.js.

Konfigurasi Vite

Kanthi dependensi diinstal lan folder proyek kita siap kanggo miwiti coding, saiki kita bisa ngatur Vite lan mbukak proyek kita sacara lokal.

Bukak vite.config.jsing editor sampeyan. Amarga kosong, kita kudu nambah sawetara konfigurasi boilerplate supaya bisa miwiti server. Bagean konfigurasi iki ngandhani Vite supaya nggoleki JavaScript proyek kita lan kepiye server pangembangan kudu tumindak (narik saka srcfolder kanthi reload panas).
```
const path = require('path')

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

Sabanjure kita ngisi src/index.html. Iki minangka kaca HTML sing bakal diunggahake Vite ing browser kanggo nggunakake CSS lan JS sing dibundel sing bakal ditambahake ing langkah sabanjure.

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

Kita kalebu sawetara gaya Bootstrap ing kene karo div class="container"lan <button>supaya kita bisa ndeleng nalika CSS Bootstrap dimuat dening Vite.

Saiki kita butuh skrip npm kanggo mbukak Vite. Bukak package.jsonlan tambahake startskrip sing ditampilake ing ngisor iki (sampeyan kudu duwe skrip tes). Kita bakal nggunakake skrip iki kanggo miwiti server dev Vite lokal kita.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Lan pungkasanipun, kita bisa miwiti Vite. Saka my-projectfolder ing terminal sampeyan, jalanake skrip npm sing mentas ditambahake:
```
npm start
```

Ing bagean sabanjure lan pungkasan kanggo pandhuan iki, kita bakal ngimpor kabeh CSS lan JavaScript Bootstrap.

Ngimpor Bootstrap

Setel impor Sass Bootstrap ing vite.config.js. Berkas konfigurasi sampeyan saiki wis rampung lan kudu cocog karo cuplikan ing ngisor iki. Siji-sijine bagean anyar ing kene yaiku resolvebagean kasebut - kita nggunakake iki kanggo nambah alias menyang file sumber ing njero node_modulessupaya impor tetep gampang.
```
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
  }
}
```
Saiki, ayo ngimpor CSS Bootstrap. Tambah ing ngisor iki kanggo src/scss/styles.scssngimpor kabeh sumber Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Sampeyan uga bisa ngimpor stylesheet kanthi individu yen sampeyan pengin. Waca dokumen impor Sass kanggo rincian.
Sabanjure, kita mbukak CSS lan ngimpor JavaScript Bootstrap. Tambah ing ngisor iki kanggo src/js/main.jsmbukak CSS lan ngimpor kabeh JS Bootstrap. Popper bakal diimpor kanthi otomatis liwat Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Sampeyan uga bisa ngimpor plugin JavaScript siji-siji yen perlu supaya ukuran bundle mudhun:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Waca dokumen JavaScript kanggo informasi luwih lengkap babagan cara nggunakake plugin Bootstrap.
Lan sampeyan wis rampung! 🎉 Kanthi sumber Bootstrap Sass lan JS dimuat kanthi lengkap, server pangembangan lokal sampeyan saiki bakal katon kaya iki.

Saiki sampeyan bisa miwiti nambah komponen Bootstrap sing pengin digunakake. Priksa manawa sampeyan mriksa proyek conto Vite lengkap babagan carane nyakup Sass khusus tambahan lan ngoptimalake bangunan kanthi ngimpor mung bagean saka CSS lan JS Bootstrap sing sampeyan butuhake.

Ndeleng soko salah utawa ketinggalan jaman kene? Mangga mbukak masalah ing GitHub . Perlu bantuan kanggo ngatasi masalah? Telusuri utawa miwiti diskusi ing GitHub.