Bootstrap & Parcel

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

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

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

Ρύθμιση

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

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

Τώρα που έχουμε εγκαταστήσει όλες τις απαραίτητες εξαρτήσεις, μπορούμε να ξεκινήσουμε τη δουλειά με τη δημιουργία των αρχείων του έργου και την εισαγωγή του 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

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

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

Σε αυτό το σημείο, όλα είναι στη σωστή θέση, αλλά το Parcel χρειάζεται μια σελίδα HTML και ένα σενάριο npm για να ξεκινήσει ο διακομιστής μας.

Διαμόρφωση δέματος

Με εγκατεστημένες εξαρτήσεις και έτοιμο τον φάκελο του έργου μας για να ξεκινήσουμε την κωδικοποίηση, μπορούμε τώρα να διαμορφώσουμε το Parcel και να εκτελέσουμε το έργο μας τοπικά. Το ίδιο το δέμα δεν απαιτεί αρχείο διαμόρφωσης από το σχεδιασμό, αλλά χρειαζόμαστε ένα σενάριο npm και ένα αρχείο HTML για να ξεκινήσουμε τον διακομιστή μας.

Συμπληρώστε το src/index.htmlαρχείο. Το δέμα χρειάζεται μια σελίδα για απόδοση, επομένως χρησιμοποιούμε τη index.htmlσελίδα μας για να ρυθμίσουμε κάποιο βασικό HTML, συμπεριλαμβανομένων των αρχείων CSS και JavaScript.
```
<!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>
```
Περιλαμβάνουμε εδώ ένα μικρό στυλ Bootstrap με το div class="container"και <button>έτσι ώστε να βλέπουμε πότε φορτώνεται το CSS του Bootstrap από το Webpack.

Το Parcel θα εντοπίσει αυτόματα ότι χρησιμοποιούμε Sass και θα εγκαταστήσει την προσθήκη Sass Parcel για να το υποστηρίξει. Ωστόσο, εάν θέλετε, μπορείτε επίσης να εκτελέσετε χειροκίνητα npm i --save-dev @parcel/transformer-sass.
Προσθέστε τα σενάρια Parcel npm. Ανοίξτε το package.jsonκαι προσθέστε την ακόλουθη startδέσμη ενεργειών στο scriptsαντικείμενο. Θα χρησιμοποιήσουμε αυτό το σενάριο για να ξεκινήσουμε τον διακομιστή ανάπτυξης Parcel και να αποδώσουμε το αρχείο HTML που δημιουργήσαμε αφού μεταγλωττιστεί στον distκατάλογο.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Και τέλος, μπορούμε να ξεκινήσουμε το Parcel. Από το my-projectφάκελο στο τερματικό σας, εκτελέστε αυτό το σενάριο npm που προστέθηκε πρόσφατα:
```
npm start
```

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

Εισαγωγή Bootstrap

Η εισαγωγή Bootstrap στο Parcel απαιτεί δύο εισαγωγές, μία στο δικό μας styles.scssκαι μία στο δικό μας main.js.

Εισαγάγετε το CSS του Bootstrap. Προσθέστε τα παρακάτω για src/scss/styles.scssνα εισαγάγετε όλη την πηγή Sass του Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Μπορείτε επίσης να εισάγετε τα φύλλα στυλ μας μεμονωμένα, αν θέλετε. Διαβάστε τα έγγραφα εισαγωγής Sass για λεπτομέρειες.
Εισαγάγετε το JS του Bootstrap. Προσθέστε τα παρακάτω για src/js/main.jsνα εισαγάγετε όλα τα JS του Bootstrap. Το Popper θα εισαχθεί αυτόματα μέσω του Bootstrap.
```
// 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 θέλετε να χρησιμοποιήσετε. Βεβαιωθείτε ότι έχετε ελέγξει το πλήρες παράδειγμα του έργου Parcel για το πώς να συμπεριλάβετε πρόσθετο προσαρμοσμένο Sass και να βελτιστοποιήσετε την κατασκευή σας εισάγοντας μόνο τα μέρη του CSS και του JS του Bootstrap που χρειάζεστε.

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