Bootstrap & Parcel

Jagorar hukuma don haɗawa da haɗa Bootstrap's CSS da JavaScript a cikin aikin ku ta amfani da Parcel.

A wannan shafi

Kuna so ku tsallake zuwa ƙarshe? Zazzage lambar tushe da demo ɗin aiki don wannan jagorar daga ma'ajiyar twbs/misali . Hakanan zaka iya buɗe misalin a cikin StackBlitz amma kar a gudanar da shi saboda a halin yanzu ba a tallafawa Parcel a can.

Saita

Muna gina aikin Parcel tare da Bootstrap daga karce, don haka akwai wasu abubuwan da ake buƙata da matakan gaba kafin mu fara da gaske. Wannan jagorar yana buƙatar shigar da Node.js da wasu saba da tasha.

Ƙirƙiri babban fayil ɗin aikin kuma saita npm. Za mu ƙirƙiri my-projectbabban fayil ɗin kuma mu fara npm tare da -yhujja don guje wa tambayar mu duk tambayoyin mu'amala.
```
mkdir my-project && cd my-project
npm init -y
```
Sanya Parcel. Ba kamar jagorar fakitin gidan yanar gizon mu ba, akwai dogaron kayan aikin gini guda ɗaya kawai anan. Parcel za ta shigar da masu canjin harshe ta atomatik (kamar Sass) yayin da yake gano su. Muna amfani --save-devda alamar cewa wannan dogara ne kawai don amfanin ci gaba ba don samarwa ba.
```
npm i --save-dev parcel
```
Shigar Bootstrap. Yanzu za mu iya shigar da Bootstrap. Za mu kuma shigar da Popper tun da zazzagewar mu, popovers, da tukwici na kayan aiki sun dogara da shi don matsayinsu. Idan baku shirya yin amfani da waɗannan abubuwan haɗin gwiwa ba, zaku iya barin Popper anan.
```
npm i --save bootstrap @popperjs/core
```

Yanzu da muke da duk abubuwan dogaro da aka shigar, za mu iya zuwa aiki ƙirƙirar fayilolin aikin da shigo da Bootstrap.

Tsarin aikin

Mun riga mun ƙirƙiri my-projectbabban fayil ɗin kuma mun fara npm. Yanzu kuma za mu ƙirƙiri srcbabban fayil ɗin mu, salon rubutu, da fayil ɗin JavaScript don zagaye tsarin aikin. Gudun waɗannan abubuwan daga my-project, ko ƙirƙirar babban fayil da tsarin fayil da hannu wanda aka nuna a ƙasa.

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

Idan kun gama, cikakken aikinku yakamata yayi kama da haka:

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

A wannan gaba, komai yana daidai, amma Parcel yana buƙatar shafin HTML da rubutun npm don fara sabar mu.

Sanya Fakitin

Tare da shigar abubuwan dogaro da babban fayil ɗin aikinmu a shirye don mu fara coding, yanzu za mu iya saita Parcel kuma mu gudanar da aikinmu a gida. Parcel kanta ba ta buƙatar fayil ɗin sanyi ta ƙira, amma muna buƙatar rubutun npm da fayil ɗin HTML don fara sabar mu.

Cika src/index.htmlfayil ɗin. Parcel yana buƙatar shafi don bayarwa, don haka muna amfani da shafinmu index.htmldon saita wasu ainihin HTML, gami da fayilolin CSS da 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>

Muna haɗa ɗan ƙaramin salo na Bootstrap anan tare da div class="container"kuma <button>don mu ga lokacin da Bootstrap's CSS ke lodawa ta Webpack.

Parcel zai gano ta atomatik muna amfani da Sass kuma ya shigar da kayan aikin Sass Parcel don tallafawa shi. Koyaya, idan kuna so, Hakanan kuna iya gudu da hannu npm i --save-dev @parcel/transformer-sass.

Ƙara rubutun npm na Parcel. Bude package.jsonkuma ƙara startrubutun mai zuwa ga scriptsabu. Za mu yi amfani da wannan rubutun don fara uwar garken ci gaban Parcel ɗinmu kuma mu sanya fayil ɗin HTML da muka ƙirƙira bayan an haɗa shi cikin kundin distadireshi.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Kuma a ƙarshe, za mu iya fara Parcel. Daga my-projectbabban fayil ɗin da ke tashar tashar ku, gudanar da sabon rubutun npm da aka ƙara:
```
npm start
```

A sashe na gaba da na ƙarshe zuwa wannan jagorar, za mu shigo da duk Bootstrap's CSS da JavaScript.

Shigo Bootstrap

Shigo da Bootstrap cikin Parcel yana buƙatar shigo da kaya biyu, ɗaya cikin namu styles.scssɗaya kuma cikin namu main.js.

Shigo da Bootstrap's CSS. Ƙara waɗannan src/scss/styles.scssdon shigo da duk tushen Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Hakanan kuna iya shigo da takaddun salon mu daban-daban idan kuna so. Karanta takaddun shigo da Sass ɗin mu don cikakkun bayanai.
Shigo da Bootstrap's JS. Ƙara waɗannan src/js/main.jsdon shigo da duk Bootstrap's JS. Za a shigo da Popper ta atomatik ta Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Hakanan zaka iya shigo da plugins na JavaScript daban-daban kamar yadda ake buƙata don kiyaye girma da yawa:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Karanta takardun mu na JavaScript don ƙarin bayani kan yadda ake amfani da plugins na Bootstrap.
Kuma kun gama! 🎉 Tare da tushen Bootstrap Sass da JS cikakke an ɗora su, uwar garken ci gaban gida ya kamata yanzu yayi kama da wannan.

Yanzu zaku iya fara ƙara kowane kayan aikin Bootstrap da kuke son amfani da su. Tabbatar duba cikakken aikin misalin Parcel don yadda ake haɗa ƙarin Sass na al'ada da haɓaka ginin ku ta shigo da sassan Bootstrap's CSS da JS waɗanda kuke buƙata kawai.

Ka ga wani abu ba daidai ba ko ya wuce a nan? Da fatan za a buɗe batu akan GitHub . Kuna buƙatar taimako don magance matsala? Bincika ko fara tattaunawa akan GitHub.