Bootstrap & Pack

Ametlik juhend Bootstrapi CSS-i ja JavaScripti kaasamiseks ja komplekteerimiseks oma projekti, kasutades Parcelit.

Sellel lehel

Kas soovite lõpuni vahele jätta? Laadige twbs/examples hoidlast alla selle juhendi lähtekood ja töötav demo . Näite saate avada ka StackBlitzis, kuid mitte käivitada, sest seal ei toetata praegu paketti.

Seadistamine

Ehitame Bootstrapiga Pakiprojekti nullist üles, nii et enne, kui saame päriselt alustada, on mõned eeltingimused ja sammud. See juhend nõuab, et teil oleks installitud Node.js ja tunneksite terminali teatud määral.

Looge projekti kaust ja seadistage npm. Loome my-projectkausta ja initsialiseerime npm -yargumendiga, et see ei esitaks meile kõiki interaktiivseid küsimusi.
```
mkdir my-project && cd my-project
npm init -y
```
Installi Pack. Erinevalt meie veebipaketi juhendist on siin ainult üks ehitustööriistade sõltuvus. Pack installib automaatselt keeletrafod (nagu Sass), kui see neid tuvastab. Me kasutame --save-devmärku, et see sõltuvus on mõeldud ainult arendustegevuseks, mitte tootmiseks.
```
npm i --save-dev parcel
```
Installige Bootstrap. Nüüd saame installida Bootstrapi. Installime ka Popperi, kuna meie rippmenüüd, hüpikaknad ja tööriistaspikrid sõltuvad sellest oma asukoha määramisel. Kui te ei kavatse neid komponente kasutada, võite Popperi siit välja jätta.
```
npm i --save bootstrap @popperjs/core
```

Nüüd, kui meil on kõik vajalikud sõltuvused installitud, saame alustada projektifailide loomise ja Bootstrapi importimisega.

Projekti struktuur

Oleme my-projectkausta juba loonud ja npm initsialiseerinud. Nüüd loome srcprojekti struktuuri ümardamiseks ka kausta, laaditabeli ja JavaScripti faili. Käivitage alljärgnev my-projectvõi looge käsitsi allpool näidatud kausta- ja failistruktuur.

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

Kui olete lõpetanud, peaks teie kogu projekt välja nägema järgmine:

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

Praegu on kõik õiges kohas, kuid Parcel vajab meie serveri käivitamiseks HTML-lehte ja npm-skripti.

Paki konfigureerimine

Kui sõltuvused on installitud ja meie projektikaust on kodeerimise alustamiseks valmis, saame nüüd konfigureerida Packi ja käivitada oma projekti kohapeal. Pakk ise ei vaja konfiguratsioonifaili, kuid vajame oma serveri käivitamiseks npm-skripti ja HTML-faili.

Täitke src/index.htmlfail. Pack vajab renderdamiseks lehte, seega kasutame oma index.htmllehte mõne põhilise HTML-i, sealhulgas CSS- ja JavaScript-failide seadistamiseks.

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

Lisame siia veidi Bootstrapi stiili koos jaga div class="container", <button>et näeksime, millal Webpack laadib Bootstrapi CSS-i.

Pack tuvastab automaatselt, et kasutame Sassi, ja installib selle toetamiseks pistikprogrammi Sass Parcel . Soovi korral saate aga ka käsitsi käivitada npm i --save-dev @parcel/transformer-sass.

Lisage Paki npm skriptid. Avage ja lisage objektile package.jsonjärgmine startskript . scriptsKasutame seda skripti oma Paki arendusserveri käivitamiseks ja loodud HTML-faili renderdamiseks pärast selle distkataloogi kompileerimist.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ja lõpuks saame alustada Packiga. Käivitage oma terminali my-projectkaustas äsja lisatud npm-skript:
```
npm start
```

Selle juhendi järgmises ja viimases jaotises impordime kogu Bootstrapi CSS-i ja JavaScripti.

Impordi Bootstrap

Bootstrapi importimine paketti nõuab kahte importi, üks meie styles.scssja teine meie main.js.

Importige Bootstrapi CSS. src/scss/styles.scssKogu Bootstrapi allika Sassi importimiseks lisage järgmine .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Soovi korral saate meie laaditabeleid ka eraldi importida. Lisateavet leiate meie Sassi impordi dokumentidest .
Importige Bootstrapi JS. src/js/main.jsKogu Bootstrapi JS-i importimiseks lisage järgmine . Popper imporditakse automaatselt Bootstrapi kaudu.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Vajadusel saate JavaScripti pistikprogramme ka ükshaaval importida, et kimpude suurust vähendada.
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrapi pistikprogrammide kasutamise kohta lisateabe saamiseks lugege meie JavaScripti dokumente .
Ja ongi valmis! 🎉 Kui Bootstrapi allikas Sass ja JS on täielikult laetud, peaks teie kohalik arendusserver nüüd välja nägema selline.

Nüüd saate hakata lisama mis tahes Bootstrapi komponente, mida soovite kasutada. Vaadake kindlasti täielikku Parceli näidisprojekti , kuidas lisada täiendavat kohandatud Sassi ja optimeerida oma ehitust, importides ainult Bootstrapi CSS-i ja JS-i need osad, mida vajate.

Kas näete siin midagi valesti või aegunud? Avage probleem GitHubis . Kas vajate veaotsingul abi? Otsige või alustage arutelu GitHubis.