Bootstrap & Parcel

Rêbernameya fermî ji bo ku meriv çawa bi karanîna Parcel-ê CSS û JavaScript-a Bootstrap-ê di projeya xwe de tevde û berhev bike.

Li ser vê rûpelê

Dixwazin heya dawiyê derbas bibin? Koda çavkanî û demo ya xebatê ji bo vê rêbernameyê ji depoya twbs/nimûneyan dakêşin . Her weha hûn dikarin nimûneyê li StackBlitz vekin lê wê neavêjin ji ber ku Parcel niha li wir nayê piştgirî kirin.

Damezirandin

Em bi Bootstrap re projeyek Parcelê ji nû ve ava dikin, ji ber vê yekê hin şert û gavên pêşîn hene berî ku em bi rastî dest pê bikin. Ev rêber ji we re hewce dike ku hûn Node.js sazkirî bin û bi termînalê re hinekî nas bikin.

Peldankek projeyê biafirînin û npm saz bikin. Em ê my-projectpeldankê biafirînin û npm bi -yargumana xwe bidin destpêkirin da ku ew hemî pirsên înteraktîf ji me nepirse.
```
mkdir my-project && cd my-project
npm init -y
```
Parcel saz bikin. Berevajî rêberê meya Webpackê, li vir tenê girêdanek amûrek çêkirinê heye. Parcel dê bixweber veguherînerên ziman (wek Sass) saz bike ku ew wan nas dike. Em bikar tînin --save-devku nîşan bidin ku ev girêdayî tenê ji bo karanîna pêşveçûnê ye û ne ji bo hilberînê ye.
```
npm i --save-dev parcel
```
Bootstrap saz bikin. Naha em dikarin Bootstrap saz bikin. Em ê Popper-ê jî saz bikin ji ber ku dakêşan, popover û serişteyên amûran ji bo pozîsyona wan bi wê ve girêdayî ne. Heke hûn ne plan dikin ku van hêmanan bikar bînin, hûn dikarin Popper li vir derxînin.
```
npm i --save bootstrap @popperjs/core
```

Naha ku me hemî girêdanên pêwîst saz kirine, em dikarin dest bi çêkirina pelên projeyê û importkirina Bootstrap bikin.

Struktura projeyê

Me berê my-projectpeldank çêkir û npm dest pê kir. srcNaha em ê peldanka xwe , peldanka şêwazê, û pelê JavaScript- ê jî biafirînin da ku strukturên projeyê dorpêç bikin. Ya jêrîn ji my-project, an jî bi destan peldank û peldanka ku li jêr tê xuyang kirin biafirînin.

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

Dema ku we qediya, divê projeya weya tevahî bi vî rengî xuya bike:

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

Di vê nuqteyê de, her tişt li cîhê rast e, lê Parcel hewceyê rûpelek HTML-ê û skrîpta npm e ku servera me dest pê bike.

Parcelê mîheng bike

Digel ku girêdayîn hatine saz kirin û peldanka projeya me amade ye ku em dest bi kodkirinê bikin, em naha dikarin Parcelê mîheng bikin û projeya xwe li herêmê bimeşînin. Parcel bixwe ji hêla sêwiranê ve pelê vesazkirinê hewce nake, lê ji bo destpêkirina servera me pêdivî bi skrîptek npm û pelek HTML heye.

Dosyayê dagirin src/index.html. Parcel pêdivî ye ku rûpelek were pêşkêş kirin, ji ber vê yekê em index.htmlrûpela xwe bikar tînin da ku hin HTML-ya bingehîn saz bikin, tevî pelên me yên CSS û 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>
```
Em li vir piçek şêwaza Bootstrap-ê bi hev re vedigirin div class="container"û <button>ji ber vê yekê em dibînin gava CSS-ya Bootstrap-ê ji hêla Webpack-ê ve tê barkirin.

Parcel dê bixweber kifş bike ku em Sass bikar tînin û pêveka Sass Parcel saz bike da ku wê piştgirî bike. Lêbelê, heke hûn bixwazin, hûn dikarin bi destan jî bimeşînin npm i --save-dev @parcel/transformer-sass.
Nivîsarên Parcel npm zêde bikin. Vekin package.jsonû skrîpta jêrîn startli scriptstiştê zêde bikin. Em ê vê skrîptê bikar bînin da ku servera xweya pêşkeftina Parcelê dest pê bikin û pelê HTML-ê ku me çêkiriye piştî ku ew di pelrêçê de hatî berhev kirin pêşkêş bikin dist.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Û di dawiyê de, em dikarin Parcel dest pê bikin. Ji my-projectpeldanka li termînalê xwe, wê skrîpta npm ya nû hatî zêdekirin bimeşînin:
```
npm start
```

Di beşa paşîn û paşîn a vê rêbernameyê de, em ê hemî CSS û JavaScript-a Bootstrap-ê derxînin.

Bootstrap import bikin

Importkirina Bootstrap di Parcelê de du îtxal hewce dike, yek li me styles.scssû yek jî li me main.js.

CSS-ya Bootstrap-ê derxînin. Ya jêrîn lê zêde bikin da src/scss/styles.scssku hemî çavkaniya Bootstrap Sass têxe nav xwe.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ger hûn bixwazin hûn dikarin şêwazên me bi rengek ferdî jî derxînin. Ji bo hûragahiyan , belgeyên me yên importa Sass bixwînin .
JS-ya Bootstrap-ê derxînin. Ya jêrîn lê zêde bikin da src/js/main.jsku hemî JS-yên Bootstrap-ê têxin hundur. Popper dê bixweber bi navgîniya Bootstrap ve were şandin.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Her weha hûn dikarin pêvekên JavaScript-ê li gorî hewcedariyê bi rengek ferdî derxînin da ku mezinahiyên pakêtê kêm bibin:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Ji bo bêtir agahdarî li ser meriv çawa pêvekên Bootstrap bikar tîne, belgeyên me yên JavaScript bixwînin .
Û hûn qedandin! 🎉 Li gel çavkaniya Bootstrap Sass û JS bi tevahî barkirî, servera weya pêşkeftina herêmî divê naha bi vî rengî xuya bike.

Naha hûn dikarin dest bi lê zêdekirina pêkhateyên Bootstrap-ê yên ku hûn dixwazin bikar bînin bikin. Pê bawer bin ku hûn projeya nimûneya Parcelê ya bêkêmasî binihêrin ka meriv çawa Sass-a xwerû ya zêde tê de vedihewîne û avakirina xwe xweşbîn bike bi tenê beşên Bootstrap-ê CSS û JS-ya ku hûn hewce ne.

Li vir tiştek xelet an kevnar dibînin? Ji kerema xwe pirsgirêkek li ser GitHub vekin . Ji bo çareserkirina pirsgirêkan arîkariyê divê? Li GitHub nîqaşek bigerin an dest pê bikin .