Σήμερα θα σας καθοδηγήσω στα πολύ βασικά του Node.js και του NPM, συμπεριλαμβανομένων επεξηγήσεων σχετικά με τον τρόπο ανάπτυξης για τον ιστό γενικά. Απλώς μια σημείωση εκ των προτέρων: εάν είστε εξοικειωμένοι με τη βασική ανάπτυξη ιστού και το NPM, μπορείτε να παραλείψετε αυτό το άρθρο και να μάθετε περισσότερα για το πολύ χρήσιμο NPX εδώ.
Εντάξει μια χαρά! Ας αρχίσουμε!
Node.js
Αν διαβάζετε αυτό, πιθανότατα έχετε ήδη κατεβάσει το Node.js + NPM και ξεκινήσατε με την ανατροπή του ποδιού σας στα νερά του Javascript. Ωστόσο, τα πρώτα βήματα μπορεί να φαίνονται ήδη τρομακτικά: «Θέλω απλώς να γράψω ένα μικρό πρόγραμμα σε Javascript, γιατί χρειάζομαι όλα τα άλλα πράγματα;». Αυτό είναι κατανοητό, αλλά στην πραγματικότητα δεν είναι καθόλου μεγάλη υπόθεση.
Ας ξεκινήσουμε από την αρχή: Μπορείτε απλά να δημιουργήσετε ένα αρχείο Javascript παντού στον υπολογιστή σας, που υποδεικνύεται με το επίθημα «.js». Αυτό το αρχείο μπορεί να γεμίσει με κώδικα με όποιον τρόπο θέλετε, αλλά τότε λείπει ένα πράγμα: πώς εκτελείτε πραγματικά το πρόγραμμά σας; Εκεί μπαίνει στο παιχνίδι το Node.js.
Το Node.js είναι ένα περιβάλλον χρόνου εκτέλεσης, ρητά για Javascript. Όπως υπονοεί η περιγραφή, το Node μπορεί να εκτελέσει τον κώδικα Javascript σε ένα συγκεκριμένο περιβάλλον που παρέχει ο ίδιος ο Κόμβος. Η διαδικασία είναι πάντα η ίδια: ξεκινάτε πρώτα το Node.js και όταν το Node περιστρέφεται (που σημαίνει ότι έχει τελειώσει η εκκίνηση) μπορείτε να του δώσετε τον κώδικα Javascript.
Υπάρχουν δύο τρόποι με τους οποίους η Javascript σας μπορεί να παρασχεθεί στο Node ως είσοδος:
- Απευθείας στην εκτελούμενη διαδικασία Node, γραμμή προς γραμμή, χωρίς αρχεία
- Λέγοντας στο Node ποιο αρχείο Javascript να φορτώσει, χωρίς είσοδο γραμμή προς γραμμή
node
Γραμμή προς γραμμή
Αφού εγκαταστήσετε με επιτυχία το Node.js (το οποίο μόλις κατεβάζει + εκτελεί το πρόγραμμα εγκατάστασης, οι περιγραφές βρίσκονται στον ιστότοπο του Node), μπορείτε να εκκινήσετε το Node.js από παντού είτε στο Terminal (macOS/Linux) είτε στο PowerShell (Windows) . Η εντολή μοιάζει με αυτό.
Ναι, αυτό είναι όλο! Μόλις ξεκινήσατε με επιτυχία το Node! Προσέξατε πόσο γρήγορα συνέβη αυτό; Ένας από τους λόγους που το Node.js είναι τόσο δημοφιλές είναι ακριβώς λόγω της απίστευτα γρήγορης εκκίνησης του (μεταξύ άλλων).
Τώρα που το Node είναι σε λειτουργία και λειτουργεί, μπορούμε να ορίσουμε γραμμή προς γραμμή την εφαρμογή Javascript. Κάθε είσοδος επεξεργάζεται και αποθηκεύεται στη μνήμη. Ορίστε ένα μικρό παράδειγμα.
(Hit enter after every line end)
const greet = (name) => console.log("Hello, " + name);
greet("Tom"); let x = 10; x = x + 5;
(enter the following line to terminate node)
.exit
Τώρα όλα αυτά είναι εντάξει, αλλά η σύνταξη μεγαλύτερων εφαρμογών απαιτεί πρώτα να τις συντάξουμε σε αρχεία πριν τις τροφοδοτήσουμε στο Node. Επόμενο κεφάλαιο, παρακαλώ!
Εισαγωγή μέσω αρχείων
Για αυτό το παράδειγμα χρειάζεστε ένα πρόγραμμα επεξεργασίας κειμένου. Βασικά, μπορείτε να χρησιμοποιήσετε κάθε πρόγραμμα που μπορεί να χειριστεί κείμενο (όπως το TextEdit σε macOS ή το Editor στα Windows). Προτείνω τον ανοιχτού κώδικα VS Code από τη Microsoft, αλλά μπορείτε να επιλέξετε αυτό που ταιριάζει καλύτερα στην εργονομία σας.
Για να παρέχουμε ένα αρχείο ως είσοδο, θα πρέπει απλώς να δημιουργήσουμε ένα. Απλώς δημιουργήστε ένα απλό αρχείο κειμένου με το επίθημα «js» στο όνομά του. Θα ονομάσουμε το αρχείο μας app.js. Τώρα ανοίξτε τη γραμμή εντολών της επιλογής σας (αυτή που χρησιμοποιήθηκε στο πρώτο μας παράδειγμα). Φροντίστε να το ανοίξετε από τον κατάλογο όπου είναι αποθηκευμένο το αρχείο, αυτό είναι σημαντικό.
Εάν χρησιμοποιείτε VS Code, μπορείτε να χρησιμοποιήσετε την ενσωματωμένη γραμμή εντολών του, απλώς κάντε δεξί κλικ στην προβολή Explorer και καλέστε «Άνοιγμα στον Κώδικα» (στα Windows) ή σύρετε και αποθέστε τον κατάλογο που περιέχει το αρχείο στο το εικονίδιο κωδικού VS στο Dock σας (macOS). Στη συνέχεια, μπορείτε να ανοίξετε το τερματικό του όπως περιγράφεται εδώ.
Όταν το τερματικό είναι έτοιμο, απλώς πληκτρολογήστε την ακόλουθη εντολή.
node app.js
Όπως βλέπετε, έχουν συμβεί μερικά πράγματα:
- Ο κόμβος ξεκίνησε απευθείας, χωρίς καμία είσοδο χρήστη
- Το Node έτρεξε ολόκληρο το αρχείο σας από πάνω προς τα κάτω μέχρι να φτάσει στο τέλος του
- Ο ίδιος ο κόμβος τερματίστηκε, καθώς το τέλος του αρχείου σήμανε και το τέλος της διαδικασίας του
Και για μια βασική εισαγωγή στο Node.js, αυτό είναι! Μόλις κατεβάσετε το Node και δοκιμάσετε για πρώτη φορά τη χρήση της γραμμής εντολών για την εκκίνηση της δικής σας εφαρμογής Javascript, είτε γραμμή προς γραμμή είτε από αρχείο, είστε επίσημα προγραμματιστής Javascript! Καλως ηρθες στο κλαμπ!
Θα σας καθοδηγήσω τώρα στη βασική ιδέα του NPM. Μετά το επόμενο κεφάλαιο, θα εξετάσουμε γρήγορα τη σύνδεση μεταξύ του Node.js, του NPM και της ανάπτυξης ιστού. Εάν θέλετε να μάθετε περισσότερα για το Node.js, μπορείτε να δείτε τις ιστορίες μας σχετικά με το Javascript, τις αλυσίδες εργαλείων και οτιδήποτε σχετίζεται με την κωδικοποίηση εδώ. Έχω επίσης συνδέσει μερικούς χρήσιμους πόρους στο τέλος αυτού του άρθρου για να μάθετε περισσότερα πράγματα.
Εντάξει, ας προχωρήσουμε ένα!
NPM, ο Node Package Manager
Όπως έχετε δει, δεν είναι τόσο δύσκολο να διαχειριστείτε τον δικό σας κώδικα. Η εφαρμογή μπορεί να αποθηκευτεί σε ένα αρχείο, οι αλλαγές που εφαρμόζετε απλώς παραμείνετε. Τι γίνεται όμως αν θέλετε να χρησιμοποιήσετε τον κώδικα κάποιου άλλου, ας πούμε μια βιβλιοθήκη κρυπτογράφησης ή επεξεργασίας εικόνων; Πρέπει με κάποιο τρόπο να βάλετε αυτόν τον κώδικα δίπλα στον δικό σας, να τον κάνετε χρησιμοποιήσιμο για την εφαρμογή σας και να διατηρείτε τα πάντα διαχειρίσιμα.
Μια αφελής προσέγγιση θα ήταν απλώς να κατεβάσετε εξωτερικό κώδικα απευθείας από την πηγή, π.χ. Github και αντιγράψτε τη βιβλιοθήκη, αρχείο προς αρχείο, στο δικό σας έργο. Αυτό όμως οδηγεί σε μερικά προβλήματα:
- Πώς ενημερώνετε καλύτερα αυτόν τον εξωτερικό κωδικό; Η αντιγραφή με το χέρι δεν είναι η καλύτερη λύση.
- Πώς παρακολουθείτε όλο τον κώδικα που είναι εξωτερικός;
- Τι γίνεται αν αυτός ο ίδιος ο εξωτερικός κώδικας βασίζεται σε βιβλιοθήκες, οι οποίες δεν είναι εγκατεστημένες στο έργο σας;
Όλες αυτές οι προκλήσεις αντιμετωπίζονται από το NPM, έναν διαχειριστή πακέτων για το Node.js. Η δουλειά ενός διαχειριστή πακέτων είναι βασικά να σας δώσει μια ισχυρή λύση για το πώς να προσθέτετε, να παρακολουθείτε καθώς και να αφαιρείτε εξωτερικό κώδικα, γνωστό και ως εξαρτήσεις. Ακολουθούν μερικά παραδείγματα NPM σε δράση.
npm install serve-static npm remove serve-static
Φυσικά, αυτός ο διαχειριστής χρειάζεται ο ίδιος μερικά ειδικά αρχεία για να παρακολουθεί όλες τις εξαρτήσεις στο έργο σας. Γι' αυτό οι εφαρμογές που χρησιμοποιούν NPM έχουν τουλάχιστον δύο αρχεία: package.json καθώς και package-lock.json. Μπορείτε να καλέσετε την ακόλουθη εντολή για να δημιουργήσετε γρήγορα ένα νέο πακέτο NPM.
npm init -y
Σημείωση: όπως είδαμε στο πρώτο μέρος αυτού του άρθρου, το NPM δεν χρειάζεται για να χρησιμοποιήσετε το Node.js ή το Javascript. Η εστίασή του είναι η διαχείριση των εξαρτήσεών σας - ούτε περισσότερο, ούτε λιγότερο. Μέσω του NPM μπορείτε να κατεβάσετε τον κώδικα που δημοσιεύεται στο npmjs.com. Όλες αυτές οι εξωτερικές μονάδες αποθηκεύονται στο έργο σας σε έναν ειδικό κατάλογο που ονομάζεται node_modules. Πρακτικά δεν θα χρειαστεί ποτέ να αλλάξετε αυτόν τον κατάλογο, καθώς διαχειρίζεται πλήρως το NPM.
Το package.json σάς δίνει πληροφορίες για τις εξαρτήσεις που χρησιμοποιείτε αυτήν τη στιγμή στο έργο. Το package-lock.json είναι ένα ειδικό αρχείο που αποθηκεύει ορισμένα μεταδεδομένα σχετικά με μεταλλάξεις σχετικά με το αρχείο package.json ή τον κατάλογο node_modules και μπορεί να αγνοηθεί προς το παρόν.
Νομίζω ότι θα ολοκληρώσω την περιγραφή μου για την πολύ βασική ιδέα του NPM, τι κάνει και ποια αρχεία/καταλόγους δημιουργεί αυτόματα. Περισσότερες πληροφορίες παρατίθενται στο τέλος του άρθρου.
Arc to web dev
Ωραία, τώρα γνωρίζετε τις βασικές αρχές του Node.js και του NPM. Αλλά γιατί στο καλό είναι όλα αυτά τα πράγματα ακόμη και απαραίτητα για να μάθετε αν θέλετε απλώς να ξεκινήσετε να δημιουργείτε τη δική σας σύγχρονη ιστοσελίδα;
Όπως μόλις είδαμε, το NPM μας επιτρέπει να κατεβάζουμε κώδικα από μια τεράστια συλλογή βιβλιοθηκών (για την ακρίβεια, τη μεγαλύτερη που υπάρχει). Για την ανάπτυξη ιστού, θα χρειαστείτε έναν διακομιστή που μπορεί να φιλοξενήσει (δηλαδή, να παρέχει) την εφαρμογή Ιστού σας. Υπάρχουν πολλές διαθέσιμες υπηρεσίες όπου μπορείτε να ανεβάσετε το έργο του ιστότοπού σας και να χρησιμοποιήσετε μια υπάρχουσα υποδομή, συμπεριλαμβανομένων των διακομιστών, για να κάνετε τον ιστότοπο διαθέσιμο στον Ιστό.
Και για τοπική ανάπτυξη, απαιτείται επίσης ένας διακομιστής για να φορτώσει τα τοπικά σας αρχεία και να τα κάνει διαθέσιμα μόνο σε εσάς, στη συσκευή σας, κατά την ανάπτυξη. Χάρη στο Node.js, μπορείτε απλώς να το κάνετε αυτό: να κάνετε τον ιστότοπό σας διαθέσιμο τοπικά μέσω ενός λεγόμενου localhost. Το Node.js διαθέτει τα ενσωματωμένα εργαλεία που απαιτούνται για την εκκίνηση ενός τοπικού διακομιστή, αλλά μέσω του NPM, η εφαρμογή σας μπορεί να εμπλουτιστεί με στοιχεία δοκιμασμένα σε μάχη που μπορούν να σας βοηθήσουν να δημιουργήσετε πολύ μεγάλες υπηρεσίες σε σύντομο χρονικό διάστημα.
Φυσικά αυτό είναι μόνο η αρχή: το NPM φιλοξενεί τόσο πολύ κώδικα για τη δημιουργία σύγχρονων εφαρμογών ιστού (γνωστές ως PWA, «προοδευτική εφαρμογή Ιστού») καθώς και πολύπλοκων διακομιστών. Αλλά για μια πρώτη εισαγωγή, νομίζω ότι αυτή η εξήγηση θα πρέπει να είναι καλή.
Ελπίζω ότι θα μπορούσα να σας βοηθήσω να κατανοήσετε το Node.js και το NPM. Τα πρώτα βήματα είναι πάντα τα πιο δύσκολα, αλλά οι πρώτες μέρες ανάπτυξης και (πολλές) μάθησης θα ανταμειφθούν με τις δεξιότητές σας να επεκτείνονται στην ανάπτυξη σύγχρονων διαδικτυακών εφαρμογών, δίνοντάς σας τη δυνατότητα να φτιάχνετε ό,τι θέλετε.
