Bootstrap & Paket

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

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 tetapi tidak menjalankannya karena Parcel saat ini tidak didukung di sana.

Mempersiapkan

Kami sedang membangun proyek Parcel 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 Paket. Tidak seperti panduan Webpack kami, hanya ada satu ketergantungan alat build di sini. Parcel akan secara otomatis menginstal trafo bahasa (seperti Sass) saat mendeteksinya. Kami gunakan --save-devuntuk memberi sinyal bahwa ketergantungan ini hanya untuk penggunaan pengembangan dan bukan untuk produksi.
```
npm i --save-dev parcel
```
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
```

Sekarang kita telah menginstal semua dependensi yang diperlukan, 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

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

Pada titik ini, semuanya berada di tempat yang tepat, tetapi Parcel membutuhkan halaman HTML dan skrip npm untuk memulai server kami.

Konfigurasikan Paket

Dengan dependensi terpasang dan folder proyek kami siap untuk memulai pengkodean, kami sekarang dapat mengonfigurasi Parcel dan menjalankan proyek kami secara lokal. Parcel sendiri tidak memerlukan file konfigurasi berdasarkan desain, tetapi kami membutuhkan skrip npm dan file HTML untuk memulai server kami.

Isi src/index.htmlfilenya. Parcel membutuhkan halaman untuk dirender, jadi kami menggunakan index.htmlhalaman kami untuk menyiapkan beberapa HTML dasar, termasuk file CSS dan JavaScript kami.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>

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

Parcel akan secara otomatis mendeteksi kita menggunakan Sass dan menginstal plugin Sass Parcel untuk mendukungnya. Namun, jika mau, Anda juga dapat menjalankan npm i --save-dev @parcel/transformer-sass.

Tambahkan skrip Parcel npm. Buka package.jsondan tambahkan startskrip berikut ke scriptsobjek. Kami akan menggunakan skrip ini untuk memulai server pengembangan Parcel kami dan merender file HTML yang kami buat setelah dikompilasi ke dalam distdirektori.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Dan akhirnya, kita bisa memulai Parcel. 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

Mengimpor Bootstrap ke Parcel membutuhkan dua impor, satu ke kami styles.scssdan satu ke main.js.

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.
Impor JS Bootstrap. Tambahkan yang berikut ini untuk src/js/main.jsmengimpor semua JS Bootstrap. Popper akan diimport secara otomatis melalui Bootstrap.
```
// 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 Parcel 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.