Bootstrap & Parcel

Pandhuan resmi babagan cara nyakup lan mbundel CSS lan JavaScript Bootstrap ing proyek sampeyan nggunakake Parcel.

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 nanging ora mbukak amarga Parcel saiki ora didhukung ana.

Setup

Kita lagi mbangun proyek Parcel nganggo Bootstrap saka awal, dadi ana sawetara prasyarat lan langkah ngarep sadurunge kita bisa miwiti. 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
```
Pasang Parcel. Ora kaya pandhuan Webpack, mung ana siji ketergantungan alat mbangun ing kene. Parcel bakal kanthi otomatis nginstal trafo basa (kaya Sass) nalika ndeteksi. Kita digunakake --save-devkanggo menehi tandha yen ketergantungan iki mung kanggo panggunaan pembangunan lan ora kanggo produksi.
```
npm i --save-dev parcel
```
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
```

Saiki kita wis nginstal 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

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

Ing wektu iki, kabeh ana ing panggonan sing bener, nanging Parcel butuh kaca HTML lan skrip npm kanggo miwiti server kita.

Konfigurasi Parcel

Kanthi dependensi diinstal lan folder proyek kita siap kanggo miwiti coding, saiki kita bisa ngatur Parcel lan mbukak proyek kita sacara lokal. Parcel dhewe ora mbutuhake file konfigurasi kanthi desain, nanging kita butuh skrip npm lan file HTML kanggo miwiti server kita.

Isi src/index.htmlfile kasebut. Parcel mbutuhake kaca kanggo render, mula kita nggunakake index.htmlkaca kanggo nyiyapake sawetara HTML dhasar, kalebu file CSS lan JavaScript.

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

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

Parcel bakal kanthi otomatis ndeteksi kita nggunakake Sass lan nginstal plugin Sass Parcel kanggo ndhukung. Nanging, yen sampeyan pengin, sampeyan uga bisa mbukak kanthi manual npm i --save-dev @parcel/transformer-sass.

Tambah skrip npm Parcel. Bukak package.jsonlan tambahake startskrip ing ngisor iki menyang scriptsobyek kasebut. Kita bakal nggunakake skrip iki kanggo miwiti server pangembangan Parcel lan nerjemahake file HTML sing digawe sawise dikompilasi menyang distdirektori.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Lan pungkasane, kita bisa miwiti Parcel. 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

Ngimpor Bootstrap menyang Parcel mbutuhake rong impor, siji menyang kita styles.scsslan siji menyang kita main.js.

Impor Bootstrap kang CSS. 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.
Impor Bootstrap kang JS. Tambah ing ngisor iki kanggo src/js/main.jsngimpor kabeh JS Bootstrap. Popper bakal diimpor kanthi otomatis liwat Bootstrap.
```
// 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 Parcel lengkap babagan cara nyakup Sass khusus tambahan lan ngoptimalake bangunan kanthi ngimpor mung bagean 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.