מבנה פרויקט Node.JS
פרויקט ב node מורכב ממספר קבצים והרבה פעמים גם מספריות חיצוניות מהרשת שנרצה לשלב בפרויקט שלנו. בואו ניצור פרויקט ראשון שישתמש בספריה חיצונית כדי להציג שרת ווב.
1. יצירת הפרויקט
צרו תיקיה חדשה על המחשב בשם myapp. פיתחו את מסך ה cmd וכנסו עם cd לתיקיה. כשאתם בתוך התיקיה כתבו:
> npm init
אחרי מספר לחיצות על Enter תקבלו קובץ חדש בתיקיה בשם package.json. זה התוכן שלו:
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
את שם הפרויקט npm לקח אוטומטית משם התיקיה. כל השאר הם ברירות מחדל. השדה main הוא שדה הכרחי בו כתוב שם קובץ ה JavaScript הראשי של הפרויקט. בהמשך נראה גם איך לרשום ערכים בשדה scripts שיעזרו לנו בהרצה.
בינתיים פיתחו ב VS Code לעריכה קובץ חדש בשם index.js ובו כתבו את התוכן:
console.log('Hello World');
רק בשביל הבדיקה כמובן.
המשיכו לערוך את הקובץ package.json ועדכנו אותו כך שיכיל את התוכן הבא:
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
בחזרה ל cmd ושם נכתוב:
> npm start
> myapp@1.0.0 start /Users/ynonperek/work/courses/nodejs/demos/05-project-structure/myapp
> node index.js
hello world
בתגובה המחשב באופן אוטומטי הריץ עבורנו את הפקודה שרשמנו בשדה scripts.start שהיא הפקודה שהפעילה את הפרויקט.
2. התקנה ושילוב ספריה חיצונית
חזרה ל cmd ושם כתבו:
> npm install --save express
אחרי קצת עבודת חשיבה המחשב יחזיר אתכם לשורת הפקודה והפעם עם קצת דברים חדשים. הקובץ package.json השתנה והוא כעת נראה כך:
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}
בנוסף נוצרה לכם תיקיה חדשה בשם node_modules
שמכילה די הרבה תתי ספריות, אחת מהן נקראת express.
מנגנון שילוב מודולים חיצוניים בפרויקט משתמש בקובץ בשם package.json כדי לתאר את התלויות בין הפרויקט למודולים החיצוניים. השדה dependencies בקובץ מתאר את כל המודולים החיצוניים והגירסאות שלהם שהפרויקט שלנו צריך. אבל הקובץ package.json לא כולל את קוד המודולים עצמם - בשביל זה יש את הספריה node_modules
. בספריה זו תמצאו את הספריה express החדשה שביקשנו להתקין, וגם את כל הספריות ש express צריכה כדי לעבוד כמו שצריך.
כשתגיעו להפיץ את הפרויקט לשרת או לחבר אתם לא צריכים לתת להם את כל תיקיית node_modules
. מספיק לתת רק את הקובץ package.json
. מי שיקבל את הפרויקט יוכל להריץ אצלו פקודה אחת וכך לקבל את כל node_modules
עם כל המודולים המתאימים.
בואו ננסה את זה! מחקו את התיקיה node_modules
לחלוטין ואז הריצו:
> npm install
ותוכלו לראות ש npm הלך לרשת והביא מחדש את כל התוכן שהיה קודם ב node_modules
.
בהמשך הקורס נדבר יותר לעומק על package.json, על משמעות המספרים ליד החבילות ועל שידרוג חבילות. בינתיים בואו נלך לעדכן את התוכנית שלנו כך שתשתמש במודול החדש שהתקנו ותריץ שרת ווב.
3. עדכון התוכנית והפעלת שרת ווב
החליפו את תוכן הקובץ index.js בקוד הבא:
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
});
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
חזרו ל cmd והפעילו את הפרויקט עם:
> npm start
> myapp@1.0.0 start /Users/ynonperek/work/courses/nodejs/demos/05-project-structure/myapp
> node index.js
Example app listening on port 3000!
עכשיו אפשר להפעיל דפדפן ולהיכנס לכתובת localhost:3000 כדי לראות את הודעת ה Hello World שלנו.
שרת Express שומר על הרוח של node.js:
הקוד בנוי בתור יצירת רצף של Event Handlers: כל פעם שמשתמש מגיע לנתיב מסוים יש לקרוא לפוקנצית טיפול מתאימה.
כל פונקציית Event Handler מקבלת אוביקט בקשה ואוביקט תשובה. היא יכולה להשתמש באוביקט הבקשה כדי לבחון את המידע שהלקוח שלח ועליה לכתוב תשובה לאוביקט התשובה.
השרת ממשיך לרוץ עד שנעצור אותו כי Express דואג להשאיר תהליך אסינכרוני פתוח: תהליך ההמתנה לגולש חדש.
בשיעור הבא יש לכם מספר תרגילים שיתנו לכם רעיונות למשחק עם הדברים שלמדנו עד כאן. אחרי זה נמשיך לדבר על מבנה פרויקט node, נחלק את הפרויקט לקבצים ונראה מה עושה require ונמשיך לדבר על ההבדלים בין node לדפדפן.