Bootstrap și pachet

Ghidul oficial despre cum să includeți și să grupați CSS și JavaScript din Bootstrap în proiectul dvs. folosind Parcel.

Pe aceasta pagina

Vrei să sari până la final? Descărcați codul sursă și demonstrația de lucru pentru acest ghid din depozitul twbs/examples . De asemenea, puteți deschide exemplul în StackBlitz , dar nu îl puteți rula deoarece Parcel nu este acceptat în prezent acolo.

Înființat

Construim un proiect Parcel cu Bootstrap de la zero, așa că există câteva cerințe preliminare și pași inițiali înainte de a putea începe cu adevărat. Acest ghid necesită să aveți instalat Node.js și să fiți familiarizat cu terminalul.

Creați un folder de proiect și configurați npm. Vom crea my-projectfolderul și vom inițializa npm cu -yargumentul pentru a evita ca acesta să ne pună toate întrebările interactive.
```
mkdir my-project && cd my-project
npm init -y
```
Instalați Parcel. Spre deosebire de ghidul nostru Webpack, aici există doar o singură dependență de instrument de compilare. Parcel va instala automat transformatoare de limbă (cum ar fi Sass) pe măsură ce le detectează. Folosim --save-devsă semnalăm că această dependență este doar pentru dezvoltare și nu pentru producție.
```
npm i --save-dev parcel
```
Instalați Bootstrap. Acum putem instala Bootstrap. De asemenea, vom instala Popper, deoarece meniurile noastre derulante, popover-urile și sfaturile de instrumente depind de el pentru poziționarea lor. Dacă nu intenționați să utilizați acele componente, puteți omite Popper aici.
```
npm i --save bootstrap @popperjs/core
```

Acum că avem toate dependențele necesare instalate, ne putem pune pe treabă creând fișierele de proiect și importând Bootstrap.

Structura proiectului

Am creat deja my-projectfolderul și am inițializat npm. Acum vom crea și srcfolderul, foaia de stil și fișierul JavaScript pentru a completa structura proiectului. Rulați următoarele din my-project, sau creați manual folderul și structura fișierelor prezentate mai jos.

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

Când ați terminat, proiectul dvs. complet ar trebui să arate astfel:

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

În acest moment, totul este la locul potrivit, dar Parcel are nevoie de o pagină HTML și de un script npm pentru a porni serverul nostru.

Configurați Parcel

Cu dependențele instalate și folderul nostru de proiect pregătit pentru ca noi să începem codificarea, acum putem configura Parcel și ne rulăm proiectul local. Parcel în sine nu necesită fișier de configurare prin proiectare, dar avem nevoie de un script npm și un fișier HTML pentru a porni serverul nostru.

Completați src/index.htmlfișierul. Parcel are nevoie de o pagină pentru redare, așa că ne folosim index.htmlpagina pentru a configura câteva coduri HTML de bază, inclusiv fișierele noastre CSS și 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>

Includem un pic de stil Bootstrap aici cu div class="container"și , <button>astfel încât să vedem când CSS-ul Bootstrap este încărcat de Webpack.

Parcel va detecta automat că folosim Sass și va instala pluginul Sass Parcel pentru a-l susține. Cu toate acestea, dacă doriți, puteți rula și manual npm i --save-dev @parcel/transformer-sass.

Adăugați scripturile Parcel npm. Deschideți package.jsonși adăugați următorul startscript la scriptsobiect. Vom folosi acest script pentru a porni serverul nostru de dezvoltare Parcel și pentru a reda fișierul HTML pe care l-am creat după ce este compilat în distdirector.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Și, în sfârșit, putem începe Parcel. Din my-projectfolderul din terminalul dvs., rulați acel script npm nou adăugat:
```
npm start
```

În următoarea și ultima secțiune a acestui ghid, vom importa toate CSS și JavaScript din Bootstrap.

Import Bootstrap

Importarea Bootstrap în Parcel necesită două importuri, unul în nostru styles.scssși unul în main.js.

Importați CSS-ul Bootstrap. Adăugați următoarele la src/scss/styles.scsspentru a importa toate sursele Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
De asemenea, puteți importa foile noastre de stil individual dacă doriți. Citiți documentele noastre de import Sass pentru detalii.
Importă JS Bootstrap. Adăugați următoarele la src/js/main.jspentru a importa toate JS-urile Bootstrap. Popper va fi importat automat prin Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
De asemenea, puteți importa pluginuri JavaScript individual, după cum este necesar, pentru a menține dimensiunile pachetelor mai mici:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Citiți documentele noastre JavaScript pentru mai multe informații despre cum să utilizați pluginurile Bootstrap.
Și ai terminat! 🎉 Cu sursa Bootstrap Sass și JS complet încărcate, serverul dvs. local de dezvoltare ar trebui acum să arate așa.

Acum puteți începe să adăugați orice componente Bootstrap pe care doriți să le utilizați. Asigurați-vă că consultați exemplul de proiect complet Parcel pentru a afla cum să includeți Sass personalizat suplimentar și să vă optimizați construcția importând numai părțile CSS și JS Bootstrap de care aveți nevoie.

Vedeți ceva în neregulă sau depășit aici? Vă rugăm să deschideți o problemă pe GitHub . Aveți nevoie de ajutor pentru depanare? Căutați sau începeți o discuție pe GitHub.