Bootstrap & Vite

Panduan rasmi untuk cara memasukkan dan menggabungkan CSS dan JavaScript Bootstrap dalam projek anda menggunakan Vite.

Pada halaman ini

Nak skip sampai habis? Muat turun kod sumber dan demo berfungsi untuk panduan ini daripada repositori twbs/contoh . Anda juga boleh membuka contoh dalam StackBlitz untuk penyuntingan langsung.

Persediaan

Kami sedang membina projek Vite dengan Bootstrap dari awal, jadi terdapat beberapa prasyarat dan langkah hadapan sebelum kami benar-benar boleh bermula. Panduan ini memerlukan anda memasang Node.js dan membiasakan diri dengan terminal.

Buat folder projek dan sediakan npm. Kami akan mencipta my-projectfolder dan memulakan npm dengan -yhujah untuk mengelakkannya bertanya kepada kami semua soalan interaktif.
```
mkdir my-project && cd my-project
npm init -y
```
Pasang Vite. Tidak seperti panduan Webpack kami, hanya terdapat satu pergantungan alat binaan di sini. Kami gunakan --save-devuntuk memberi isyarat bahawa pergantungan ini hanya untuk kegunaan pembangunan dan bukan untuk pengeluaran.
```
npm i --save-dev vite
```
Pasang Bootstrap. Sekarang kita boleh memasang Bootstrap. Kami juga akan memasang Popper kerana dropdown, popover dan petua alat kami bergantung padanya untuk kedudukannya. Jika anda tidak merancang untuk menggunakan komponen tersebut, anda boleh meninggalkan Popper di sini.
```
npm i --save bootstrap @popperjs/core
```
Pasang pergantungan tambahan. Selain Vite dan Bootstrap, kami memerlukan satu lagi kebergantungan (Sass) untuk mengimport dan menggabungkan CSS Bootstrap dengan betul.
```
npm i --save-dev sass
```

Memandangkan kita telah memasang dan menyediakan semua kebergantungan yang diperlukan, kita boleh mula bekerja membuat fail projek dan mengimport Bootstrap.

Struktur projek

Kami telah mencipta my-projectfolder dan memulakan npm. Kini kami juga akan mencipta srcfolder, helaian gaya dan fail JavaScript kami untuk melengkapkan struktur projek. Jalankan yang berikut daripada my-project, atau buat folder dan struktur fail secara manual yang ditunjukkan di bawah.

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

Apabila anda selesai, projek lengkap anda sepatutnya kelihatan seperti ini:

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

Pada ketika ini, semuanya berada di tempat yang betul, tetapi Vite tidak akan berfungsi kerana kami belum mengisinya vite.config.js.

Konfigurasikan Vite

Dengan kebergantungan dipasang dan folder projek kami sedia untuk kami memulakan pengekodan, kami kini boleh mengkonfigurasi Vite dan menjalankan projek kami secara setempat.

Buka vite.config.jsdalam editor anda. Oleh kerana ia kosong, kami perlu menambahkan beberapa konfigurasi boilerplate padanya supaya kami boleh memulakan pelayan kami. Bahagian konfigurasi ini memberitahu Vite untuk mencari JavaScript projek kami dan cara pelayan pembangunan harus berkelakuan (menarik dari srcfolder dengan muat semula panas).
```
const path = require('path')

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

Seterusnya kita isi src/index.html. Ini ialah halaman HTML yang akan dimuatkan Vite dalam penyemak imbas untuk menggunakan CSS dan JS yang digabungkan yang akan kami tambahkan padanya dalam langkah-langkah seterusnya.

<!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 penggayaan Bootstrap di sini dengan div class="container"dan <button>supaya kami melihat apabila CSS Bootstrap dimuatkan oleh Vite.

Sekarang kita memerlukan skrip npm untuk menjalankan Vite. Buka package.jsondan tambah startskrip yang ditunjukkan di bawah (anda sepatutnya sudah mempunyai skrip ujian). Kami akan menggunakan skrip ini untuk memulakan pelayan dev Vite tempatan kami.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Dan akhirnya, kita boleh mulakan Vite. Dari my-projectfolder dalam terminal anda, jalankan skrip npm yang baru ditambahkan itu:
```
npm start
```

Dalam bahagian seterusnya dan terakhir untuk panduan ini, kami akan mengimport semua CSS dan JavaScript Bootstrap.

Import Bootstrap

Sediakan import Sass Bootstrap dalam vite.config.js. Fail konfigurasi anda kini lengkap dan sepatutnya sepadan dengan coretan di bawah. Satu-satunya bahagian baharu di sini ialah resolvebahagian—kami menggunakan ini untuk menambah alias pada fail sumber kami di dalam node_modulesuntuk memastikan import semudah 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 kita import CSS Bootstrap. Tambahkan yang berikut untuk src/scss/styles.scssmengimport semua Sass sumber Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Anda juga boleh mengimport helaian gaya kami secara individu jika anda mahu. Baca dokumen import Sass kami untuk mendapatkan butiran.
Seterusnya kami memuatkan CSS dan mengimport JavaScript Bootstrap. Tambahkan yang berikut untuk src/js/main.jsmemuatkan CSS dan mengimport semua JS Bootstrap. Popper akan diimport secara automatik melalui Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Anda juga boleh mengimport pemalam JavaScript secara individu mengikut keperluan untuk mengurangkan saiz berkas:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Baca dokumen JavaScript kami untuk mendapatkan maklumat lanjut tentang cara menggunakan pemalam Bootstrap.
Dan anda sudah selesai! 🎉 Dengan sumber Bootstrap Sass dan JS dimuatkan sepenuhnya, pelayan pembangunan tempatan anda kini sepatutnya kelihatan seperti ini.

Kini anda boleh mula menambah mana-mana komponen Bootstrap yang anda mahu gunakan. Pastikan anda menyemak projek contoh Vite yang lengkap untuk cara memasukkan Sass tersuai tambahan dan mengoptimumkan binaan anda dengan mengimport hanya bahagian CSS dan JS Bootstrap yang anda perlukan.

Nampak sesuatu yang salah atau ketinggalan zaman di sini? Sila buka isu pada GitHub . Perlukan bantuan menyelesaikan masalah? Cari atau mulakan perbincangan di GitHub.