Bootstrap & Sephuthelwana

Tlhahlo ya semmušo ya ka moo o ka akaretšago le go kgoboketša CSS le JavaScript ya Bootstrap mo protšekeng ya gago o diriša Parcel.

Letlakaleng le

O nyaka go tlola go fihla mafelelong? Download khoutu ya mohlodi le demo ya go šoma ya tlhahlo ye go tšwa polokelong ya twbs/examples . O ka bula gape mohlala ka go StackBlitz eupša wa se o sepetše ka gobane Parcel ga e thekgwe moo gabjale.

Beakanya

Re aga projeke ya Parcel ka Bootstrap go tšwa mathomong, ka fao go na le dinyakwa tše dingwe tša pele le dikgato tša pele pele re ka thoma e le ka kgonthe. Tlhahlo ye e nyaka gore o be le Node.js yeo e hlomilwego le go tlwaelana mo gongwe le terminal.

Theha foldara ya porojeke e ne le setup npm. Re tla hlama my-projectfoltara gomme ra thoma npm ka -yngangišano go efoga go re botšiša dipotšišo ka moka tša tirišano.
```
mkdir my-project && cd my-project
npm init -y
```
Tsenya Sephuthelwana. Go fapana le tlhahlo ya rena ya Webpack, go na le go ithekga ga sedirišwa se tee fela sa go aga mo. Phasela e tla tsenya ka go iketla diphetoledi tša polelo (go swana le Sass) ge e di lemoga. Re šomiša --save-devgo laetša gore go ithekga mo ke fela ga tšhomišo ya tlhabollo e sego ya tšweletšo.
```
npm i --save-dev parcel
```
Kenya Bootstrap. Bjale re ka tsenya Bootstrap. Re tla tsenya gape Popper ka ge di-dropdown tša rena, di-popover, le di-tooltips di ithekgile ka yona bakeng sa go beakanya ga tšona. Ge o sa rulaganye go šomiša dikarolo tšeo, o ka tlogela Popper mo.
```
npm i --save bootstrap @popperjs/core
```

Bjale ka ge re na le ditshepetšo ka moka tše di nyakegago tše di hlomilwego, re ka tsena mošomong wa go hlama difaele tša projeke le go tsenya ka ntle Bootstrap.

Sebopego sa porojeke

Re šetše re hlotše my-projectfoldara gomme ra thoma npm. Bjale re tla hlama gape le srcfoltara ya rena, letlakala la setaele, le faele ya JavaScript go feleletša sebopego sa projeke. Matha tše di latelago go tšwa go my-project, goba o hlama ka seatla sebopego sa foltara le faele ye e bontšhitšwego ka mo tlase.

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

Ge o feditše, projeke ya gago ye e feletšego e swanetše go lebelega ka tsela ye:

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

Mo nakong ye, se sengwe le se sengwe se lefelong le le swanetšego, eupša Parcel e nyaka letlakala la HTML le sengwalwa sa npm go thoma seva ya rena.

Beakanya Sephuthelwana

Ka ditshepetšo tše di hlomilwego le foltara ya rena ya projeke e loketše gore re thome go ngwala dikhoutu, bjale re ka beakanya Sephuthelwana le go sepetša porojeke ya rena ka mo nageng. Sephuthelwana ka bosona ga se nyake faele ya peakanyo ka tlhamo, eupša re nyaka sengwalwa sa npm le faele ya HTML go thoma seva ya rena.

Tlatša src/index.htmlfaele. Sephuthelwana se nyaka letlakala go le tšweletša, ka fao re šomiša index.htmlletlakala la rena go hloma HTML ye nngwe ya motheo, go akaretšwa difaele tša rena tša CSS le 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>
```
Re akaretša go se nene ga go setaele ga Bootstrap mo ka div class="container"le <button>gore re bone ge CSS ya Bootstrap e imelwa ke Webpack.

Parcel e tla lemoga ka go iketla gore re šomiša Sass gomme ya tsenya plugin ya Sass Parcel go e thekga. Lega go le bjalo, ge e ba o rata, o ka kitimiša gape ka seatla npm i --save-dev @parcel/transformer-sass.
Oketša dingwalwa tša npm tša Sephuthelwana. Bula gomme o tlaleletše sengwalwa se se package.jsonlatelago go selo. Re tla šomiša sengwalwa se go thoma seva ya rena ya tlhabollo ya Diphuthelwana le go tšweletša faele ya HTML yeo re e hlotšego ka morago ga ge e kgobokeditšwe ka gare ga tšhupetšo.startscriptsdist
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Gomme mafelelong, re ka thoma Phasela. Go tšwa go my-projectfoltara ka gare ga terminal ya gago, sepetša sengwalwa seo sa npm seo se sa tšwago go okeletšwa:
```
npm start
```

Karolong ye e latelago le ya mafelelo go tlhahlo ye, re tla tsenya ka ntle ka moka ga CSS le JavaScript ya Bootstrap.

Tsenya ka ntle Bootstrap

Go tsenya Bootstrap ka gare ga Parcel go nyaka go tsenya ka ntle tše pedi, e tee ka gare ga rena styles.scssgomme e nngwe ka gare ga rena main.js.

Tsenya ka ntle CSS ya Bootstrap. Oketša tše di latelago go src/scss/styles.scssgo tsenya ka moka ga mohlodi wa Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
O ka tsenya gape le matlakala a rena a ditaele ka botee ge o nyaka. Bala ditokomane tša rena tša go tsenya ka ntle tša Sass bakeng sa dintlha.
Tsenya ka ntle JS ya Bootstrap. Oketša tše di latelago go src/js/main.jsgo tsenya ka moka ga JS ya Bootstrap. Popper e tla tlišwa ka ntle ka go itiragalela ka Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
O ka tsenya gape di-plugin tša JavaScript ka botee ge go nyakega go boloka bogolo bja diphuthelwana bo le fase:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bala ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego mabapi le kamoo o ka dirišago di-plugin tša Bootstrap.
Gomme o feditše! 🎉 Ka mohlodi wa Bootstrap Sass le JS di imelwa ka botlalo, seva ya gago ya tlhabollo ya selegae bjale e swanetše go lebelega ka tsela ye.

Bjale o ka thoma go oketša dikarolo dife goba dife tša Bootstrap tšeo o nyakago go di diriša. Kgonthiša gore o hlahloba projeke ya mohlala wa Parcel ye e feletšego ya kamoo o ka akaretšago Sass ya tlaleletšo ya tlwaelo le go kaonafatša go aga ga gago ka go tsenya ka ntle fela dikarolo tša CSS le JS tša Bootstrap tšeo o di hlokago.

O bona selo se sengwe se se fošagetšego goba seo se fetilwego ke nako mo? Hle bula taba go GitHub . O hloka thušo ya go rarolla mathata? Batla goba o thome poledišano go GitHub.