Bootstrap & Vite

Panduan resmi tentang cara memasukkan dan menggabungkan CSS dan JavaScript Bootstrap dalam proyek Anda menggunakan Vite.

Di halaman ini

Ingin melompat ke akhir? Unduh kode sumber dan demo kerja untuk panduan ini dari repositori twbs/examples . Anda juga dapat membuka contoh di StackBlitz untuk pengeditan langsung.

Mempersiapkan

Kami sedang membangun proyek Vite dengan Bootstrap dari awal, jadi ada beberapa prasyarat dan langkah awal sebelum kami benar-benar dapat memulai. Panduan ini mengharuskan Anda untuk menginstal Node.js dan beberapa keakraban dengan terminal.

Buat folder proyek dan atur npm. Kami akan membuat my-projectfolder dan menginisialisasi npm dengan -yargumen untuk menghindarinya menanyakan semua pertanyaan interaktif kepada kami.
```
mkdir my-project && cd my-project
npm init -y
```
Instal Vite. Tidak seperti panduan Webpack kami, hanya ada satu ketergantungan alat build di sini. Kami gunakan --save-devuntuk memberi sinyal bahwa ketergantungan ini hanya untuk penggunaan pengembangan dan bukan untuk produksi.
```
npm i --save-dev vite
```
Instal Bootstrap. Sekarang kita dapat menginstal Bootstrap. Kami juga akan menginstal Popper karena dropdown, popover, dan tooltips kami bergantung padanya untuk pemosisiannya. Jika Anda tidak berencana menggunakan komponen tersebut, Anda dapat menghilangkan Popper di sini.
```
npm i --save bootstrap @popperjs/core
```
Instal ketergantungan tambahan. Selain Vite dan Bootstrap, kita memerlukan ketergantungan lain (Sass) untuk mengimpor dan menggabungkan CSS Bootstrap dengan benar.
```
npm i --save-dev sass
```

Sekarang setelah semua dependensi yang diperlukan diinstal dan disiapkan, kita dapat mulai bekerja membuat file proyek dan mengimpor Bootstrap.

Struktur proyek

Kami telah membuat my-projectfolder dan menginisialisasi npm. Sekarang kita juga akan membuat srcfolder, stylesheet, dan file JavaScript untuk melengkapi struktur proyek. Jalankan yang berikut dari my-project, atau secara manual buat folder dan struktur file yang ditunjukkan di bawah ini.

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

Setelah selesai, proyek lengkap Anda akan terlihat seperti ini:

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

Pada titik ini, semuanya berada di tempat yang tepat, tetapi Vite tidak akan berfungsi karena kami belum mengisinya vite.config.js.

Konfigurasikan Vite

Dengan dependensi terinstal dan folder proyek kami siap untuk memulai pengkodean, kami sekarang dapat mengonfigurasi Vite dan menjalankan proyek kami secara lokal.

Buka vite.config.jsdi editor Anda. Karena kosong, kita perlu menambahkan beberapa konfigurasi boilerplate sehingga kita dapat memulai server kita. Bagian konfigurasi ini memberi tahu Vite untuk mencari JavaScript proyek kami dan bagaimana server pengembangan harus berperilaku (menarik dari srcfolder dengan hot reload).
```
const path = require('path')

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

Selanjutnya kita isi src/index.html. Ini adalah halaman HTML yang akan dimuat Vite di browser untuk menggunakan paket CSS dan JS yang akan kami tambahkan di langkah selanjutnya.

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

Kami menyertakan sedikit gaya Bootstrap di sini dengan div class="container"dan <button>agar kami melihat ketika CSS Bootstrap dimuat oleh Vite.

Sekarang kita membutuhkan skrip npm untuk menjalankan Vite. Buka package.jsondan tambahkan startskrip yang ditunjukkan di bawah ini (Anda seharusnya sudah memiliki skrip pengujian). Kami akan menggunakan skrip ini untuk memulai server pengembang Vite lokal kami.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Dan akhirnya, kita bisa memulai Vite. Dari my-projectfolder di terminal Anda, jalankan skrip npm yang baru ditambahkan:
```
npm start
```

Di bagian berikutnya dan terakhir dari panduan ini, kita akan mengimpor semua CSS dan JavaScript Bootstrap.

Impor Bootstrap

Siapkan impor Sass Bootstrap di vite.config.js. File konfigurasi Anda sekarang selesai dan harus cocok dengan cuplikan di bawah ini. Satu-satunya bagian baru di sini adalah resolvebagian—kami menggunakan ini untuk menambahkan alias ke file sumber kami di dalam node_modulesuntuk menjaga impor sesederhana mungkin.
```
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
  }
}
```
Sekarang, mari impor CSS Bootstrap. Tambahkan yang berikut ini untuk src/scss/styles.scssmengimpor semua sumber Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Anda juga dapat mengimpor stylesheet kami satu per satu jika Anda mau. Baca dokumen impor Sass kami untuk detailnya.
Selanjutnya kita memuat CSS dan mengimpor JavaScript Bootstrap. Tambahkan yang berikut ini untuk src/js/main.jsmemuat CSS dan mengimpor semua JS Bootstrap. Popper akan diimport secara otomatis melalui Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Anda juga dapat mengimpor plugin JavaScript satu per satu sesuai kebutuhan untuk menjaga ukuran bundel tetap rendah:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Baca dokumen JavaScript kami untuk informasi lebih lanjut tentang cara menggunakan plugin Bootstrap.
Dan Anda sudah selesai! Dengan Sass dan JS sumber Bootstrap terisi penuh, server pengembangan lokal Anda sekarang akan terlihat seperti ini.

Sekarang Anda dapat mulai menambahkan komponen Bootstrap apa pun yang ingin Anda gunakan. Pastikan untuk memeriksa proyek contoh Vite lengkap tentang cara memasukkan Sass kustom tambahan dan mengoptimalkan build Anda dengan mengimpor hanya bagian CSS dan JS Bootstrap yang Anda butuhkan.

Lihat sesuatu yang salah atau ketinggalan zaman di sini? Silakan buka masalah di GitHub . Butuh bantuan pemecahan masalah? Cari atau mulai diskusi di GitHub.