קורס JavaScript ES6/7/8 שיעור סביבת העבודה

איתמר - תודה על המידע. בכל סביבה לפעמים דברים מותקנים במקומות קצת אחרים ושמח שמצאת את זה. יכול להיות שאפשר להוסיף לרשימת התלויות את webpack-cli כדי לקבל את ההתנהגות שהראיתי בסרטון.

ניר - תוכל לפרט יותר מה ניסית ומה השגיאה?

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

לייק 1

Blockquote

האם ישנו קיצור ב- VS שמייצר לי סטרטר של HTML כבסיס ? - כמו שראיתי בסרטון שבין רגע התמלא לך התבנית?

לדעתי אני פשוט הדבקתי משהו שהכנתי מראש. ב VS Code לא מכיר כזה קיצור

לייק 1

אולי הכוונה לקיצור הבא:
! + tab
סימן קריאה ואח"כ טאב.
ראיתי הסבר בסרטון יוטיוב

הי ינון,
לגבי התקנת webpack ו-babel, בעבר התקנתי אך יתכן שפספסתי את babel.

webpack, נראה שההתקנה תקינה כולל קינפוג.
babel , אני מקבל הודעה על בעיה בבניית מודול:

ניסיון ההתקנה דרך תיקיית היעד (היכן שהותקן node.js לפי הסרטון) :01-setup,
להלן גרסת node.js:
image

תיאור סידור הקבצים:
image

כמו כן, קובץ קונפיגורציה הוגדר לפי הסרטון:
image

מדוע לדעתך זה נכשל?

הי ינון,

לגבי הודעת השגיאה של :

ERROR in Cannot find module 'babel-core'

פתרתי זאת מחיפוש בגוגל בעזרת הלינק הבא:

העניין הוא, כשמריץ את הפקודה ב-cmd:

node node_modules/webpack/bin/webpack.js

מקבל הודעות אזהרה על אופציית סביבת עבודה בייצור /פיתוח:

גם חיפוש באנטרנט לא עזר, בהתאם להנחיה בהערות לגשת ללינק:
https://webpack.js.org/concepts/mode/

כשהרצתי את פקודת:

https://webpack.js.org/concepts/mode/

ובניסיון שני להריץ:

node node_modules/webpack/bin/webpack.js

מקבל את אותן הודעות אזהרה על אופציית סביבת עבודה.

כיצד ניתן לפתור זאת? במידה ולא, אפשר להתעלם מההודעות?
אני מתחיל לבנות פרויקט בריאקט וזאת ההכנה להגדרות הסביבה.

תודה מראש

הי,

יש שני מצבי פעולה ל Webpack: מצב ייצור שם כל התוצאה שלו תהיה מקומפרסת ויהיה לך קשה לדבג, ומצב פיתוח שם הקוד יהיה הרבה יותר גדול אבל גם כל המידע עבור הדיבג יישאר בפנים. בדרך כלל אתה רוצה לעבור במצב פיתוח בשוטף ולפני העלאה לשרת לבנות במצב ייצור.

המתג של webpack לקביעת מצב הפעולה הוא p למצב ייצור ו d למצב פיתוח. לכן בשביל לבנות במצב פיתוח נסה להפעיל:

node node_modules/webpack/bin/webpack.js -d

ובשביל לבנות במצב ייצור נסה להפעיל:

node node_modules/webpack/bin/webpack.js -p

בשני המקרים הודעת השגיאה צריכה להיעלם (ועדכן כאן אם קורים דברים אחרים).

היי,
כדי לפתור את הבעיה הנ"ל, יש צורך להריץ:
npm install --save-dev @babel/core
ואז להריץ:
node node_modules/webpack/bin/webpack.js -d

מקווה שעזרתי

2 לייקים

מתקבלת אצלי השגיאה הבאה, מה עליי לעשות?

הי,

מה התוכן של תיקיית C:\ESD\Js ? האם היא כוללת תיקיה בשם src ? ומה התוכן של הקובץ webpack.config.js ?

תיקיית JS מכילה את הנ"ל
image

תוכן הקובץ webpack.config.js

שים לב לשגיאת כתיב בשם הקובץ:

בתוך התיקיה src יש לך קובץ בשם indes.js
אבל שם הקובץ צריך להיות index.js

(אצלך נגמר ב s אבל צריך להיגמר ב x)

נסה לשנות את השם ועדכן אם זה מסתדר

היי ינון…
בתור אחד שעוסק בJAVA קצת לא ברור לי איך עובדת הצהרת משתנים בJS, בJAVA אני רגיל להצהיר על משתנה גלובלי ולאחר מכן לתת לו ערך דרך הconstructor, בדוגמא שהבאת בתחילת הסרטון אני רואה שאין משתנה גלובלי, אלא רק משתנה בשם this.name, שנמצא בתוך הconstructor שבו אתה משתמש בתוך הclass, אשמח לקבל הסבר קצת יותר מקיף לגבי הצהרת המשתנים בJS ותוחלת החיים שלו (כי היה נראה לכאורה שthis.name יכיל את הערך רק בתוך הבלוק של הconstructor)

הי @amita

לפני הכל אני חושב שיהיה לך הרבה יותר קל להמשיך עם JavaScript אם תתחיל מהקורס הזה:
https://www.tocode.co.il/bundles/javascript

ואחרי זה תמשיך ל ES6-8. הדברים בנויים אחד על גבי השני והמידע שאתה מחפש נמצא בקורס הבסיסי יותר.

לשאלה שלך ובקצרה (כי התשובה הארוכה בקורס) - המשתנה this מייצג את האוביקט עצמו קצת בדומה ל Java. לכן משך החיים של המידע יהיה לכל תקופת החיים של האוביקט. אם לדוגמא נדמיין מחלקה בשם Car שיש לה constructor עם השורה:

this.speed = 10;

אז מחוץ למחלקה אפשר לכתוב:

const c = new Car();
console.log(c.speed);

ולקבל 10, וגם בכל אחת מהפונקציות של המחלקה אפשר להשתמש ב this ולקבל את אותו ערך. אבל באמת שזה הסבר סופר מקוצר ולא מדויק וכדאי מאוד לראות את ההסברים המלאים בקורס הבסיסי

לי זה פתר :slight_smile: תודה רבה !!!

היי ינון!
אני ניתקלת בבעיה בשלב של יצירת הקובץ main.js אחרי שאני מריצה את הפקודה הבאה

node ./node_modules/webpack-cli/bin/webpack.js -d

מופיעה לי הודעת השגיאה הבאה:


אני אשמח לעזרה …
תודה רבה😀

הי

יכולה להדביק כאן את תוכן הקובץ package.json מהתיקיה?, והאם הרצת npm install ?

היי!
אני חושבת שהרצתי את הפקודה הזאת כי הלכתי לפי הטקסט שהופיעה במקביל לסרטון ועשיתי לפי הסדר שהבאת שם
התוכן של קובץ package.json:

{

  "name": "trymeJC",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "@babel/core": "^7.12.3",

    "babel-core": "^6.26.3",

    "babel-loader": "^8.1.0",

    "babel-preset-env": "^1.7.0",

    "webpack": "^5.1.3",

    "webpack-cli": "^4.0.0"

  }

}

מ"צב צילום מסך: