Bootstrap & Pack

Oficiālais ceļvedis par to, kā iekļaut un apvienot Bootstrap CSS un JavaScript savā projektā, izmantojot paku.

Šajā lapā

Vai vēlaties pāriet līdz beigām? Lejupielādējiet šīs rokasgrāmatas pirmkodu un darba demonstrāciju no twbs/examples krātuves . Varat arī atvērt piemēru programmā StackBlitz, bet to nepalaist, jo programma Parcel pašlaik tur netiek atbalstīta.

Uzstādīt

Mēs veidojam paku projektu ar Bootstrap no nulles, tāpēc ir daži priekšnosacījumi un pirmie soļi, lai mēs varētu patiešām sākt. Šajā rokasgrāmatā ir nepieciešams instalēt Node.js un nedaudz pārzināt termināli.

Izveidojiet projekta mapi un iestatiet npm. Mēs izveidosim my-projectmapi un inicializēsim npm ar -yargumentu, lai tā neuzdotu mums visus interaktīvos jautājumus.
```
mkdir my-project && cd my-project
npm init -y
```
Instalējiet paku. Atšķirībā no mūsu Webpack rokasgrāmatas šeit ir tikai viena izveides rīka atkarība. Paciņa automātiski instalēs valodas transformatorus (piemēram, Sass), tiklīdz tos nosaka. Mēs izmantojam --save-dev, lai signalizētu, ka šī atkarība ir paredzēta tikai izstrādei, nevis ražošanai.
```
npm i --save-dev parcel
```
Instalējiet Bootstrap. Tagad mēs varam instalēt Bootstrap. Mēs arī instalēsim Popper, jo mūsu nolaižamās izvēlnes, uznirstošie logi un rīka padomi ir atkarīgi no tā pozicionēšanai. Ja neplānojat izmantot šos komponentus, varat šeit izlaist Popper.
```
npm i --save bootstrap @popperjs/core
```

Tagad, kad mums ir instalētas visas nepieciešamās atkarības, mēs varam sākt darbu, veidojot projekta failus un importējot Bootstrap.

Projekta struktūra

Mēs jau esam izveidojuši my-projectmapi un inicializējuši npm. Tagad mēs arī izveidosim savu srcmapi, stila lapu un JavaScript failu, lai noapaļotu projekta struktūru. Palaidiet tālāk norādīto no my-project, vai manuāli izveidojiet tālāk norādīto mapi un failu struktūru.

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

Kad esat pabeidzis, jūsu pilnajam projektam vajadzētu izskatīties šādi:

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

Šobrīd viss ir īstajā vietā, taču, lai palaistu mūsu serveri, Pacelam ir nepieciešama HTML lapa un npm skripts.

Konfigurējiet paku

Kad ir instalētas atkarības un mūsu projekta mape ir gatava kodēšanas sākšanai, mēs tagad varam konfigurēt paku un palaist projektu lokāli. Paciņam nav nepieciešams konfigurācijas fails, taču mums ir nepieciešams npm skripts un HTML fails, lai startētu mūsu serveri.

Aizpildiet src/index.htmlfailu. Paciņai ir nepieciešama lapa, lai renderētu, tāpēc mēs izmantojam savu index.htmllapu, lai iestatītu dažus pamata HTML, tostarp CSS un JavaScript failus.

<!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>

Mēs šeit iekļaujam nedaudz Bootstrap stila ar div class="container"un <button>, lai mēs redzētu, kad Webpack ielādē Bootstrap CSS.

Paka automātiski atklās, ka mēs izmantojam Sass, un instalēs Sass Parcel spraudni , lai to atbalstītu. Tomēr, ja vēlaties, varat palaist arī manuāli npm i --save-dev @parcel/transformer-sass.

Pievienojiet Pack npm skriptus. Atveriet un pievienojiet objektam package.jsonšādu startskriptu . scriptsMēs izmantosim šo skriptu, lai palaistu paku izstrādes serveri un atveidotu izveidoto HTML failu pēc tam, kad tas būs apkopots distdirektorijā.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Un visbeidzot, mēs varam sākt Pack. No my-projecttermināļa mapes palaidiet tikko pievienoto npm skriptu:
```
npm start
```

Nākamajā un pēdējā šīs rokasgrāmatas sadaļā mēs importēsim visu Bootstrap CSS un JavaScript.

Importēt Bootstrap

Lai importētu Bootstrap programmā Pack, ir jāveic divas importēšanas — viena mūsu styles.scssun viena mūsu main.js.

Importējiet Bootstrap CSS. Pievienojiet tālāk norādīto, src/scss/styles.scsslai importētu visu Bootstrap avotu Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ja vēlaties, varat arī importēt mūsu stilu lapas atsevišķi. Lai iegūtu sīkāku informāciju, izlasiet mūsu Sass importēšanas dokumentus .
Importējiet Bootstrap JS. Pievienojiet tālāk norādīto, src/js/main.jslai importētu visu Bootstrap JS. Popper tiks automātiski importēts, izmantojot Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Varat arī importēt JavaScript spraudņus atsevišķi, ja nepieciešams, lai samazinātu komplektu izmērus:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Izlasiet mūsu JavaScript dokumentus , lai iegūtu plašāku informāciju par Bootstrap spraudņu izmantošanu.
Un esat pabeidzis! 🎉 Kad Bootstrap avots Sass un JS ir pilnībā ielādēti, vietējam izstrādes serverim tagad vajadzētu izskatīties šādi.

Tagad varat sākt pievienot jebkuru Bootstrap komponentu, kuru vēlaties izmantot. Noteikti iepazīstieties ar visu paku paraugprojektu , lai uzzinātu, kā iekļaut papildu pielāgoto Sass un optimizēt savu būvējumu, importējot tikai jums nepieciešamās Bootstrap CSS un JS daļas.

Vai redzat šeit kaut ko nepareizu vai novecojušu? Lūdzu , atveriet problēmu vietnē GitHub . Vai nepieciešama palīdzība problēmu novēršanā? Meklējiet vai sāciet diskusiju vietnē GitHub.