Bootstrap & Parcel

Imiyoboro yemewe yuburyo bwo gushyira no guhuza CSS na JavaScript ya Bootstrap mumushinga wawe ukoresheje Parcel.

Kuriyi page

Urashaka gusimbuka kugeza imperuka? Kuramo inkomoko yinkomoko hamwe na demo ikora kuriyi mfashanyigisho kuva ububiko bwa twbs / ingero . Urashobora kandi gufungura urugero muri StackBlitz ariko ntukore kuko Parcelle idashyigikiwe hano.

Gushiraho

Turimo kubaka umushinga wa Parcel hamwe na Bootstrap kuva kera, nuko haribintu bimwe bisabwa hamwe nintambwe yimbere mbere yuko dutangira rwose. Aka gatabo kagusaba kugira Node.js yashyizwemo kandi umenyereye na terminal.

Kora umushinga wububiko hanyuma ushireho npm. Tuzakora my-projectububiko hanyuma dutangire npm hamwe -ynimpaka kugirango twirinde kutubaza ibibazo byose byimikorere.
```
mkdir my-project && cd my-project
npm init -y
```
Shyiramo Parcelle. Bitandukanye nuyobora Webpack, hano harikintu kimwe gusa cyubaka ibikoresho. Parcel izahita ishyiraho abahindura ururimi (nka Sass) nkuko ibimenye. Dukoresha --save-devkwerekana ko uku kwishingikiriza kumikoreshereze yiterambere gusa atari kubikorwa.
```
npm i --save-dev parcel
```
Shyiramo Bootstrap. Ubu turashobora gushiraho Bootstrap. Tuzashyiraho kandi Popper kuva ibitonyanga, popovers, hamwe nibikoresho byifashishwa kubirindiro byabo. Niba udateganya gukoresha ibyo bice, urashobora gusiba Popper hano.
```
npm i --save bootstrap @popperjs/core
```

Noneho ko dufite ibyangombwa byose bikenewe byashyizweho, dushobora kubona akazi ko gukora dosiye zumushinga no gutumiza Bootstrap.

Imiterere yumushinga

Tumaze gukora my-projectububiko no gutangiza npm. Noneho tuzakora kandi srcububiko bwacu, imisusire, na dosiye ya JavaScript kugirango tuzenguruke imiterere yumushinga. Koresha ibikurikira kuva my-project, cyangwa intoki ukore ububiko nububiko bwa dosiye byerekanwe hepfo.

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

Iyo urangije, umushinga wawe wuzuye ugomba kumera gutya:

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

Kuri iyi ngingo, ibintu byose biri mumwanya ukwiye, ariko Parcelle ikeneye page ya HTML na npm inyandiko kugirango dutangire seriveri.

Shiraho Parcelle

Hamwe nubwishingizi bwashizweho hamwe nububiko bwumushinga witeguye kugirango dutangire coding, ubu dushobora gushiraho Parcel hanyuma tugakora umushinga waho. Parcel ubwayo ntisaba dosiye iboneza kubishushanyo mbonera, ariko dukeneye inyandiko ya npm na dosiye ya HTML kugirango dutangire seriveri.

Uzuza src/index.htmldosiye. Parcel ikeneye urupapuro rwo gutanga, bityo dukoresha index.htmlpage yacu kugirango dushyireho HTML shingiro, harimo na CSS na 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>

Turimo gushiramo akantu gato ka Bootstrap styling hano hamwe na div class="container"hamwe <button>kugirango tubone igihe CSS ya Bootstrap yuzuye na Webpack.

Parcel izahita imenya ko dukoresha Sass hanyuma dushyireho plagisi ya Sass kugirango tuyishyigikire. Ariko, niba ubishaka, urashobora kandi gukoresha intoki npm i --save-dev @parcel/transformer-sass.

Ongeramo Parcelle npm inyandiko. Fungura i package.jsonhanyuma wongere inyandiko ikurikira startkubintu scripts. Tuzakoresha iyi nyandiko kugirango dutangire seriveri yiterambere ya Parcel hanyuma dutange dosiye ya HTML twaremye imaze gukorerwa mububiko dist.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Hanyuma, dushobora gutangira Parcel. Kuva my-projectmububiko muri terminal yawe, koresha iyo nyandiko yongeyeho npm inyandiko:
```
npm start
```

Mugice gikurikira nicyanyuma kuriyi mfashanyigisho, tuzatumiza muri CSS ya Bootstrap yose hamwe na JavaScript.

Kuzana Bootstrap

Kuzana Bootstrap muri Parcelle bisaba ibicuruzwa bibiri bitumizwa mu mahanga, kimwe muri twe styles.scssikindi muri twe main.js.

Kuzana CSS ya Bootstrap. Ongeraho ibikurikira kugirango src/scss/styles.scsswinjize isoko ya Bootstrap yose Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Urashobora kandi gutumiza impapuro zacu muburyo bwihariye niba ubishaka. Soma ibyinjira muri Sass byinjira kubisobanuro birambuye.
Kuzana Bootstrap ya JS. Ongeraho ibikurikira kugirango src/js/main.jsutumize JS ya Bootstrap yose. Popper izatumizwa mu buryo bwikora binyuze muri Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Urashobora kandi kwinjiza amacomeka ya JavaScript kugiti cyawe nkuko bikenewe kugirango ubunini buke bugabanuke:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Soma inyandiko za JavaScript kugirango ubone ibisobanuro birambuye kuburyo wakoresha amacomeka ya Bootstrap.
Kandi urangije! 🎉 Hamwe na Bootstrap inkomoko ya Sass na JS yuzuye, seriveri yiterambere ryibanze igomba noneho kugaragara nkiyi.

Noneho urashobora gutangira kongeramo ibice byose bya Bootstrap ushaka gukoresha. Wemeze neza kugenzura umushinga wuzuye wa Parcelle yuburyo washyiramo Sass yinyongera yihariye kandi uhindure inyubako yawe utumiza gusa ibice bya CSS na JS ya Bootstrap ukeneye.

Reba ikintu kibi cyangwa cyataye igihe hano? Nyamuneka fungura ikibazo kuri GitHub . Ukeneye ubufasha bwo gukemura ibibazo? Shakisha cyangwa utangire ikiganiro kuri GitHub.