Δέμα
Μάθετε πώς να συμπεριλάβετε το Bootstrap στο έργο σας χρησιμοποιώντας το Parcel.
Εγκαταστήστε το Parcel
Εγκαταστήστε το Parcel Bundler .
Εγκαταστήστε το 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