Bootstrap & Parsél

Pituduh resmi pikeun kumaha carana ngalebetkeun sareng ngabuntel CSS sareng JavaScript Bootstrap dina proyék anjeun nganggo Parcel.

Dina kaca ieu

Rék skip ka tungtungna? Unduh kode sumber sareng demo kerja pikeun pituduh ieu tina gudang twbs/conto . Anjeun ogé tiasa muka conto dina StackBlitz tapi henteu ngajalankeun éta kusabab Parcel ayeuna henteu dirojong di dinya.

Disetél

Kami nuju ngawangun proyék Parcel sareng Bootstrap ti mimiti, janten aya sababaraha prasarat sareng léngkah-léngkah sateuacanna sateuacan urang tiasa ngamimitian. Pituduh ieu ngabutuhkeun anjeun pikeun masang Node.js sareng sababaraha familiarity sareng terminal.

Jieun folder proyék jeung setelan npm. Kami bakal nyiptakeun my-projectpolder sareng ngamimitian npm kalayan -yargumen pikeun ngahindarkeun naroskeun ka urang sadaya patarosan interaktif.
```
mkdir my-project && cd my-project
npm init -y
```
Pasang Parcel. Beda sareng pituduh Webpack kami, ngan ukur aya hiji katergantungan alat ngawangun di dieu. Parcel bakal otomatis masang trafo basa (sapertos Sass) nalika ngadeteksi aranjeunna. Kami nganggo --save-devsinyal yén kagumantungan ieu ngan ukur pikeun panggunaan pangwangunan sareng sanés pikeun produksi.
```
npm i --save-dev parcel
```
Pasang Bootstrap. Ayeuna urang tiasa masang Bootstrap. Urang ogé bakal masang Popper saprak dropdowns kami, popovers, sarta tooltips gumantung kana eta pikeun positioning maranéhna. Upami anjeun henteu ngarencanakeun ngagunakeun komponén éta, anjeun tiasa ngaleungitkeun Popper di dieu.
```
npm i --save bootstrap @popperjs/core
```

Ayeuna urang parantos dipasang sadayana katergantungan anu diperyogikeun, urang tiasa damel pikeun nyiptakeun file proyék sareng ngimpor Bootstrap.

Struktur proyék

Kami parantos nyiptakeun my-projectfolder sareng ngamimitian npm. Ayeuna urang ogé bakal nyieun srcfolder urang, stylesheet, sarta file JavaScript pikeun buleud kaluar struktur proyék. Jalankeun di handap ieu tina my-project, atanapi jieun sacara manual polder sareng struktur file anu dipidangkeun di handap.

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

Sawaktos Anjeun geus rengse, proyék lengkep Anjeun kedah kasampak kawas kieu:

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

Dina titik ieu, sadayana aya dina tempat anu leres, tapi Parcel peryogi halaman HTML sareng skrip npm pikeun ngamimitian server kami.

Konpigurasikeun Parsél

Kalayan katergantungan dipasang sareng folder proyék kami siap pikeun urang ngamimitian coding, ayeuna urang tiasa ngonpigurasikeun Parcel sareng ngajalankeun proyek urang sacara lokal. Parcel sorangan henteu meryogikeun file konfigurasi ku desain, tapi urang peryogi skrip npm sareng file HTML pikeun ngamimitian server kami.

Eusian src/index.htmlfile. Parsél peryogi halaman pikeun dirender, janten kami nganggo index.htmlhalaman kami pikeun nyetél sababaraha HTML dasar, kalebet file CSS sareng 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 kalebet sakedik gaya Bootstrap di dieu sareng div class="container"sareng <button>supados urang ningali nalika CSS Bootstrap dimuat ku Webpack.

Parcel bakal otomatis ngadeteksi urang nuju nganggo Sass sareng masang plugin Sass Parcel pikeun ngadukung éta. Nanging, upami anjeun hoyong, anjeun ogé tiasa ngajalankeun sacara manual npm i --save-dev @parcel/transformer-sass.

Tambahkeun Aksara npm Parcel. Buka package.jsonsareng tambahkeun startskrip di handap ieu kana scriptsobyék. Urang bakal nganggo skrip ieu pikeun ngamimitian server pamekaran Parcel kami sareng ngadamel file HTML anu kami ciptakeun saatos dikompilasi kana distdiréktori.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Sareng tungtungna, urang tiasa ngamimitian Parcel. Tina my-projectpolder di terminal anjeun, jalankeun skrip npm anu nembé nambihan:
```
npm start
```

Dina bagian hareup jeung ahir pituduh ieu, urang bakal ngimpor sakabéh CSS jeung JavaScript Bootstrap urang.

Impor Bootstrap

Ngimpor Bootstrap kana Parsél butuh dua impor, hiji kana kami styles.scsssareng hiji kana kami main.js.

Impor Bootstrap urang CSS. Tambihkeun di handap ieu src/scss/styles.scsspikeun ngimpor sadaya sumber Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Anjeun ogé tiasa ngimpor lambaran gaya urang masing-masing upami anjeun hoyong. Baca dokumén impor Sass kami pikeun detil.
Impor Bootstrap urang JS. Tambahkeun di handap pikeun src/js/main.jsngimpor sakabéh JS Bootstrap urang. Popper bakal diimpor sacara otomatis ngaliwatan Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Anjeun ogé tiasa ngimpor plugin JavaScript masing-masing upami diperyogikeun pikeun ngajaga ukuran bungkusan:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Baca docs JavaScript kami pikeun émbaran nu langkung lengkep ihwal kumaha cara ngagunakeun plugins Bootstrap.
Jeung anjeun geus rengse! 🎉 Kalayan sumber Bootstrap Sass sareng JS pinuh dimuat, pangladén pangembangan lokal anjeun ayeuna kedah siga kieu.

Ayeuna anjeun tiasa ngamimitian nambihan komponén Bootstrap anu anjeun hoyong dianggo. Pastikeun pikeun pariksa proyék conto Parcel lengkep pikeun kumaha cara ngalebetkeun Sass khusus tambahan sareng ngaoptimalkeun ngawangun anjeun ku ngan ukur ngimpor bagian tina Bootstrap's CSS sareng JS anu anjeun peryogikeun.

Ningali lepat atanapi ketinggalan jaman di dieu? Mangga buka masalah dina GitHub . Butuh pitulung pikeun ngungkulan? Pilarian atanapi ngamimitian diskusi dina GitHub.