Απαιτήσεις: Το Fetch Event Source είναι μια ροή SSE που υλοποιείται από τη Microsoft, έχει δημιουργηθεί με χρήση πακέτων NPM, δεν μπορεί να χρησιμοποιηθεί απευθείας στο πρόγραμμα περιήγησης και απαιτεί τη μεταγλώττιση του πακέτου NPM σε ένα σενάριο JavaScript που εκτελείται από το πρόγραμμα περιήγησης.
Το NPM είναι ένα εργαλείο διαχείρισης πακέτων Node, το οποίο υλοποιείται με βάση το πρότυπο Node API, ενώ η JavaScript είναι μια γλώσσα δέσμης ενεργειών που εκτελείται στο πρόγραμμα περιήγησης, με βάση το πρότυπο ECMAScript. Λόγω των διαφορετικών προτύπων, τα πακέτα NPM δεν μπορούν να εκτελεστούν απευθείας στο πρόγραμμα περιήγησης.
Εργαλεία συσκευασίας που χρησιμοποιούνται συνήθως:
- Webpack: Το Webpack είναι ένα από τα πιο δημοφιλή διαθέσιμα εργαλεία συσκευασίας front-end, μπορεί να χειριστεί JavaScript, φύλλα στυλ, εικόνες και άλλους πόρους και υποστηρίζει αρθρωτή ανάπτυξη.
- Αγροτεμάχιο: Το Parcel είναι ένα εργαλείο συσκευασίας μηδενικής διαμόρφωσης που χειρίζεται αυτόματα εξαρτήσεις και συσκευάζει έργα, καθιστώντας το ιδανικό για γρήγορη κατασκευή έργων.
- Συνάθροιση: Το Rollup εστιάζει στη συσκευασία βιβλιοθηκών JavaScript, οι οποίες μπορούν να συσκευάσουν πολλές λειτουργικές μονάδες σε ένα μόνο αρχείο και υποστηρίζουν τη βελτιστοποίηση Tree Shaking.
- Browserify: Το Browserify σάς επιτρέπει να χρησιμοποιείτε το σύστημα λειτουργικών μονάδων του Node.js στο πρόγραμμα περιήγησής σας, το οποίο μπορεί να συσκευάσει λειτουργικές μονάδες CommonJS σε κώδικα αναγνωρίσιμο από το πρόγραμμα περιήγησης.
- Grunt: Το Grunt είναι ένα εργαλείο αυτοματισμού εργασιών που μπορεί να χρησιμοποιηθεί για τη συσκευασία, τη συμπίεση, τη συγχώνευση και άλλες λειτουργίες, όπως η συσκευασία κώδικα.
- Gulp: Παρόμοια με το Grunt, το Gulp είναι ένα εργαλείο αυτοματισμού εργασιών, αλλά χρησιμοποιεί κώδικα πάνω από τη διαμόρφωση για να κάνει τους ορισμούς εργασιών πιο συνοπτικούς και σαφείς.
- Brunch: Το Brunch είναι ένα γρήγορο και εύκολο εργαλείο συσκευασίας front-end που μπορεί να χειριστεί JavaScript, CSS, HTML και άλλα αρχεία και υποστηρίζει επεκτάσεις προσθηκών.
Αυτό το άρθρο απαιτεί δύο εργαλεία:πρόγραμμα περιήγησης、ελαχιστοποιώ(Συμπιεστής για αρχεία JS, CSS, HTML και IMG)
Αρχικά, δημιουργήστε έναν νέο φάκελο και αρχικοποιήστε γρήγορα ένα έργο κόμβου με την ακόλουθη εντολή:
αναθεωρώpackage.jsonΤο έγγραφο έχει ως εξής:
Εγκαταστήστε το browserify, minify, fetch-event-source, η εντολή είναι η εξής:
Εκτελέστε την εντολή μεταγλώττισης ως εξής:
Όπου: -r καθορίζει το όνομα του πακέτου npm που θα μεταγλωττιστεί -s Το όνομα της ενότητας που χρησιμοποιείται στον κώδικα (προσαρμοσμένο όνομα σύμφωνα με τις δικές σας συνήθειες)
Αφού ολοκληρωθεί η εκτέλεση, το event.min.js είναι το συμπιεσμένο αρχείο, όπως φαίνεται στο παρακάτω σχήμα:
Αντιγράψτε το περιεχόμενο του event.min.js στην κονσόλα του προγράμματος περιήγησης για δοκιμή, όπως φαίνεται στην παρακάτω εικόνα:
(Τέλος)
|
Δημοσιεύτηκε στις 25/4/2024 8:28:21 μ.μ.
|
|
|
|
