Bootstrap & Parcel

Udhëzuesi zyrtar se si të përfshini dhe bashkoni CSS dhe JavaScript të Bootstrap në projektin tuaj duke përdorur Parcel.

Në këtë faqe

Dëshironi të kaloni deri në fund? Shkarkoni kodin burimor dhe demonstrimin e punës për këtë udhëzues nga depoja e twbs/shembujve . Ju gjithashtu mund ta hapni shembullin në StackBlitz , por jo ta ekzekutoni sepse Parcel nuk mbështetet aktualisht atje.

Konfigurimi

Ne po ndërtojmë një projekt Parcel me Bootstrap nga e para, kështu që ka disa parakushte dhe hapa të parë përpara se të mund të fillojmë vërtet. Ky udhëzues kërkon që ju të keni të instaluar Node.js dhe njëfarë njohjeje me terminalin.

Krijoni një dosje projekti dhe konfiguroni npm. Ne do të krijojmë my-projectdosjen dhe do të inicializojmë npm me -yargumentin për të shmangur që ai të na bëjë të gjitha pyetjet ndërvepruese.
```
mkdir my-project && cd my-project
npm init -y
```
Instaloni parcelën. Ndryshe nga udhëzuesi ynë i paketës së uebit, këtu ekziston vetëm një varësi e vetme e veglave të ndërtimit. Parcel do të instalojë automatikisht transformatorët e gjuhës (si Sass) ndërsa i zbulon ato. Ne përdorim --save-devpër të sinjalizuar se kjo varësi është vetëm për përdorim zhvillimor dhe jo për prodhim.
```
npm i --save-dev parcel
```
Instaloni Bootstrap. Tani mund të instalojmë Bootstrap. Ne do të instalojmë gjithashtu Popper meqenëse pikat tona të lëshimit, popover-et dhe këshillat e veglave varen prej tij për pozicionimin e tyre. Nëse nuk planifikoni t'i përdorni ato komponentë, mund ta hiqni Popper këtu.
```
npm i --save bootstrap @popperjs/core
```

Tani që kemi të gjitha varësitë e nevojshme të instaluara, mund të fillojmë punën për krijimin e skedarëve të projektit dhe importimin e Bootstrap.

Struktura e projektit

Ne kemi krijuar tashmë my-projectdosjen dhe kemi inicializuar npm. Tani do të krijojmë gjithashtu srcdosjen tonë, fletën e stilit dhe skedarin JavaScript për të përmbyllur strukturën e projektit. Ekzekutoni sa vijon nga my-project, ose krijoni manualisht strukturën e dosjes dhe skedarit të treguar më poshtë.

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

Kur të keni mbaruar, projekti juaj i plotë duhet të duket kështu:

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

Në këtë pikë, gjithçka është në vendin e duhur, por Parcel i duhet një faqe HTML dhe skript npm për të nisur serverin tonë.

Konfiguro parcelën

Me varësitë e instaluara dhe dosjen tonë të projektit gati që ne të fillojmë kodimin, tani mund të konfigurojmë Parcelën dhe ta ekzekutojmë projektin tonë në nivel lokal. Vetë parcela nuk kërkon skedar konfigurimi sipas dizajnit, por ne kemi nevojë për një skript npm dhe një skedar HTML për të nisur serverin tonë.

Plotësoni src/index.htmldosjen. Parcelës i duhet një faqe për t'u dhënë, kështu që ne përdorim faqen tonë index.htmlpër të konfiguruar disa HTML bazë, duke përfshirë skedarët tanë CSS dhe 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>
```
Ne po përfshijmë këtu një stil të vogël Bootstrap me div class="container"dhe në <button>mënyrë që të shohim kur CSS e Bootstrap ngarkohet nga Webpack.

Parcel do të zbulojë automatikisht se ne po përdorim Sass dhe do të instalojë shtesën Sass Parcel për ta mbështetur atë. Megjithatë, nëse dëshironi, mund të ekzekutoni edhe manualisht npm i --save-dev @parcel/transformer-sass.
Shtoni skriptet Parcel npm. Hapni package.jsondhe shtoni startskriptin e mëposhtëm në scriptsobjekt. Ne do ta përdorim këtë skript për të nisur serverin tonë të zhvillimit të Parcelave dhe do të japim skedarin HTML që krijuam pasi të jetë përpiluar në distdrejtori.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Dhe së fundi, ne mund të fillojmë Parcelën. Nga my-projectdosja në terminalin tuaj, ekzekutoni skriptin e sapo shtuar npm:
```
npm start
```

Në pjesën tjetër dhe të fundit të këtij udhëzuesi, ne do të importojmë të gjithë CSS dhe JavaScript të Bootstrap.

Importo Bootstrap

Importimi i Bootstrap në Parcel kërkon dy importe, një në tonën styles.scssdhe një në tonën main.js.

Importoni CSS të Bootstrap. Shtoni sa vijon për src/scss/styles.scsstë importuar të gjithë burimin Sass të Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ju gjithashtu mund të importoni fletët tona të stilit individualisht nëse dëshironi. Lexoni dokumentet tona të importit të Sass për detaje.
Importoni Bootstrap's JS. Shtoni sa vijon për src/js/main.jstë importuar të gjitha JS të Bootstrap. Popper do të importohet automatikisht përmes Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Ju gjithashtu mund të importoni shtojcat JavaScript individualisht sipas nevojës për të mbajtur madhësitë e paketave të ulëta:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lexoni dokumentet tona JavaScript për më shumë informacion se si të përdorni shtojcat e Bootstrap.
Dhe ju keni mbaruar! 🎉 Me burimin Sass dhe JS të Bootstrap të ngarkuar plotësisht, serveri juaj lokal i zhvillimit tani duhet të duket kështu.

Tani mund të filloni të shtoni çdo komponent Bootstrap që dëshironi të përdorni. Sigurohuni që të shikoni projektin e plotë të shembullit të Parcelës për mënyrën se si të përfshini Sass shtesë të personalizuar dhe të optimizoni ndërtimin tuaj duke importuar vetëm pjesët e CSS dhe JS të Bootstrap që ju nevojiten.

Shihni diçka të gabuar apo të vjetëruar këtu? Ju lutemi hapni një problem në GitHub . Keni nevojë për ndihmë për zgjidhjen e problemeve? Kërkoni ose filloni një diskutim në GitHub.