Bootstrap & Parcel

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

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 tetapi tidak menjalankannya kerana Parcel tidak disokong di sana pada masa ini.

Persediaan

Kami sedang membina projek Parcel 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 Bungkusan. Tidak seperti panduan Webpack kami, hanya terdapat satu pergantungan alat binaan di sini. Parcel akan memasang pengubah bahasa secara automatik (seperti Sass) kerana ia mengesannya. Kami gunakan --save-devuntuk memberi isyarat bahawa pergantungan ini hanya untuk kegunaan pembangunan dan bukan untuk pengeluaran.
```
npm i --save-dev parcel
```
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
```

Memandangkan kita telah memasang 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

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

Pada ketika ini, semuanya berada di tempat yang betul, tetapi Parcel memerlukan halaman HTML dan skrip npm untuk memulakan pelayan kami.

Konfigurasikan Bungkusan

Dengan kebergantungan dipasang dan folder projek kami sedia untuk kami memulakan pengekodan, kami kini boleh mengkonfigurasi Parcel dan menjalankan projek kami secara setempat. Parcel sendiri tidak memerlukan fail konfigurasi mengikut reka bentuk, tetapi kami memerlukan skrip npm dan fail HTML untuk memulakan pelayan kami.

Isikan src/index.htmlfail. Parcel memerlukan halaman untuk dipaparkan, jadi kami menggunakan index.htmlhalaman kami untuk menyediakan beberapa HTML asas, termasuk fail 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 penggayaan Bootstrap di sini dengan div class="container"dan <button>supaya kami melihat apabila CSS Bootstrap dimuatkan oleh Webpack.

Parcel secara automatik akan mengesan kami menggunakan Sass dan memasang pemalam Sass Parcel untuk menyokongnya. Walau bagaimanapun, jika anda mahu, anda juga boleh menjalankan secara manual npm i --save-dev @parcel/transformer-sass.
Tambahkan skrip npm Parcel. Buka package.jsondan tambahkan startskrip berikut pada scriptsobjek. Kami akan menggunakan skrip ini untuk memulakan pelayan pembangunan Parcel kami dan memaparkan fail HTML yang kami buat selepas ia disusun 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 boleh mulakan Parcel. 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

Mengimport Bootstrap ke dalam Parcel memerlukan dua import, satu ke dalam kami styles.scssdan satu ke dalam main.js.

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.
Import Bootstrap's JS. Tambahkan yang berikut untuk src/js/main.jsmengimport semua JS Bootstrap. Popper akan diimport secara automatik melalui Bootstrap.
```
// 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 Parcel 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.