Bootstrap & Pak

Den offiziellen Guide fir wéi Dir Bootstrap's CSS a JavaScript an Ärem Projet mat Parcel enthält a bündelt.

Op dëser Säit

Wëllt Dir bis zum Schluss sprangen? Luet de Quellcode an d'Aarbechtsdemo fir dëse Guide aus dem twbs/examples Repository erof . Dir kënnt d'Beispill och op StackBlitz opmaachen awer net lafen well Parcel am Moment net do ënnerstëtzt gëtt.

Ageriicht

Mir bauen e Parcel-Projet mat Bootstrap vun Null un, also et sinn e puer Viraussetzungen a Virausschrëtt ier mir wierklech kënne starten. Dëse Guide erfuerdert datt Dir Node.js installéiert hutt an e bësse Bekanntschaft mam Terminal.

Erstellt e Projet Dossier a setup npm. Mir erstellen den my-projectDossier an initialiséieren npm mam -yArgument fir ze vermeiden datt et eis all interaktiv Froen stellt.
```
mkdir my-project && cd my-project
npm init -y
```
Installéiert Pak. Am Géigesaz zu eisem Webpack Guide gëtt et nëmmen eng eenzeg Build Tool Ofhängegkeet hei. Parcel installéiert automatesch Sproochtransformatoren (wéi Sass) wéi se se erkennen. Mir benotze --save-devfir ze signaliséieren datt dës Ofhängegkeet nëmme fir Entwécklungsnotzung ass an net fir Produktioun.
```
npm i --save-dev parcel
```
Installéiert Bootstrap. Elo kënne mir Bootstrap installéieren. Mir wäerten och Popper installéieren well eis Dropdowns, Popovers, an Tooltips dovun ofhänken fir hir Positionéierung. Wann Dir net plangt dës Komponenten ze benotzen, kënnt Dir de Popper hei ausgoen.
```
npm i --save bootstrap @popperjs/core
```

Elo datt mir all déi néideg Ofhängegkeeten installéiert hunn, kënne mir schaffen fir d'Projetdateien ze kreéieren an Bootstrap z'importéieren.

Projet Struktur

Mir hunn den my-projectDossier schonn erstallt an npm initialiséiert. Elo wäerte mir och eisen srcDossier, Stylesheet, a JavaScript Datei erstellen fir d'Projetstruktur ofzeschléissen. Fëllt déi folgend aus my-project, oder erstellt den Dossier an d'Dateistruktur manuell hei ënnen.

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

Wann Dir fäerdeg sidd, sollt Äre komplette Projet esou ausgesinn:

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

Zu dësem Zäitpunkt ass alles op der richteger Plaz, awer Parcel brauch eng HTML Säit an npm Skript fir eise Server ze starten.

Parzell konfiguréieren

Mat Ofhängegkeeten installéiert an eisem Projet Dossier prett fir eis Kodéierung unzefänken, kënne mir elo Parcel konfiguréieren an eise Projet lokal lafen. Parzell selwer erfuerdert keng Konfiguratiounsdatei vum Design, awer mir brauche en npm Skript an eng HTML Datei fir eise Server ze starten.

Fëllt de src/index.htmlFichier aus. Parzell brauch eng Säit fir ze renderen, also benotze mir eis index.htmlSäit fir e puer Basis HTML opzestellen, dorënner eis CSS a JavaScript Dateien.
```
<!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>
```
Mir enthalen e bësse Bootstrap Styling hei mat der div class="container"a <button>sou datt mir gesinn wéini Bootstrap's CSS vum Webpack gelueden gëtt.

Parcel wäert automatesch erkennen datt mir Sass benotzen an de Sass Parcel Plugin installéiere fir et z'ënnerstëtzen. Wéi och ëmmer, wann Dir wëllt, kënnt Dir och manuell lafen npm i --save-dev @parcel/transformer-sass.
Füügt d'Parcel npm Skripte derbäi. Öffnen de package.jsona füügt de folgende startSkript un den scriptsObjet. Mir benotzen dëse Skript fir eise Parcel Entwécklungsserver unzefänken an d'HTML Datei ze maachen, déi mir erstallt hunn nodeems se an de distVerzeichnis kompiléiert ass.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
An endlech kënne mir Parcel ufänken. Aus dem my-projectDossier an Ärem Terminal, lafen dat neit addéierten npm Skript:
```
npm start
```

An der nächster a leschter Sektioun zu dësem Guide importéiere mir all Bootstrap's CSS a JavaScript.

Import Bootstrap

Bootstrap an Parcel importéieren erfuerdert zwee Importer, een an eis styles.scssan een an eis main.js.

Import Bootstrap's CSS. Füügt déi folgend fir src/scss/styles.scssall Bootstrap's Quell Sass z'importéieren.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Dir kënnt eis Stylesheeten och individuell importéieren wann Dir wëllt. Liest eis Sass Import Dokumenter fir Detailer.
Import Bootstrap's JS. Füügt déi folgend fir src/js/main.jsall Bootstrap's JS z'importéieren. Popper gëtt automatesch duerch Bootstrap importéiert.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Dir kënnt och JavaScript Plugins individuell importéieren wéi néideg fir Bündelgréissten erof ze halen:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Liest eis JavaScript Dokumenter fir méi Informatioun iwwer wéi Dir Bootstrap's Plugins benotzt.
An Dir sidd fäerdeg! 🎉 Mat Bootstrap Quell Sass a JS voll gelueden, sollt Äre lokalen Entwécklungsserver elo esou ausgesinn.

Elo kënnt Dir ufänken all Bootstrap Komponenten ze addéieren déi Dir benotze wëllt. Gitt sécher de komplette Parcel Beispillprojet ze kucken fir wéi Dir zousätzlech personaliséiert Sass enthält an Äre Bau optiméiert andeems Dir nëmmen déi Deeler vum Bootstrap's CSS an JS importéiert déi Dir braucht.

Gesinn eppes falsch oder aktuell hei? Maacht w.e.g. en Thema op GitHub op . Braucht Dir Hëllef fir Probleemer ze léisen? Sicht oder start eng Diskussioun op GitHub.