4.9 Node.js, npm וכלי פיתוח תרגול

תרגול - Node.js, npm וכלי פיתוח

תרגיל 1 - סקריפט Node.js

כתבו סקריפט Node.js שמקבל ארגומנטים משורת הפקודה ומבצע פעולות:

א. קובץ calc.js שמקבל שני מספרים ופעולה:

node calc.js 10 + 5    # 15
node calc.js 10 - 3    # 7
node calc.js 10 x 5    # 50 (use x instead of * to avoid shell issues)
node calc.js 10 / 3    # 3.33

ב. קובץ fileinfo.js שמקבל נתיב לקובץ ומדפיס מידע עליו:

node fileinfo.js package.json
# File: package.json
# Size: 324 bytes
# Created: 2026-03-08
# Lines: 15

רמז: השתמשו ב-fs ו-path (מודולים מובנים של Node).

תרגיל 2 - פרויקט npm מאפס

בנו פרויקט npm מלא מאפס:

א. אתחלו פרויקט חדש עם npm init -y.

ב. התקינו את החבילות הבאות:
- dayjs - לעבודה עם תאריכים
- chalk - להדפסה צבעונית בטרמינל (גרסה 4: npm i chalk@4)
- eslint ו-prettier כ-dev dependencies

ג. כתבו קובץ index.js שמשתמש ב-dayjs ו-chalk:

node index.js
# prints current date in a nice format with colors
# prints "X days until new year" in green
# prints a countdown of the last 5 days of the week in yellow

ד. הוסיפו סקריפטים ל-package.json:

{
    "scripts": {
        "start": "node index.js",
        "lint": "eslint .",
        "format": "prettier --write ."
    }
}

ה. צרו קובץ .gitignore עם node_modules/.

תרגיל 3 - פרויקט Vite

צרו פרויקט Vite מאפס ובנו בו אפליקציה פשוטה:

א. צרו פרויקט חדש:

npm create vite@latest todo-app -- --template vanilla
cd todo-app
npm install

ב. בנו אפליקציית TODO פשוטה בקבצים הקיימים (src/main.js, src/style.css, index.html):
- שדה טקסט והוספת משימה
- הצגת רשימת משימות
- סימון משימה כהושלמה
- מחיקת משימה
- שמירה ב-localStorage

ג. הוסיפו משתנה סביבה:
- צרו קובץ .env עם VITE_APP_TITLE=My Todo App
- השתמשו בו בקוד להצגת כותרת האפליקציה

ד. הריצו npm run build ובדקו את תיקיית dist/.

תרגיל 4 - הגדרת ESLint ו-Prettier

הגדירו ESLint ו-Prettier בפרויקט Vite שיצרתם:

א. התקינו את החבילות הנדרשות:

npm i -D eslint prettier eslint-config-prettier

ב. צרו הגדרות ESLint (eslint.config.js):
- אסרו שימוש ב-var
- חייבו === במקום ==
- אזהרה על משתנים שלא בשימוש
- אפשרו console.log

ג. צרו הגדרות Prettier (.prettierrc):
- נקודה-פסיק בסוף שורה
- מרכאות כפולות
- 4 רווחים לטאב
- רוחב שורה מקסימלי 100

ד. הוסיפו סקריפטים ל-package.json:

{
    "scripts": {
        "lint": "eslint src/",
        "lint:fix": "eslint src/ --fix",
        "format": "prettier --write src/"
    }
}

ה. כתבו קוד עם כמה "שגיאות" מכוונות (var, ==, משתנים לא בשימוש) והריצו lint כדי לראות את השגיאות.

תרגיל 5 - ניהול תלויות

תרגלו ניהול תלויות עם npm:

א. התקינו את החבילות axios, lodash, ו-uuid. בדקו מה נוסף ל-package.json.

ב. הסירו את axios (npm uninstall axios). בדקו שנמחק מ-package.json ומ-node_modules.

ג. מחקו את תיקיית node_modules (rm -rf node_modules) והריצו npm install. בדקו שהכל חזר.

ד. כתבו סקריפט שמשתמש ב-lodash ו-uuid:

import { v4 as uuidv4 } from "uuid";
import _ from "lodash";

// generate 5 random IDs
const ids = _.times(5, () => uuidv4());
console.log(ids);

// use lodash utilities
const data = [1, 2, 2, 3, 3, 3, 4];
console.log("Unique:", _.uniq(data));
console.log("Chunk:", _.chunk(data, 3));

ה. בדקו אילו חבילות מיושנות עם npm outdated.

תרגיל 6 - Vite מתקדם

הרחיבו את פרויקט Vite:

א. הגדירו alias ב-vite.config.js כך ש-@ מצביע על תיקיית src/:

import { resolve } from "path";

// in defineConfig:
resolve: {
    alias: {
        "@": resolve(__dirname, "src")
    }
}

ב. פצלו את הקוד למודולים:

src/
  main.js
  modules/
    storage.js    # localStorage functions
    ui.js         # DOM manipulation functions
    utils.js      # utility functions
  style.css

ג. השתמשו ב-import עם alias:

import { saveData, loadData } from "@/modules/storage";
import { createTodoElement } from "@/modules/ui";

ד. צרו קבצי .env.development ו-.env.production עם ערכים שונים, והשתמשו בהם בקוד.

ה. הריצו npm run build ובדקו את גודל הקבצים בתיקיית dist/.