Δέμα

Μάθετε πώς να συμπεριλάβετε το Bootstrap στο έργο σας χρησιμοποιώντας το Parcel.

Σε αυτήν την σελίδα

Εγκαταστήστε το Parcel

Εγκαταστήστε το Bootstrap

Εγκαταστήστε το bootstrap ως λειτουργική μονάδα Node.js χρησιμοποιώντας npm.

Το Bootstrap εξαρτάται από το Popper , το οποίο καθορίζεται στην peerDependenciesιδιότητα. Αυτό σημαίνει ότι θα πρέπει να φροντίσετε να προσθέσετε και τα δύο στη package.jsonχρήση npm install @popperjs/core.

Όταν ολοκληρωθούν όλα, το έργο σας θα δομηθεί ως εξής:

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

Εισαγωγή JavaScript

Εισαγάγετε το JavaScript του Bootstrap στο σημείο εισόδου της εφαρμογής σας (συνήθως src/index.js). Μπορείτε να εισαγάγετε όλα τα πρόσθετά μας σε ένα αρχείο ή ξεχωριστά εάν χρειάζεστε μόνο ένα υποσύνολο από αυτά.

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

Για να αξιοποιήσετε πλήρως τις δυνατότητες του Bootstrap και να το προσαρμόσετε στις ανάγκες σας, χρησιμοποιήστε τα αρχεία προέλευσης ως μέρος της διαδικασίας ομαδοποίησης του έργου σας.

Δημιουργήστε τα δικά σας scss/custom.scssγια να εισαγάγετε τα αρχεία Sass του Bootstrap και, στη συνέχεια, να παρακάμψετε τις ενσωματωμένες προσαρμοσμένες μεταβλητές .

Δημιουργία εφαρμογής

Συμπεριλάβετε πριν από την ετικέτα src/index.jsκλεισίματος .</body>

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

Επεξεργασία`package.json`

Προσθέστε devκαι buildσενάρια στο package.jsonαρχείο σας.

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

Εκτελέστε το σενάριο προγραμματισμού

Η εφαρμογή σας θα είναι προσβάσιμη στη διεύθυνση http://127.0.0.1:1234.

npm run dev

Δημιουργία αρχείων εφαρμογών

Τα ενσωματωμένα αρχεία βρίσκονται στο build/φάκελο.

npm run build