Paket

Erfahren Sie, wie Sie Bootstrap mit Parcel in Ihr Projekt einbinden.

Auf dieser Seite

Paket installieren

Bootstrap installieren

Installieren Sie Bootstrap als Node.js-Modul mit npm.

Bootstrap hängt von Popper ab , das in der peerDependenciesEigenschaft angegeben ist. Dies bedeutet, dass Sie sicherstellen müssen, dass Sie beide zu Ihrer package.jsonVerwendung hinzufügen npm install @popperjs/core.

Wenn alles abgeschlossen ist, wird Ihr Projekt wie folgt strukturiert sein:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

JavaScript importieren

Importieren Sie das JavaScript von Bootstrap in den Einstiegspunkt Ihrer App (normalerweise src/index.js). Sie können alle unsere Plugins in einer Datei oder separat importieren, wenn Sie nur einen Teil davon benötigen.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

CSS importieren

Um das volle Potenzial von Bootstrap auszuschöpfen und es an Ihre Bedürfnisse anzupassen, verwenden Sie die Quelldateien als Teil des Bündelungsprozesses Ihres Projekts.

Erstellen Sie Ihre eigenen , um die Sass-Dateien von Bootstrapscss/custom.scss zu importieren, und überschreiben Sie dann die integrierten benutzerdefinierten Variablen .

App erstellen

Vor src/index.jsdem schließenden </body>Tag einfügen.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

Bearbeiten`package.json`

Fügen Sie devund buildSkripte in Ihrer package.jsonDatei hinzu.

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

Führen Sie das Entwicklungsskript aus

Auf Ihre App kann unter zugegriffen werden http://127.0.0.1:1234.

npm run dev

Erstellen Sie App-Dateien

Built-Dateien sind in dem build/Ordner.

npm run build