Μια εισαγωγή στο Parcel.js, το Bundler εφαρμογών ιστού No-Config

Αυτή η ανάρτηση είναι η εισαγωγή σας στο Parcel.js, τον αυτοανακηρυγμένο "γρήγορο, μηδενικό πρόγραμμα διαμόρφωσης εφαρμογών ιστού." Εδώ είναι όλα όσα πρέπει να γνωρίζετε για να ξεκινήσετε:


Πολλοί προγραμματιστές front-end έχουν απογοητευτεί με μερικές από τις πολυπλοκότητες που σχετίζονται με τη δημιουργία εφαρμογών ιστού σήμερα. Είναι αρκετά τυπική πρακτική να συμπεριλάβετε κάποιο είδος εργαλείου κατασκευής ή ομαδοποίησης σε μια ροή εργασίας front-end, έτσι πολλοί προγραμματιστές έχουν εξετάσει τη χρήση ενός εργαλείου front-end όπως το webpack.

Webpack είναι το πιο δημοφιλές bundler και ακολούθησε τα τακούνια του Require.js, του Rollup και παρόμοιων λύσεων. Αλλά η καμπύλη μάθησης για ένα εργαλείο όπως το webpack είναι απότομη. Το ξεκίνημα με το webpack δεν είναι εύκολο λόγω των σύνθετων διαμορφώσεων. Ως αποτέλεσμα, τα τελευταία χρόνια προέκυψε μια άλλη λύση. Αυτό το εργαλείο δεν είναι απαραιτήτως ο πρώτος δρομέας, αλλά μια ευκολότερη αφομοίωση εναλλακτική λύση στο οριζόντιο δέσμη μονάδων μπροστινού άκρου. Παρουσιάζουμε το Parcel.js.

Εισαγωγή στο Parcel.js

Parcel.js (parceljs.org) είναι ακριβώς αυτό που θέλουν πολλοί αρχάριοι έως ενδιάμεσοι προγραμματιστές: Ένα απλό πακέτο χαμηλής διαμόρφωσης με το οποίο μπορείτε να ξεκινήσετε και να λειτουργείτε γρήγορα.

Ελπίζω ότι αυτό το σεμινάριο Parcel θα παρέχει μια εύκολη στην εισαγωγή αυτού του εργαλείου. Θα καλύψω τα βασικά και στη συνέχεια θα σας δείξω πώς να χρησιμοποιήσετε το Parcel για να συνδυάσετε μια απλή εφαρμογή ιστού που ενσωματώνει το Babel και το Sass.

�� Πίνακας περιεχομένων:

  1. Γιατί να χρησιμοποιήσετε ένα πρόγραμμα δέσμης εφαρμογών ιστού; #
  2. Εγκατάσταση Parcel.js #
  3. Δημιουργία σημείου εισαγωγής αρχείου #
  4. Η διανομή / φάκελος #
  5. Χρήση του Parcel.js με το Babel #
  6. Χρήση του Parcel.js με το Sass #
  7. Ομαδοποίηση πολλαπλών σεναρίων με δέμα #
  8. Διαχωρισμός κώδικα με Parcel.js #
  9. Η παραγωγή χτίζεται με το Parcel.js #
  10. Υπάρχουν μειονεκτήματα στη χρήση του Parcel; #

Ιστοσελίδα Parcel.js

Γιατί να χρησιμοποιήσετε ένα πρόγραμμα δέσμης εφαρμογών ιστού?

Δεν θα αφιερώσω πολύ χρόνο για να συζητήσω τους λόγους για τη χρήση ενός προγράμματος δέσμης εφαρμογών, όπως το Parcel.js, επειδή αυτό το θέμα έχει ασφαλώς καλυφθεί πριν. Αλλά εδώ είναι μια βασική αναλογία των πλεονεκτημάτων από τη χρήση ενός τέτοιου εργαλείου:

  • Η εφαρμογή σας θα έχει λιγότερα αιτήματα HTTP λόγω συνδυασμού σεναρίων ή φύλλων στυλ
  • Τα σενάρια και τα φύλλα στυλ μπορούν να φορτωθούν κατ ‘απαίτηση, βελτιώνοντας περαιτέρω την απόδοση
  • Τα σενάρια και τα φύλλα στυλ μπορούν να ελαχιστοποιηθούν αυτόματα για να παραδώσουν λιγότερα kilobyte στον χρήστη
  • Η εργασία ομαδοποίησης και ελαχιστοποίησης γίνεται αυτόματα από το εργαλείο, ελαχιστοποιώντας τη χειροκίνητη εργασία
  • Τα αρχεία ανάπτυξης οργανώνονται αρθρωτά, καθιστώντας τον κώδικά σας πολύ πιο εύκολο στη συντήρηση και τον εντοπισμό σφαλμάτων

Όπως μπορείτε να δείτε, τα οφέλη είναι πολλά και σχετίζονται κυρίως με την απόδοση και τη συντήρηση του έργου. Σίγουρα υπάρχουν πολλοί λόγοι για να χρησιμοποιήσετε ένα bundler, εάν αυτό είναι κάτι που δεν έχετε ακόμη σκεφτεί.

Με αυτόν τον τρόπο, ας ξεκινήσουμε με τα βασικά στοιχεία για να ξεκινήσετε και να τρέχετε με το Parcel.js. Θα εξετάσω αργά τις δυνατότητες σε αυτό το σεμινάριο χρησιμοποιώντας μερικά απλά παραδείγματα που θα μπορείτε εύκολα να ακολουθήσετε.

Εγκατάσταση του Parcel.js

Μπορείτε να εγκαταστήσετε το Parcel.js στο τερματικό σας χρησιμοποιώντας Νήματα ή npm. Για αυτό το σεμινάριο, θα χρησιμοποιήσω το npm. Ακολουθεί η εντολή να το εγκαταστήσετε παγκοσμίως, ώστε να μπορείτε να το χρησιμοποιήσετε σε οποιοδήποτε έργο:

npm εγκατάσταση parcel-bundler -g

Η σημαία -g την εγκαθιστά παγκοσμίως. Εάν θέλετε να το εγκαταστήσετε μόνο για ένα έργο και να το προσθέσετε στις devDependencies του έργου σας στο package.json, μπορείτε να εκτελέσετε την ίδια εντολή μέσα στον ριζικό φάκελο του έργου χρησιμοποιώντας τη σημαία –save-dev αντί για -g:

npm εγκατάσταση parcel-bundler –save-dev

Με την καθολική εγκατάσταση (η οποία θα είναι η πιο κοινή περίπτωση χρήσης), μπορείτε να ξεκινήσετε οποιοδήποτε έργο χρησιμοποιώντας την εντολή init. Χρησιμοποιήστε το τερματικό για να μεταβείτε στο φάκελο που θέλετε να χρησιμοποιήσετε ως τη ρίζα της εφαρμογής σας και εκτελέστε:

npm init -y

Η σημαία -y εμποδίζει το npm να υποβάλλει ερωτήσεις, χρησιμοποιώντας τις προεπιλογές για τη ρύθμιση. Υποθέτοντας ότι το έργο μου ονομάζεται parcel-demo, αυτό δημιουργεί ένα αρχείο package.json στη ρίζα που μοιάζει με αυτό:

{
"όνομα": "δέμα-επίδειξη",
"εκδοχή": "1.0.0",
"περιγραφή": "",
"κύριος": "index.js",
"σενάρια": {
"δοκιμή": "ηχώ \"Σφάλμα: δεν έχει καθοριστεί δοκιμή \" && έξοδος 1"
},
"λέξεις-κλειδιά": [],
"συντάκτης": "",
"άδεια": "ISC"
}

Εάν βρείτε κάποιο από τα παραπάνω σύγχυση λόγω της έλλειψης εξοικείωσής σας με το npm, μπορείτε να ρίξετε μια ματιά στο περιεκτικό μου φροντιστήριο για npm. Επικεντρώνεται στο να βοηθάει τους προγραμματιστές ιστού να κατανοήσουν το εργαλείο.

Δημιουργία σημείου εισαγωγής αρχείου

Για μια βασική ρύθμιση έργου, θα χρησιμοποιήσω το Parcel.js σε ένα αρχείο index.html που οδηγεί σε ένα κύριο αρχείο JavaScript που ονομάζεται index.js (όπως φαίνεται στο αρχείο package.json). Αυτό το αρχείο HTML θα χρησιμεύσει ως σημείο εισόδου στο δέμα μου. Το αρχείο HTML θα έχει ένα στοιχείο δέσμης ενεργειών που δείχνει το αρχείο JavaScript, οπότε θα μοιάζει με αυτό:

html>
<html>
<κεφάλι>
<τίτλος>Demotitle δεμάτων>
κεφάλι>
<σώμα>
<σενάριο src ="./js/index.js">γραφή>
σώμα>
html>

Μόλις έχω το σωστό αρχείο HTML και αρχείο JavaScript, μπορώ να ξεκινήσω τον ενσωματωμένο διακομιστή ανάπτυξης του Parcel εκτελώντας τα ακόλουθα στο τερματικό μου μέσα στο φάκελο του έργου μου:

parcel index.html

Αυτό ξεκινά το διακομιστή και του λέει ποιο αρχείο θα χρησιμοποιηθεί ως σημείο εισόδου. Ως αποτέλεσμα, λαμβάνω το ακόλουθο μήνυμα στην τελική συνεδρία μου:

Ο διακομιστής εκτελείται στο http: // localhost: 1234
√ Χτισμένο σε 887ms.

Τώρα μπορώ να ανοίξω το http: // localhost: 1234 / στο πρόγραμμα περιήγησής μου για να δω τι έχω δημιουργήσει μέχρι τώρα. Ο ζωντανός διακομιστής χρησιμοποιεί ζωντανή επαναφόρτωση και κάτι που ονομάζεται αντικατάσταση θερμής μονάδας. Αυτό θα ενημερώσει αυτόματα τις ενότητες σε μια σελίδα χωρίς να κάνει πλήρη ανανέωση σελίδας. Με αυτόν τον τρόπο μπορώ να δω την πρόοδο του build μου σε γρηγορότερα βήματα, καθώς δουλεύω.

Μόλις το Parcel.js τρέξει με τον διακομιστή του ενεργό, τυχόν αλλαγές που κάνω σε ένα αρχείο θα ξαναχτίσουν αυτόματα την εφαρμογή μου κάθε φορά που το αρχείο θα αποθηκευτεί. Για να το δούμε σε δράση, θα προσθέσω μια απλή γραμμή καταγραφής κονσόλας στο σενάριό μου. Αυτό θα ενεργοποιήσει το ακόλουθο μήνυμα στο τερματικό μου:

$ parcel index.html
Ο διακομιστής εκτελείται στο http: // localhost: 1234
√ Χτισμένο σε 1.08s.
√ Ενσωματωμένο 28ms.

Κάθε γραμμή “Built …” αντιπροσωπεύει μία έκδοση, η οποία ενεργοποιείται από μια αλλαγή στο περιεχόμενο και την αποθήκευση.

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

parcel watch index.html

Έχω το ίδιο αποτέλεσμα στην τερματική συνεδρία μου, με το Parcel.js να δημιουργεί την εφαρμογή μου και να περιμένει αλλαγές:

$ parcel watch index.html
√ Χτισμένο σε 855ms.

Ο διανομέας / φάκελος

Μόλις ξεκινήσω το Parcel.js είτε σε λειτουργία παρακολούθησης είτε μέσω του ενσωματωμένου διακομιστή, αν κοιτάξω μέσα στο φάκελο του έργου μου, θα δω μια δομή φακέλου και αρχείων όπως η ακόλουθη:

index.html
package.json
js /
└───── index.js
απόσταση /
└───── index.html
└───── js.00a46daa.js
└───── js.00a46daa.js.map

Παρατηρήστε το φάκελο dist που δημιουργείται αυτόματα. Εδώ είναι τα αρχεία παραγωγής μου. Δεν αγγίζω κανένα από αυτά τα αρχεία. Παρατηρήστε ότι το build Parcel μου έχει μετατρέψει αυτόματα το αρχείο index.js σε ένα με μια μοναδική έκδοση φιλική προς την κρυφή μνήμη (με ένα αναθεωρημένο ή “ανανεωμένο” όνομα αρχείου). Προστέθηκε επίσης ένα αρχείο χάρτη προέλευσης (μπορείτε να διαβάσετε σχετικά με τους χάρτες προέλευσης σε αυτήν την ανάρτηση).

Αν κοιτάξω στο αρχείο index.html μέσα στον φάκελο dist, θα δείτε τα εξής:

html>
<html>
<κεφάλι>
<τίτλος>Demotitle δεμάτων>
κεφάλι>
<σώμα>

<σενάριο src ="/js.00a46daa.js">γραφή>
σώμα>
html>

Παρατηρήστε την έκδοση dist του αρχείου index.html μου σωστά και βολικά στην έκδοση dist του αρχείου .js.

Εάν ο ιστότοπός μου περιλαμβάνει πολλά αρχεία που οδηγούν στα ίδια σενάρια (για παράδειγμα, about.html, contact.html κ.λπ.), μπορώ να χρησιμοποιήσω την ακόλουθη εντολή:

parcel index.html about.html contact.html

Αυτό λέει στο Parcel ότι θέλω να χρησιμοποιήσω πολλά σημεία εισόδου για να δημιουργήσω. Μπορώ επίσης να χρησιμοποιήσω την ακόλουθη εντολή για να πω στο Parcel.js να χρησιμοποιήσει όλα τα αρχεία HTML ως σημεία εισόδου:

δέμα * .html

Χρήση του Parcel.js με το Babel

Το Parcel.js έχει ενσωματωμένη υποστήριξη για διαφορετικούς κωδικούς transpilers, συμπεριλαμβανομένων Βαβυλωνία, το δημοφιλές εργαλείο για τη μετατροπή σύγχρονου JavaScript επόμενης γενιάς σε ισοδύναμο κώδικα που μπορεί να γίνει κατανοητό από όλα τα προγράμματα περιήγησης. Επειδή το Babel είναι ενσωματωμένο στο Parcel.js, δεν χρειάζεστε ένα ειδικό πρόσθετο για να το χρησιμοποιήσετε, λειτουργεί μόνο. Ας δούμε ένα παράδειγμα.

Θα προσθέσω τον ακόλουθο κώδικα στο αρχείο index.js:

συνάρτηση getInfo (όνομα, έτος = 2018, χρώμα = ‘μπλε’) {
console.log (όνομα, έτος, χρώμα);
}

getInfo («Chevy», 1957, «Πράσινο»);
getInfo («Benz», 1975);
getInfo («Honda»);

Αυτός ο κωδικός χρησιμοποιεί μια δυνατότητα ES6 που ονομάζεται προεπιλεγμένες παράμετροι, το οποίο μπορείτε να δείτε συγκεκριμένα στην κεφαλή λειτουργίας. Τα παλαιότερα προγράμματα περιήγησης δεν υποστηρίζουν προεπιλεγμένες παραμέτρους για συναρτήσεις. Για να βεβαιωθώ ότι ο κώδικας δεν φέρνει σφάλμα, χρειάζομαι το Babel για να μεταδώσω τον κώδικα σε ισοδύναμο κώδικα που λειτουργεί σε όλα τα προγράμματα περιήγησης. Μόλις αποθηκεύσω το αρχείο index.js, το Parcel.js θα αναδημιουργήσει την εφαρμογή μου και θα παράγει τα ακόλουθα στη θέση του κώδικα ES6 που έγραψα:

συνάρτηση getInfo (όνομα) {
var έτος = argument.length > 1 && ορίσματα [1]! == απροσδιόριστο; επιχειρήματα [1]: 2018;
var color = argument.length > 2 && ορίσματα [2]! == απροσδιόριστο; επιχειρήματα [2]: ‘blue’;
console.log (όνομα, έτος, χρώμα);
}

getInfo («Chevy», 1957, «Πράσινο»);
getInfo («Benz», 1975);
getInfo («Honda»);

Μπορείτε να χρησιμοποιήσετε το διαδικτυακό αντίγραφο του Babel στο δοκιμάστε το.

Και παρατηρήστε τον πιο σημαντικό παράγοντα εδώ: Δεν έκανα τίποτα για να εγκαταστήσω ή να διαμορφώσω το Babel – λειτουργεί απλώς έξω από το κουτί ως μέρος της προεπιλεγμένης ρύθμισης του Parcel! Φυσικά, μπορεί να θέλετε να προσθέσετε ορισμένες επιλογές διαμόρφωσης για να αλλάξετε το Babel για να κάνει αυτό που θέλετε. Σε αυτήν την περίπτωση, μπορείτε να προσθέσετε ένα αρχείο .babelrc στον ριζικό φάκελο του έργου σας, με τις προτιμήσεις διαμόρφωσης που περιλαμβάνονται. Μπορείτε να διαβάσετε περισσότερα για χρησιμοποιώντας ένα αρχείο .babelrc στον ιστότοπο Parcel.js.

Χρήση του Parcel.js με Sass

Παρόμοια με το Babel, το Parcel επίσης από προεπιλογή θα συντάξει αυτόματα τα αρχεία SCSS (Sass) σε έγκυρο CSS. Για να το δείξω αυτό, θα προσθέσω ένα φάκελο με το όνομα “css” στη ρίζα του παραδείγματος έργου μου. Σε αυτόν το φάκελο θα προσθέσω ένα αρχείο style.scss με τον ακόλουθο κωδικό Sass:

σώμα {
χρωμα μαυρο;

.ενότητα {
χρώμα: κόκκινο;
}
}

Χρησιμοποιώ τη λειτουργία ένθεσης επιλογέα του Sass. Θα προσθέσω την ακόλουθη γραμμή στην ενότητα των αρχείων HTML μου:

<σύνδεσμος rel ="φύλλο στυλ" href ="./css/style.scss">

Μόλις αποθηκευτούν όλα τα αρχεία μου, το Parcel θα παράγει μια νέα έκδοση στο φάκελο dist / μου με ένα μεταγλωττισμένο αρχείο CSS που έχει μετατρέψει το SCSS μου ως εξής:

σώμα {
χρωμα μαυρο;
}
σώμα .module {
χρώμα: κόκκινο;
}

Εφόσον έχω εγκαταστήσει το Sass στο σύστημά μου παγκοσμίως, το Parcel θα το κάνει αυτό αυτόματα, χωρίς να απαιτείται διαμόρφωση. Εάν δεν έχω καθολική εγκατάσταση του Sass, δεν υπάρχει πρόβλημα. Μπορώ απλώς να γράψω το SCSS μου και μετά να ξεκινήσω το Parcel και το Parcel θα εγκαταστήσει αυτόματα το Sass ως εξάρτηση για συγκεκριμένο έργο. Πολύ βολικό! Και πάλι αυτό είναι ιδιαίτερα χρήσιμο γιατί δεν απαιτεί καμία διαμόρφωση.

Και όπως ακριβώς και με το Babel, μπορώ να επιλέξω να επιλέξω με τις προεπιλεγμένες επιλογές διαμόρφωσης που συνοδεύουν το Sass. Ή μπορώ να δημιουργήσω ένα αρχείο .sassrc στη ρίζα του έργου μου και να προσθέσω τις δικές μου διαμορφώσεις.

Ομαδοποίηση πολλαπλών σεναρίων με δέμα

Μέχρι στιγμής, τα παραδείγματα που έχω δείξει είναι απλώς να σας βοηθήσουμε να τρέξετε με το Parcel, ώστε να έχετε μια βασική ιδέα για το πώς λειτουργεί. Όπως αναφέρθηκε προηγουμένως, η ισχύς οποιουδήποτε bundler είναι η δυνατότητα αυτόματου συνδυασμού πολλαπλών αρχείων σε ένα μόνο αρχείο. Αυτό βοηθά στη μείωση των αιτημάτων HTTP και στη βελτίωση της ταχύτητας του ιστότοπου ή της εφαρμογής σας.

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

Για να το δείξω αυτό, θα προσθέσω ένα ξεχωριστό αρχείο που ονομάζεται module.js που θα περιέχει την ακόλουθη JavaScript:

εξαγωγή let color = ‘green’;

προσθήκη συνάρτησης εξαγωγής (n1, n2) {
επιστροφή n1 + n2;
}

Αυτός είναι μόνο ένας βασικός κώδικας για την εξαγωγή δύο αντικειμένων: Μια μεταβλητή και μια συνάρτηση. Στο αρχείο index.js θα εισαγάγω αυτούς τους πόρους με τον ακόλουθο κώδικα:

εισαγωγή {color, add} από ‘../js/module.js’;

console.log (χρώμα); // "πράσινος"
console.log (προσθήκη (20, 40)); // 60

Και πάλι, αυτό είναι απλώς βασική σύνταξη μονάδας ES6. Δεν θα αναφερθώ στις λεπτομέρειες για το πώς λειτουργεί εδώ. Το όμορφο μέρος για αυτό είναι το γεγονός ότι δεν χρειάστηκε να προσδιορίσω στο αρχείο HTML μου ότι χρησιμοποιούσα μια ενότητα. Κανονικά η ετικέτα σεναρίου μου θα μοιάζει με αυτό, με το χαρακτηριστικό type που έχει οριστεί σε module:

<σενάριο src ="./js/index.js" τύπος ="μονάδα μέτρησης">γραφή>

Αυτό όμως δεν είναι απαραίτητο. Το Parcel αναγνωρίζει την ενότητα που εισάγεται και συνδυάζει τα δύο σενάρια μου σε έναν πόρο φιλικό προς την απόδοση. Αυτό συμβαίνει χωρίς καμία ειδική διαμόρφωση ή προσθήκες. Και όπως και τα προηγούμενα παραδείγματα, ο κώδικας μεταφέρεται χρησιμοποιώντας το Babel σε κώδικα ισοδύναμου ES5 που θα μου δώσει την περισσότερη υποστήριξη προγράμματος περιήγησης.

Διαχωρισμός κώδικα με Parcel.js

Ένα ακόμη χαρακτηριστικό στο Parcel που λειτουργεί χωρίς καμία διαμόρφωση είναι διαχωρισμός κώδικα. Σε ορισμένες περιπτώσεις, θα ήθελα όλες οι ενότητες μου να φορτωθούν σε όλες τις σελίδες μου. Αλλά σε άλλες περιπτώσεις, θα ήθελα μόνο να φορτώσω συγκεκριμένες ενότητες σε συγκεκριμένες σελίδες, σε συγκεκριμένα περιβάλλοντα. Αυτό μου επιτρέπει να κάνω διαχωρισμό κώδικα.

Νωρίτερα ανέφερα ότι το παράδειγμα έργου μου περιλαμβάνει τρεις σελίδες: index.html, about.html και contact.html. Ας υποθέσουμε ότι θέλω να τρέξω το ίδιο πακέτο JavaScript και στις τρεις σελίδες, αλλά στη σελίδα about.html έχω ένα κουμπί που ενεργοποιεί κάτι συγκεκριμένο. Αλλά θέλω μόνο αυτός ο κώδικας να φορτώνεται όταν πατηθεί αυτό το κουμπί.

Δείτε πώς φαίνεται αυτός ο κώδικας χρησιμοποιώντας τη δυνατότητα διαχωρισμού κώδικα:

εάν (document.querySelector (‘. about’)) {
document.querySelector (‘. about’). addEventListener (‘κλικ’, () => {
εισαγωγή (‘../ js / about.js’). τότε (
document.body.innerHTML + = ‘Πληροφορίες για τη σελίδα που ενημερώθηκε’;
)
});
}

Παρατηρήστε ότι ενσωματώνει μια νέα δυνατότητα JavaScript, δυναμικές εισαγωγές χρησιμοποιώντας τη συνάρτηση εισαγωγής (). Αυτό μου επιτρέπει να φορτώσω δυναμικά τον κώδικα που θέλω σε μια συγκεκριμένη παρουσία. Σε αυτήν την περίπτωση, το κάνω όταν πατηθεί ένα κουμπί στη σελίδα σχετικά. Η δυνατότητα εισαγωγής () επιστρέφει μια υπόσχεση, οπότε μπορώ να κάνω ό, τι θέλω μέσα στη ρήτρα .then (), η οποία ενεργοποιείται μόλις φορτωθεί το εισαγόμενο σενάριο. Το σενάριο about.js φορτώνεται κατ ‘απαίτηση και αυτός ο κωδικός θα μεταδοθεί από το Babel σε cross-browser ES5, για να διασφαλιστεί ότι λειτουργεί παντού. Όταν δημιουργηθεί το πακέτο μου, το τμήμα about.js μπαίνει στο δικό του αρχείο μέσα στον διανομέα / φάκελο, για να μπορέσει αυτό το αρχείο να φορτωθεί κατά παραγγελία.

Όπως και άλλες λειτουργίες που έχω συζητήσει, η δυνατότητα εισαγωγής () λειτουργεί στο Parcel χωρίς καμία διαμόρφωση.

Η παραγωγή αναπτύσσεται με το Parcel.js

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

Μόλις το έργο μου ολοκληρωθεί και είναι έτοιμο να προωθηθεί σε έναν ζωντανό διακομιστή, μπορώ να σταματήσω το Parcel να παρακολουθεί το έργο μου. Το CTRL-C στο τερματικό το κάνει αυτό σε πολλές πλατφόρμες. Τότε θα εκτελέσω την ακόλουθη εντολή για να πω στο Parcel να δημιουργήσει μια τελική έκδοση:

parcel build index.html about.html contact.html

Σε αυτήν την περίπτωση, δημιουργώ και τα τρία από τα αρχεία εισόδου μου. Μόλις γίνει αυτό, το Parcel δεν περιμένει πλέον αλλαγές. το τελικό πακέτο είναι χτισμένο και αυτό είναι. Εκτός από την ολοκλήρωση της κατασκευής, ο κωδικός μου είναι έτοιμος για παραγωγή από την Parcel. Όλα τα HTML, CSS και JavaScript ελαχιστοποιούνται για να παράγουν τα μικρότερα δυνατά αρχεία για βελτιστοποιημένη απόδοση.

Τυχόν μειονεκτήματα στη χρήση του δέματος?

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

Πρώτα απ ‘όλα, θα παρατηρήσετε ότι το Parcel τοποθετεί πάντα τα δέσμες ενεργειών και τα φύλλα στυλ στον ίδιο κατάλογο με τα αρχεία HTML του σημείου εισόδου. Αυτό συμβαίνει ακόμα και αν έχετε τα αρχεία CSS και JavaScript σε ξεχωριστούς φακέλους. Δεδομένου ότι πρόκειται για αρχεία παραγωγής, μπορεί να μην έχει μεγάλη σημασία. Αλλά είναι κάτι που πρέπει να θυμάστε. Τα καλά νέα είναι αυτό φαίνεται να έχει διορθωθεί στην επερχόμενη έκδοση δεμάτων 2 (ακόμα σε άλφα). Επομένως, θα πρέπει να υπάρχει τρόπος να παρακάμψετε αυτήν τη συμπεριφορά όταν αυτή η έκδοση του Parcel είναι σταθερή (η τρέχουσα σταθερή έκδοση είναι 1.12.4).

Ένα άλλο μειονέκτημα είναι ότι βρήκα ότι η τεκμηρίωση Parcel είναι πολύ ελάχιστη όταν πρόκειται για πληροφορίες σχετικά με την προσαρμογή των επιλογών διαμόρφωσης για τις διάφορες δυνατότητες. Είναι αλήθεια ότι ένα από τα τεράστια οφέλη του Parcel είναι το πόσο καλά λειτουργεί έξω από το κουτί. Αλλά νομίζω ότι κάποια πιο εκτεταμένη τεκμηρίωση σχετικά με την προσαρμογή θα ήταν χρήσιμη. Για παράδειγμα, πώς μπορώ να απενεργοποιήσω την ελαχιστοποίηση HTML στις εκδόσεις μου, διατηρώντας παράλληλα την ελαχιστοποίηση CSS και JavaScript; Δεν βλέπω αυτήν την περιγραφή στα έγγραφα. Όταν κοίταξα τα κλειστά ζητήματα στο GitHub, υπάρχει μια λύση (σκέφτηκε ότι δεν είναι πολύ βολικό).

συμπέρασμα

Ένα τελευταίο πράγμα που θα αναφέρω είναι ένα εργαλείο που ονομάζεται Δημιουργία εφαρμογής, τα οποία μπορείτε να χρησιμοποιήσετε για την αυτόματη παραγωγή αρχείων διαμόρφωσης για το Parcel. Σας επιτρέπει να επιλέξετε τη βιβλιοθήκη JavaScript, το transpiler, το linter και ούτω καθεξής και όλα αυτά θα προστεθούν στο αρχείο package.json σας, έτοιμο να αρχικοποιηθεί.

Δημιουργία εφαρμογής στο Parcel.js

Αυτό είναι για αυτό το σεμινάριο δεμάτων για αρχάριους. Ελπίζω να μπορείτε να χρησιμοποιήσετε αυτές τις πληροφορίες για να ξεκινήσετε γρήγορα και να τρέχετε με το Parcel και να τις χρησιμοποιείτε σε μελλοντικά έργα. Και αν είστε νέοι στο bundling εφαρμογών ή δεν το έχετε δοκιμάσει ποτέ σε οποιοδήποτε έργο, ίσως αυτή η εισαγωγή θα σας εμπνεύσει να δοκιμάσετε το Parcel.

Μην ξεχάσετε να συμμετάσχετε στο μάθημα συντριβής για την επιτάχυνση του ιστότοπού σας στο WordPress. Με μερικές απλές επιδιορθώσεις, μπορείτε να μειώσετε το χρόνο φόρτωσής σας ακόμη και κατά 50-80%:

Διάταξη και παρουσίαση από τον Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map