Bootstrap & Parcel

Mwongozo rasmi wa jinsi ya kujumuisha na kuunganisha CSS ya Bootstrap na JavaScript katika mradi wako kwa kutumia Parcel.

Katika ukurasa huu

Je, ungependa kuruka hadi mwisho? Pakua msimbo wa chanzo na onyesho la kufanya kazi la mwongozo huu kutoka hazina ya twbs/mifano . Unaweza pia kufungua mfano katika StackBlitz lakini usiiendeshe kwa sababu Parcel haitumiki hapo kwa sasa.

Sanidi

Tunaunda mradi wa Parcel na Bootstrap kutoka mwanzo, kwa hivyo kuna mahitaji ya lazima na hatua za mbele kabla hatujaanza. Mwongozo huu unahitaji uwe na Node.js iliyosakinishwa na ujuzi fulani na terminal.

Unda folda ya mradi na usanidi npm. Tutaunda my-projectfolda na kuanzisha npm kwa -yhoja ili kuepusha kutuuliza maswali yote ya mwingiliano.
```
mkdir my-project && cd my-project
npm init -y
```
Weka Kifurushi. Tofauti na mwongozo wetu wa Webpack, kuna utegemezi wa zana moja tu ya ujenzi hapa. Parcel itasakinisha kibadilishaji kibadilishaji lugha kiotomatiki (kama Sass) inapozitambua. Tunatumia --save-devkuashiria kuwa utegemezi huu ni kwa matumizi ya maendeleo tu na sio kwa uzalishaji.
```
npm i --save-dev parcel
```
Sakinisha Bootstrap. Sasa tunaweza kusakinisha Bootstrap. Pia tutasakinisha Popper kwa kuwa menyu kunjuzi, popover na vidokezo vyetu hutegemea kwa uwekaji wao. Ikiwa huna mpango wa kutumia vipengele hivyo, unaweza kuachana na Popper hapa.
```
npm i --save bootstrap @popperjs/core
```

Sasa kwa kuwa tuna tegemezi zote muhimu zilizosakinishwa, tunaweza kuanza kazi kuunda faili za mradi na kuagiza Bootstrap.

Muundo wa mradi

Tayari tumeunda my-projectfolda na kuanzisha npm. Sasa tutaunda pia srcfolda yetu, laha ya mtindo na faili ya JavaScript ili kukamilisha muundo wa mradi. Endesha zifuatazo kutoka my-project, au uunde mwenyewe folda na muundo wa faili ulioonyeshwa hapa chini.

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

Unapomaliza, mradi wako kamili unapaswa kuonekana kama hii:

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

Kwa wakati huu, kila kitu kiko mahali pazuri, lakini Sehemu inahitaji ukurasa wa HTML na hati ya npm ili kuanzisha seva yetu.

Sanidi Kifurushi

Vitegemezi vikiwa vimesakinishwa na folda yetu ya mradi iko tayari kwa sisi kuanza kusimba, sasa tunaweza kusanidi Kifurushi na kuendesha mradi wetu ndani ya nchi. Sehemu yenyewe haihitaji faili ya usanidi kwa muundo, lakini tunahitaji hati ya npm na faili ya HTML ili kuanzisha seva yetu.

Jaza src/index.htmlfaili. Sehemu inahitaji ukurasa ili kutoa, kwa hivyo tunatumia index.htmlukurasa wetu kusanidi HTML ya kimsingi, ikijumuisha faili zetu za 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>

Tunajumuisha mtindo mdogo wa Bootstrap hapa na div class="container"na <button>ili tuone wakati CSS ya Bootstrap inapopakiwa na Webpack.

Kifurushi kitatambua kiotomatiki kuwa tunatumia Sass na kusakinisha programu- jalizi ya Sass Parcel ili kukitumia. Walakini, ikiwa unataka, unaweza pia kukimbia kwa mikono npm i --save-dev @parcel/transformer-sass.

Ongeza hati za Parcel npm. Fungua package.jsonna uongeze starthati ifuatayo kwenye scriptskitu. Tutatumia hati hii kuanzisha seva yetu ya ukuzaji Kifurushi na kutoa faili ya HTML tuliyounda baada ya kukusanywa kwenye distsaraka.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Na mwishowe, tunaweza kuanza Parcel. Kutoka kwa my-projectfolda kwenye terminal yako, endesha hati mpya ya npm:
```
npm start
```

Katika sehemu inayofuata na ya mwisho kwa mwongozo huu, tutaleta CSS zote za Bootstrap na JavaScript.

Ingiza Bootstrap

Kuingiza Bootstrap kwenye Parcel kunahitaji uagizaji mbili, moja ndani yetu styles.scssna moja kwenye main.js.

Ingiza CSS ya Bootstrap. Ongeza yafuatayo ili src/scss/styles.scsskuleta vyanzo vyote vya Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Unaweza pia kuagiza laha zetu za mitindo kibinafsi ikiwa unataka. Soma hati zetu za kuagiza za Sass kwa maelezo zaidi.
Ingiza JS ya Bootstrap. Ongeza yafuatayo ili src/js/main.jskuagiza JS zote za Bootstrap. Popper italetwa kiotomatiki kupitia Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Unaweza pia kuagiza programu jalizi za JavaScript kibinafsi kama inahitajika ili kupunguza ukubwa wa vifurushi:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Soma hati zetu za JavaScript kwa maelezo zaidi kuhusu jinsi ya kutumia programu jalizi za Bootstrap.
Na umemaliza! 🎉 Kwa chanzo cha Bootstrap Sass na JS zikiwa zimepakiwa kikamilifu, seva yako ya usanidi ya karibu inapaswa sasa kuonekana hivi.

Sasa unaweza kuanza kuongeza vijenzi vyovyote vya Bootstrap unavyotaka kutumia. Hakikisha umeangalia mradi kamili wa mfano wa Vifurushi wa jinsi ya kujumuisha Sass maalum ya ziada na uboresha muundo wako kwa kuleta tu sehemu za CSS na JS za Bootstrap unazohitaji.

Je, unaona jambo lisilofaa au lililopitwa na wakati hapa? Tafadhali fungua suala kwenye GitHub . Je, unahitaji usaidizi wa utatuzi? Tafuta au anza majadiliano kwenye GitHub.