Bootstrap & Paket

Die offizielle Anleitung zum Einbinden und Bündeln von CSS und JavaScript von Bootstrap in Ihr Projekt mit Parcel.

Auf dieser Seite

Willst du zum Ende springen? Laden Sie den Quellcode und die funktionierende Demo für dieses Handbuch aus dem twbs/examples-Repository herunter . Sie können das Beispiel auch in StackBlitz öffnen , aber nicht ausführen, da Parcel dort derzeit nicht unterstützt wird.

Konfiguration

Wir bauen ein Parcel-Projekt mit Bootstrap von Grund auf neu auf, daher gibt es einige Voraussetzungen und Vorabschritte, bevor wir wirklich loslegen können. Für diese Anleitung müssen Sie Node.js installiert haben und mit dem Terminal vertraut sein.

Erstellen Sie einen Projektordner und richten Sie npm ein. Wir erstellen den my-projectOrdner und initialisieren npm mit dem -yArgument, um zu vermeiden, dass es uns alle interaktiven Fragen stellt.
```
mkdir my-project && cd my-project
npm init -y
```
Paket installieren. Im Gegensatz zu unserem Webpack-Leitfaden gibt es hier nur eine einzige Build-Tool-Abhängigkeit. Parcel installiert automatisch Sprachtransformatoren (wie Sass), sobald es sie erkennt. Wir verwenden , um --save-devzu signalisieren, dass diese Abhängigkeit nur für Entwicklungszwecke und nicht für die Produktion ist.
```
npm i --save-dev parcel
```
Bootstrap installieren. Jetzt können wir Bootstrap installieren. Wir werden auch Popper installieren, da unsere Dropdowns, Popovers und Tooltips für ihre Positionierung davon abhängen. Wenn Sie diese Komponenten nicht verwenden möchten, können Sie Popper hier weglassen.
```
npm i --save bootstrap @popperjs/core
```

Nachdem wir nun alle erforderlichen Abhängigkeiten installiert haben, können wir uns an die Arbeit machen, die Projektdateien erstellen und Bootstrap importieren.

Projektstruktur

Wir haben den my-projectOrdner bereits erstellt und npm initialisiert. Jetzt erstellen wir auch unseren srcOrdner, unser Stylesheet und unsere JavaScript-Datei, um die Projektstruktur abzurunden. Führen Sie Folgendes aus my-projectoder erstellen Sie manuell die unten gezeigte Ordner- und Dateistruktur.

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

Wenn Sie fertig sind, sollte Ihr komplettes Projekt so aussehen:

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

An diesem Punkt ist alles an der richtigen Stelle, aber Parcel benötigt eine HTML-Seite und ein npm-Skript, um unseren Server zu starten.

Paket konfigurieren

Mit installierten Abhängigkeiten und unserem Projektordner, der bereit ist, mit dem Codieren zu beginnen, können wir jetzt Parcel konfigurieren und unser Projekt lokal ausführen. Parcel selbst benötigt keine Konfigurationsdatei, aber wir brauchen ein npm-Skript und eine HTML-Datei, um unseren Server zu starten.

Füllen Sie die src/index.htmlDatei aus. Parcel benötigt eine Seite zum Rendern, daher verwenden wir unsere index.htmlSeite, um grundlegendes HTML einzurichten, einschließlich unserer CSS- und 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>
```
Wir fügen hier ein wenig Bootstrap-Styling mit div class="container"und ein <button>, damit wir sehen, wann Bootstrap-CSS von Webpack geladen wird.

Parcel erkennt automatisch, dass wir Sass verwenden, und installiert das Sass Parcel-Plugin , um es zu unterstützen. Wenn Sie möchten, können Sie jedoch auch manuell ausführen npm i --save-dev @parcel/transformer-sass.
Fügen Sie die Parcel-npm-Skripts hinzu. Öffnen Sie die und fügen Sie dem Objekt package.jsondas folgende startSkript hinzu. scriptsWir verwenden dieses Skript, um unseren Parcel-Entwicklungsserver zu starten und die von uns erstellte HTML-Datei zu rendern, nachdem sie in das distVerzeichnis kompiliert wurde.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Und endlich können wir Parcel starten. Führen Sie im my-projectOrdner in Ihrem Terminal das neu hinzugefügte npm-Skript aus:
```
npm start
```

Im nächsten und letzten Abschnitt dieses Handbuchs importieren wir das gesamte CSS und JavaScript von Bootstrap.

Bootstrap importieren

Das Importieren von Bootstrap in Parcel erfordert zwei Importe, einen in unsere styles.scssund einen in unsere main.js.

Importieren Sie das CSS von Bootstrap. Fügen Sie Folgendes hinzu, src/scss/styles.scssum den gesamten Quell-Sass von Bootstrap zu importieren.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Auf Wunsch können Sie unsere Stylesheets auch einzeln importieren. Lesen Sie unsere Sass-Importdokumentation für Details.
Importieren Sie JS von Bootstrap. Fügen Sie Folgendes hinzu, src/js/main.jsum das gesamte JS von Bootstrap zu importieren. Popper wird automatisch über Bootstrap importiert.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Sie können JavaScript-Plug-ins nach Bedarf auch einzeln importieren, um die Bundle-Größen gering zu halten:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lesen Sie unsere JavaScript -Dokumentation für weitere Informationen zur Verwendung der Plug-ins von Bootstrap.
Und du bist fertig! 🎉 Wenn Sass und JS von Bootstrap vollständig geladen sind, sollte Ihr lokaler Entwicklungsserver jetzt so aussehen.

Jetzt können Sie alle Bootstrap-Komponenten hinzufügen, die Sie verwenden möchten. Schauen Sie sich unbedingt das vollständige Parcel-Beispielprojekt an, um zu erfahren, wie Sie zusätzliches benutzerdefiniertes Sass einbinden und Ihren Build optimieren können, indem Sie nur die Teile von Bootstrap’s CSS und JS importieren, die Sie benötigen.

Sehen Sie hier etwas falsch oder veraltet? Bitte öffnen Sie ein Issue auf GitHub . Benötigen Sie Hilfe bei der Fehlerbehebung? Suchen oder starten Sie eine Diskussion auf GitHub.