Bootstrap & Vite

Ο επίσημος οδηγός για τον τρόπο συμπερίληψης και δέσμης CSS και JavaScript του Bootstrap στο έργο σας χρησιμοποιώντας το Vite.

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

Θέλετε να μεταβείτε στο τέλος; Κατεβάστε τον πηγαίο κώδικα και την επίδειξη εργασίας για αυτόν τον οδηγό από το αποθετήριο twbs/examples . Μπορείτε επίσης να ανοίξετε το παράδειγμα στο StackBlitz για ζωντανή επεξεργασία.

Ρύθμιση

Χτίζουμε ένα έργο Vite με το Bootstrap από την αρχή, επομένως υπάρχουν ορισμένες προϋποθέσεις και τα πρώτα βήματα για να μπορέσουμε να ξεκινήσουμε πραγματικά. Αυτός ο οδηγός απαιτεί να έχετε εγκαταστήσει το Node.js και κάποια εξοικείωση με το τερματικό.

Δημιουργήστε ένα φάκελο έργου και ρυθμίστε το npm. Θα δημιουργήσουμε τον my-projectφάκελο και θα αρχικοποιήσουμε το npm με το -yόρισμα για να μην μας κάνει όλες τις διαδραστικές ερωτήσεις.
```
mkdir my-project && cd my-project
npm init -y
```
Εγκαταστήστε το Vite. Σε αντίθεση με τον οδηγό μας στο Webpack, υπάρχει μόνο μία εξάρτηση εργαλείου κατασκευής εδώ. Χρησιμοποιούμε --save-devγια να σηματοδοτήσουμε ότι αυτή η εξάρτηση είναι μόνο για αναπτυξιακή χρήση και όχι για παραγωγή.
```
npm i --save-dev vite
```
Εγκαταστήστε το Bootstrap. Τώρα μπορούμε να εγκαταστήσουμε το Bootstrap. Θα εγκαταστήσουμε επίσης το Popper καθώς τα αναπτυσσόμενα μενού, τα popover και οι συμβουλές εργαλείων εξαρτώνται από αυτό για την τοποθέτησή τους. Εάν δεν σκοπεύετε να χρησιμοποιήσετε αυτά τα στοιχεία, μπορείτε να παραλείψετε το Popper εδώ.
```
npm i --save bootstrap @popperjs/core
```
Εγκαταστήστε πρόσθετη εξάρτηση. Εκτός από το Vite και το Bootstrap, χρειαζόμαστε μια άλλη εξάρτηση (Sass) για τη σωστή εισαγωγή και δέσμη του CSS του Bootstrap.
```
npm i --save-dev sass
```

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

Δομή έργου

Έχουμε ήδη δημιουργήσει το my-projectφάκελο και έχουμε προετοιμάσει το npm. Τώρα θα δημιουργήσουμε επίσης το srcφάκελο, το φύλλο στυλ και το αρχείο JavaScript για να ολοκληρώσουμε τη δομή του έργου. Εκτελέστε τα παρακάτω από το my-projectή δημιουργήστε με μη αυτόματο τρόπο τη δομή φακέλου και αρχείου που φαίνεται παρακάτω.

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

Όταν τελειώσετε, το πλήρες έργο σας θα πρέπει να μοιάζει με αυτό:

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

Σε αυτό το σημείο, όλα είναι στη σωστή θέση, αλλά το Vite δεν θα λειτουργήσει γιατί δεν το έχουμε συμπληρώσει vite.config.jsακόμα.

Ρύθμιση παραμέτρων Vite

Με εγκατεστημένες εξαρτήσεις και έτοιμο το φάκελο του έργου μας για να ξεκινήσουμε την κωδικοποίηση, μπορούμε τώρα να διαμορφώσουμε το Vite και να εκτελέσουμε το έργο μας τοπικά.

Ανοίξτε vite.config.jsστον επεξεργαστή σας. Δεδομένου ότι είναι κενό, θα χρειαστεί να προσθέσουμε κάποια διαμόρφωση boilerplate σε αυτό για να μπορέσουμε να ξεκινήσουμε τον διακομιστή μας. Αυτό το μέρος της διαμόρφωσης λέει στο Vite ότι έπρεπε να αναζητήσει το JavaScript του έργου μας και πώς θα πρέπει να συμπεριφέρεται ο διακομιστής ανάπτυξης (τράβηγμα από το srcφάκελο με επανάληψη φόρτωσης).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
Στη συνέχεια συμπληρώνουμε src/index.html. Αυτή είναι η σελίδα HTML που θα φορτώσει το Vite στο πρόγραμμα περιήγησης για να χρησιμοποιήσει το πακέτο CSS και JS που θα προσθέσουμε σε αυτό στα επόμενα βήματα.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>
```
Περιλαμβάνουμε εδώ ένα μικρό στυλ Bootstrap με το div class="container"και <button>έτσι ώστε να βλέπουμε πότε φορτώνεται το CSS του Bootstrap από το Vite.
Τώρα χρειαζόμαστε ένα σενάριο npm για να τρέξουμε το Vite. Ανοίξτε package.jsonκαι προσθέστε το startσενάριο που φαίνεται παρακάτω (θα πρέπει να έχετε ήδη το σενάριο δοκιμής). Θα χρησιμοποιήσουμε αυτό το σενάριο για να ξεκινήσουμε τον τοπικό μας διακομιστή Vite dev.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Και τέλος, μπορούμε να ξεκινήσουμε το Vite. Από το my-projectφάκελο στο τερματικό σας, εκτελέστε αυτό το σενάριο npm που προστέθηκε πρόσφατα:
```
npm start
```

Στην επόμενη και τελευταία ενότητα αυτού του οδηγού, θα εισαγάγουμε όλα τα CSS και JavaScript του Bootstrap.

Εισαγωγή Bootstrap

Ρυθμίστε την εισαγωγή Sass του Bootstrap στο vite.config.js. Το αρχείο διαμόρφωσής σας έχει πλέον ολοκληρωθεί και θα πρέπει να ταιριάζει με το παρακάτω απόσπασμα. Το μόνο νέο μέρος εδώ είναι η resolveενότητα—το χρησιμοποιούμε για να προσθέσουμε ένα ψευδώνυμο στα αρχεία προέλευσης που βρίσκονται μέσα node_modulesγια να διατηρήσουμε τις εισαγωγές όσο το δυνατόν απλούστερες.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
Τώρα, ας εισάγουμε το CSS του Bootstrap. Προσθέστε τα παρακάτω για src/scss/styles.scssνα εισαγάγετε όλη την πηγή Sass του Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Μπορείτε επίσης να εισάγετε τα φύλλα στυλ μας μεμονωμένα, αν θέλετε. Διαβάστε τα έγγραφα εισαγωγής Sass για λεπτομέρειες.
Στη συνέχεια, φορτώνουμε το CSS και εισάγουμε το JavaScript του Bootstrap. Προσθέστε τα παρακάτω για src/js/main.jsνα φορτώσετε το CSS και να εισαγάγετε όλα τα JS του Bootstrap. Το Popper θα εισαχθεί αυτόματα μέσω του Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Μπορείτε επίσης να εισαγάγετε προσθήκες JavaScript μεμονωμένα, όπως απαιτείται, για να διατηρήσετε τα μεγέθη των δεσμίδων:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Διαβάστε τα έγγραφά μας JavaScript για περισσότερες πληροφορίες σχετικά με τον τρόπο χρήσης των προσθηκών του Bootstrap.
Και τελείωσες! 🎉 Με την πηγή Sass και το JS του Bootstrap πλήρως φορτωμένο, ο τοπικός διακομιστής ανάπτυξης θα πρέπει τώρα να μοιάζει με αυτό.

Τώρα μπορείτε να αρχίσετε να προσθέτετε οποιαδήποτε στοιχεία Bootstrap θέλετε να χρησιμοποιήσετε. Βεβαιωθείτε ότι έχετε ελέγξει το πλήρες παράδειγμα έργου Vite για το πώς μπορείτε να συμπεριλάβετε πρόσθετο προσαρμοσμένο Sass και να βελτιστοποιήσετε την κατασκευή σας εισάγοντας μόνο τα μέρη του CSS και του JS του Bootstrap που χρειάζεστε.

Βλέπετε κάτι λάθος ή ξεπερασμένο εδώ; Ανοίξτε ένα θέμα στο GitHub . Χρειάζεστε βοήθεια για την αντιμετώπιση προβλημάτων; Αναζητήστε ή ξεκινήστε μια συζήτηση στο GitHub.