היום אני אדריך אותך דרך היסודות של Node.js ו-NPM, כולל הסברים על איך לפתח עבור האינטרנט באופן כללי. רק הערה מראש: אם אתה מכיר את פיתוח אתרים בסיסי ו-NPM, אתה יכול לדלג על מאמר זה וללמוד עוד על ה-NPX השימושי כאן.
בסדר, מעולה! בואו נתחיל!
Node.js
אם אתה קורא את זה, סביר להניח שכבר הורדת את Node.js + NPM והתחלת בהטלת הבוהן שלך למים של Javascript. עם זאת, הצעדים הראשונים עשויים כבר להיראות מפחידים: "אני רק רוצה לכתוב תוכנית קטנה ב-Javascript, למה אני צריך את כל הדברים האחרים?". זה מובן, אבל באמת לא עניין גדול בכלל.
נתחיל בהתחלה: אתה יכול פשוט ליצור קובץ Javascript בכל מקום במחשב שלך, המצוין בסיומת '.js'. ניתן למלא את הקובץ הזה בקוד בכל דרך שתרצה, אבל אז חסר דבר אחד: איך בעצם אתה מפעיל את התוכנית שלך? זה המקום שבו Node.js נכנס לתמונה.
Node.js היא סביבת זמן ריצה, במפורש עבור Javascript. כפי שהתיאור מרמז, Node יכול להריץ את קוד ה-Javascript שלך בסביבה ספציפית ש-Node עצמו מספק. התהליך תמיד זהה: תחילה אתה מפעיל את Node.js, וכאשר Node מסתובב (מה שאומר שהוא הסתיים להתחיל) אתה יכול לספק לו את קוד ה-Javascript שלך.
ישנן שתי דרכים שניתן לספק את ה-Javascript שלך ל-Node כקלט:
- ישירות ל-Node-process הפועל, שורה אחר שורה, ללא קבצים כלולים
- על ידי הסבר ל-Node איזה קובץ Javascript לטעון, ללא כל קלט שורה אחר שורה
node
שורה אחר שורה
לאחר שהתקנת בהצלחה את Node.js (שזה רק הורדה + הפעלת תוכנית ההתקנה, התיאורים נמצאים באתר האינטרנט של Node), תוכל להפעיל את Node.js מכל מקום בטרמינל שלך (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, אתה יכול להשתמש בשורת הפקודה המובנית שלו, פשוט לחץ לחיצה ימנית בתצוגת הסייר שלך וקרא "פתח בקוד" (ב-Windows) או גרור ושחרר את הספרייה המכילה את הקובץ ה- VS Code-Icon ב-Dock (macOS). לאחר מכן תוכל לפתוח את הטרמינל שלו כמתואר כאן.
כאשר הטרמינל מוכן, פשוט הקלד את הפקודה הבאה.
node app.js
כפי שאתה רואה, קרו כמה דברים:
- הצומת התחיל ישירות, ללא קלט משתמש זמין
- Node הפעיל את כל הקובץ מלמעלה למטה עד שהגיע לקצה שלו
- הצומת עצמו הסתיים, מכיוון שסוף הקובץ סימן גם את סוף התהליך שלו
ולהיכרות בסיסית עם Node.js, זהו! לאחר שהורדת את Node וחווית לראשונה את השימוש בשורת הפקודה להפעלת אפליקציית Javascript משלך, שורה אחר שורה או מקובץ, אתה רשמית מפתח Javascript! ברוך הבא למועדון!
כעת אדריך אותך דרך מושג הליבה של NPM. לאחר הפרק הבא, נבחן במהירות את הקשר בין Node.js, NPM ופיתוח האינטרנט. אם אתה רוצה ללמוד עוד על Node.js, אתה יכול לבדוק את הסיפורים שלנו על Javascript, רשתות כלים וכל מה שקשור לקידוד כאן. קישרתי גם כמה משאבים שימושיים בסוף מאמר זה כדי ללמוד עוד דברים.
בסדר, בוא נעביר אחד!
NPM, מנהל חבילות הצומת
כפי שראית, זה לא כל כך קשה לנהל את הקוד שלך. ניתן לאחסן את האפליקציה בקובץ, שינויים שתחיל פשוט נשארים. אבל מה אם תרצה להשתמש בקוד של מישהו אחר, נגיד ספריית קריפטוגרפיה או מניפולציה של תמונות? אתה איכשהו צריך לשים את הקוד הזה ליד הקוד שלך, להפוך אותו לשימוש עבור היישום שלך ולשמור הכל לניהול.
גישה נאיבית תהיה פשוט להוריד קוד חיצוני ישירות מהמקור, למשל. 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. הצעדים הראשונים הם תמיד הקשים ביותר, אבל המעבר בימים הראשונים של הפיתוח ו(הרבה) למידה יתוגמל עם הכישורים שלך שמתרחבים לפיתוח יישומי אינטרנט מודרניים, מה שיאפשר לך לבנות מה שתרצה.
