הי יעל,
בטח אשמח לעזור - איפה ההסתבכות? רוצה לספר קצת יותר פרטים מה ניסית לעשות ומה לא עבד?
אגב פה בפורום את יכולה להיכנס למסך עריכת הפרופיל ולבחור לך שם משתמש יותר מוצלח מ 11142
הי @Anael
אני ממש אוהב את Webpack ולבנות בעצמי את קבצי ההגדרות. אני חושב שכשמדובר בפרויקט לטווח ארוך היכולת לשלוט בכל פסיק בתהליך הבניה היא חשובה. יחד עם זאת צריך להכיר וובפאק טוב כדי להנות מזה.
הספריה create react app נועדה לאנשים שלא מכירים מספיק טוב וובפאק או שמעדיפים לא להגדיר בעצמם דברים לפני שמתחילים לעבוד. יש לה ייתרון שהיא משתמשת ב Defaults מאוד הגיוניים לרוב הפרויקטים, וחיסרון שהיא שמה (לדעתי) יותר מדי רכיבים וספריות כדי שהכל יעבוד ישר מהקופסא.
אני חושב שבקורס כדאי לקחת את תיקיית הדוגמאות שלי ולעבוד על פרויקטי הדוגמא, ולהשתמש בהם כבסיס לתרגילים. אני חושב שגם ממש שווה להסתכל לפחות בחלק מהשיעורים של קורס Webpack כאן באתר כדי להבין איך כל תהליך הבניה עובד. אחרי זה שווה לשחק עם create react app ולראות מה נותן לך מענה טוב יותר לפרויקט שלך.
תודה.
לקח לי זמן להבין את זה…
זה נראה שיש בעיה בקובץ package.json או package-lock.json. תוכלי לנסות למחוק את כל תיקיית node_modules ולהריץ מחדש npm install מהתיקיה הראשית כדי לוודא שאין שגיאות?
בנוסף תוכלי להדביק כאן את התוכן של שני הקבצים package.json ו package-lock.json מתיקיית הפרויקט?
נ.ב. שימי לב שיש מעל כל סרט קישור “להפעלת סביבת עבודה אונליין לקורס זה” עליו אפשר ללחוץ כדי לקבל סביבה בענן עם כל הדוגמאות.
תגובה אחת
התחלתי הכל מהתחלה,
הורדתי שוב את תיקיית הדוגמאות,
שידרגתי את NODE.JS לגירסה מתקדמת (כבר היה לי מותקן גירסה ישנה)
ואז פעלתי ע"פ הסדר בסרטון,
ואני מקבלת את השגיאה הזו:
אני כן רוצה להתקין את הסביבה אצלי ולא בענן,
כי אני מתחילה ללמוד את הקורס באופן מלא ועיקבי, כדי לעבוד בזה אח"כ,
אז זה חשוב לי,
אשמח מאד לעזרה!
תודה.
בצילום השני אני לא רואה שגיאה. יכולה להדביק צילום של המשך ההודעה?
json-lock.txt (324 .1 ק״ב)
הי מלכה,
נדמה לי שקצת כמו שקורה לי עם עוגות - כל פעם שאת מתקינה יש טעות בשלב אחר וזה מסביר את השגיאות השונות שעולות. אלה השלבים שצריך לעשות בצורה מסודרת:
אנחנו צריכים תיקיית node_modules אחת, קובץ package.json אחד וקובץ package-lock.json אחד בתיקיית הדוגמאות הראשית. בתוך תיקיה של דוגמה ספציפית אסור לשים אף אחד משלושת אלה.
בתוך תיקיית הדוגמאות הראשית תמחקי את node_modules לגמרי, תמחקי את package-lock.json לגמרי וקחי את package.json מתיקיית הדוגמאות שלי בקישור הזה:
https://github.com/tocodeil/react2020-course-examples/blob/master/package.json
מתוך תיקיית הדוגמאות הראשית הפעילי npm install ותראי שהוא יוצר לך תיקיית node_modules וקובץ package-lock.json באותה תיקיה ראשית.
אחרי שכל זה במקום את נכנסת לתיקיה של דוגמה ספציפית ושם מפעילה npx webpack-dev-server -d.
אם אחרי כל זה עדיין דברים לא יעבדו בבקשה תדביקי כאן צילום של כל הקבצים בתיקיית הדוגמאות הראשית ושל הקבצים בתיקיית הדוגמה הספציפית וכן את הודעת השגיאה שמקבלת
בטוח זה עשה בעיות - תודה על תשומת הלב מחקתי אותו עכשיו מתיקיית הדוגמאות
הסוגריים העגולים אחרי ה return צריכים להיות באותה שורה כמו ה return
יש הסבר על התופעה כאן:
https://levelup.gitconnected.com/return-statements-in-javascript-c874b7ff8974
לא משהו ספציפי, לאט לאט כשתמשיכי להיתקל בבעיות נוכל למצוא פיתרונות וללמוד מזה
הי,
אני לא ממליץ לעבוד עם create-react-app בגלל שהוא מייצר פרויקט שכולל המון המון תלויות והגדרות מאוד מורכבות. אני חושב שלצורך לימוד כדאי לעבוד עם קבצי הגדרות שאפשר לפתוח ולהבין אותם (במיוחד אני מדבר על קובץ ההגדרות webpack.config.js).
בפרויקט של create-react-app קובץ ההגדרות הוא נסתר. בשביל לראות אותו יש להפעיל את הפקודה yarn eject ואז מקבלים תיקיה שלמה של קבצי הגדרות עם כל הפרטים. את יכולה לנסות את זה בתור משחק על פרויקט חדש בשביל לראות את ההבדל בין ההגדרות בפרויקט הדוגמה שלנו להגדרות בפרויקט של create-react-app.
הסיבה שהם מכניסים כל כך הרבה דברים להגדרות הפרויקט היא שיש להם מטרה שונה: אני רוצה לתת תבנית פרויקט הכי קטן שאפשר כדי שנוכל להתמקד בריאקט, הם רוצים לתת את תבנית הפרויקט הכי גדולה ומקיפה שאפשר כדי שתתאים לכל סוגי הפרויקטים האפשריים.
ואחרי שאמרנו את כל זה אם עדיין את מעדיפה לעבוד עם מבנה הפרויקט של create-react-app כמובן שאין בעיה וכל הדוגמאות כאן יעבדו גם בהעתקה לשם.
שלום,
יש לי שאלה לגבי הבנייה של הפרויקט בוובפאק למצב פרודקשן,
האם webpack מכניס לקובץ JS שיוצר את כל התלויות שנמצאות ב-package.json?
או שיודע להבחין באיזה תלויות השתמשתי בפרויקט ורק אותם הוא מכניס?
ואם התשובה חיובית והוא אכן יודע, אז האם כאשר אני עושה import לתלות ותכלס הקומפוננטה לא באמת השתמשה בזה - האם הוא יודע לזהות את זה?
תודה רבה!
הי
מכניס רק את הדברים שעשית להם import.
לגבי import-ים מיותרים זה סיפור יותר מורכב. יש מנגנון של Tree Shaking שנועד לזהות את זה. אני מסביר עליו בשיעור כאן:
https://www.tocode.co.il/bundles/webpack/lessons/tree-shaking
ובכל מקרה עדיף לא להשאיר import-ים מיותרים
הי תומר
ב Windows-ים החדשים יש אפשרות כשאתה ב File Explorer על תיקיה מסוימת ללחוץ כפתור ימני ואז לבחור Open Windows Terminal Here וזה פותח לך cmd על אותה תיקיה
או אפילו אם אתה ב Windows יותר ישן ואין לך את זה אפשר לגרור את שם התיקיה מה File Explorer לחלון ה cmd ולכתוב cd לפני שם התיקיה, וזאת הפקודה שעוברת לתיקיה מסוימת
או אם ניסית משהו אחר וזה לא עבד לך יכול להדביק פה תמונה שממחישה מה בדיוק עשית ואנסה לעזור יותר
היי,
עשיתי npm install לתיקייה הראשית ונוצרו לי node modules ו packsge.json ו package-lock.json ואני מנסה להריץ על התיקייה של שיעור 3 את ה npx webpack-dev-server -d ויש לי שגיאה:
הי,
את ה npm install יש להריץ בתיקיה שכבר יש בה את הקובץ package.json מתיקיית הדוגמאות:
זה לא משהו שאמור להיווצר.
נסה למחוק את תיקיית node_modules ואת הקובץ package-lock.json, לוודא שקובץ package.json שיש לך בתיקיה זהה למה שמופיע בקישור (בתיקיית הדוגמאות) ואז להריץ שוב. אם זה עדיין לא עובד תדביק פה בבקשה את התוכן של הקבצים package-lock.json ו package.json ולפי זה אוכל למצוא את הבעיה.
במקביל ויותר חשוב - יש דרך חדשה וקלה יותר ליצור פרויקטי ריאקט שנקרא create-react-app. אני מלמד עליה בוידאו כאן כמה שיעורים קדימה:
https://www.tocode.co.il/bundles/react/lessons/create-react-app?tab=video
במקום להסתבך עם התקנות שווה לנסות קודם להתקין עם create-react-app ולהתקדם בקורס, ובסוף אם תחליט שזה חשוב לחזור להתקין עם ה webpack
היי ינון,
אני מנסה להריץ את הnpm install מתיקיית הדוגמאות (בדיוק כפי שהורדתי אותה בלי לשנות שום קובץ), אך מקבלת המון שגיאות, אשמח לעזרתך, תודה!
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated mini-create-react-context@0.4.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported
npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js-pure@3.15.2: core-js-pure@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js-pure.
added 1592 packages, and audited 1593 packages in 29s
74 packages are looking for funding
run `npm fund` for details
35 vulnerabilities (3 low, 1 moderate, 25 high, 6 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
ממשיך את הדיון מ קורס React 2020 שיעור הפקד הראשון שלי על מכונת Windows:
הי,
תודה רבה על הקורס הוא מרתק ומוסבר מעולה!!
בקורס ריאקט שיעור 3 אני מבצעת את הפקודה npx webpack-dev-server -d ומקבלת את השגיאה הבאה :
C:\Users\aharon\react>cd 03-react-on-windows\before
i ｢wds｣: Content not from webpack is served from C:\Users\aharon\react\03-react-on-windows\before
Error: error:0308010C:digital envelope routines::unsupported
האמת היא שכבר כשביצעתי את npm install התקבלה ההודעה הבאה :
35 vulnerabilities (3 low, 1 moderate, 25 high, 6 critical)
אך בפועל נוספה התיקייה C:\Users\aharon\react\node_modules על כל קבציה …
האם זה מקור השגיאה שמתקבלת מעלה בהרצת npx webpack-dev-server -d ?
ניתן לסייע לי בנושא?
תודה רבה!
תגובה אחת
הי עדי ההתקנה עד פה לא נראית נורא, npm אוהב לזרוק אינסוף אזהרות אבל זה לא משהו להתרגש ממנו
וודאי שיש לך תיקיית node_modules ואז תמשיכי לפי המדריך נראה לי שיהיה בסדר. במקביל שווה להסתכל על השיעור:
https://www.tocode.co.il/bundles/react/lessons/create-react-app?tab=video
שם אני מציג דרך קלה יותר ליצור פרויקטי ריאקט
הי יכולה להדביק כאן את כל הפלט במסך השגיאה? וגם את הקובץ package-lock.json המלא שלך?
תודה על התגובה המהירה.
הבעיה היא שהמשכתי לפי המדריך והרצת את הפקודהnpx webpack-dev-server -d מתיקיית before אבל אז הוצגו הרבה שגיאות אחרות ולא הצלחתי להכנס לlocalhost:8080
כדאי לוותר ולעבור למדריך השני ששמת?
שוב תודה
השגיאות:
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\03-react-on-windows\before
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array.<anonymous> (C:\Users\...\Documents\ToCode\react\react2020-course-examples-master\node_modules\loader-runner\lib\LoaderRunner.js:205:4) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.13.0
כן בכל מקרה כדאי ליצור פרויקט לפי המדריך מהשיעור השני (עם create-react-app). הוא יותר טוב וקל.
בשביל המשחק ואם תרצי לפתור את זה - אני רואה שאת עובדת עם node 18, וראיתי כמה מקומות ברשת שממליצים לשנמך ל 16 בגלל איזה בעיית תאימות זמנית בינו לבין וובפאק אבל אני לא בטוח שזאת הבעיה אצלך. יכולה להדביק פה גם את התוכן של קובץ package-lock.json ואז אוכל לנסות להפעיל אצלי ולראות אם מופיעה אותה בעיה?
תגובה אחת
תודה, אבדוק איך משנמכים (התקנתי אותו עכשיו תוך כדי המדריך)
זה תוכן הקובץ (לא עשיתי בו שום שינוי עד כמה שאני יודעת)
{
"name": "my-react-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"@babel/core": "^7.6.4",
"@babel/preset-react": "^7.6.3",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"flatpickr": "^4.6.3",
"html-webpack-plugin": "^3.2.0",
"immer": "^5.0.0",
"jquery": "^3.4.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.12",
"youtube-player": "^5.5.2"
},
"devDependencies": {
"@babel/preset-env": "^7.11.5",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^8.0.1",
"babel-jest": "^26.3.0",
"css-loader": "^3.2.1",
"jest": "^26.4.2",
"mini-css-extract-plugin": "^0.8.0",
"tinycolor2": "^1.4.1",
"webpack-dev-server": "^3.11.0"
}
}
סליחה, קראתי לא נכון, בכל אופן אני לא מצליחה להדביק פה את הכל, יכולה לשלוח לך במייל אם תרצה, תודה!
מהרצת הפקודה npm install התקבלה ההודעה הבאה :
ומהרצת הפקודה npx webpack-dev-server -d מתקבלת השגיאה הבאה :
בהעלאה: npx webpack-dev-server -d.jpg…
וכפי שעדי רשמה את הקובץ package-lock.jsonלא ניתן להעביר דרך כאן - קיימת דרך נוספת?
גם אצלי הותקן node18 אני אנסה במקביל לשנמך.
סורי… רואה שנשמט מההודעה הקודמת-
מהרצת הפקודה npx webpack-dev-server -d מתקבלת השגיאה הבאה :
נראה ממש כמו אצל עדי.
היי ינון, תוכל לעזור לי להבין את הבעיה ואיך לתקן אותה? Error: Option ‘-d, --devtool ’ argument missing
תגובה אחת
הי נסי להריץ את הפקודה:
npc webpack-dev-server
בלי ה -d נראה אם זה מסתדר.
במקביל יש כלי נוסף שלהם ליצירת פרויקט על Windows שנקרא create-react-app ואפשר לנסות גם אותו (יש שיעור עליו כאן):
https://www.tocode.co.il/bundles/react/lessons/create-react-app?tab=video
ובמקביל יש כלי נוסף (לא שלהם) ליצירת פרויקט ריאקט על Windows שנקרא vite והקלטתי גם עליו שיעור כאן:
https://www.tocode.co.il/past_workshops/106
לא משנה איך תיצרי את הפרויקט אם זה יהיה מתיקיית הדוגמאות או דרך create-react-app או דרך vite כל הדוגמאות והתרגילים בקורס יעבדו לך אז לא צריך להיתקע על גישה אחת, פשוט תמצאי את הדבר הראשון שעובד ותתקדמי איתו. זה לא חשוב להבנה של ריאקט.
תגובה אחת
תודה ינון! מכיוון שבעבר עשיתי טוטוריאלים שונים בcreate-react-app כן חשוב לי להרגיש יותר שליטה בבניית הבסיס לפרוייקט, ומצד שני לא רוצה ממש לסטות לקורס וובפאק.
בלי ה-d רץ יותר טוב ועדיין מחזיר לי שגיאה שמראה שיש ציפייה לקבצים שונים שאינם נמצאים בsrc
איזה גירסת node.js מותקנת אצלך? והאם ביצעת npm install מהתיקיה הראשית של תיקיית הדוגמאות? יכולה להדביק כאן את הפלט של הרצת npm install ?
דרך הvipe הצליח והשיעור על הvipe עושה סדר. אני יכולה כרגע להמשיך משם, למרות שאשמח לדעת למה לא הצליח עם הוובפאק
גירסת node.js:
v18.16.0
הי
הפעלה של webpack-dev-server לא מייצרת את תיקיית dist אלא מפעילה שרת שמגיש את דף האינטרנט מהזיכרון.
בשביל לייצר את תיקיית dist אנחנו נכתוב:
npx webpack
הי בהתקנה ראשונה יש להריץ
npm install
ואחר כך בשביל להפעיל את השרת מפעילים:
npx webpack-dev-server
או בגירסת ה vite (בתיקיית after-vite) אנחנו מפעילים את שרת הפיתוח עם:
npm run dev
מה ההבדל בין גרסת הVITE לגרסה השניה? מה צריך לעשות כדי שיהיה עם VITE?
כשני מריצה את הפקודה שאמרת מקבלת שגיאה:
C:\Windows\System32>cd C:\Avigail\React\05-jsx\before
C:\Avigail\React\05-jsx\before>npx webpack-dev-server
CLI for webpack must be installed.
webpack-cli (GitHub - webpack/webpack-cli: Webpack's Command Line Interface)
We will use “npm” to install the CLI via “npm install -D webpack-cli”.
Do you want to install ‘webpack-cli’ (yes/no): yes
Installing ‘webpack-cli’ (running ‘npm install -D webpack-cli’)…
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see Version Support - ESLint - Pluggable JavaScript Linter for other options.
added 366 packages, and audited 367 packages in 1m
121 packages are looking for funding
run npm fund for details
found 0 vulnerabilities
Error: Cannot find module ‘webpack-cli/package.json’
Require stack:
C:\Avigail\React\05-jsx\before>
הי
בתיקיית הדוגמאות הראשית יש קובץ בשם package.json. הקובץ הזה כולל את רשימת התלויות כלומר ספריות node שצריכות להיות על המחשב כדי שנוכל להריץ פרויקט.
דרך אחת להריץ פרויקט היא להעתיק את הקובץ הזה לתוך תיקיה של פרויקט, ואז להתקין את התלויות בתוך אותו פרויקט ואז להריץ. ב Windows זה נראה ככה - כשאני בתוך תיקיית before:
Z:\Downloads\react2020-course-examples-master\03-react-on-windows\before>copy ..\..\package.json .
1 file(s) copied.
Z:\Downloads\react2020-course-examples-master\03-react-on-windows\before>npm install
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
added 1026 packages, and audited 1027 packages in 2m
125 packages are looking for funding
run `npm fund` for details
12 vulnerabilities (3 moderate, 5 high, 4 critical)
To address issues that do not require attention, run:
npm audit fix
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
Z:\Downloads\react2020-course-examples-master\03-react-on-windows\before>npx webpack-dev-server
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://10.211.55.9:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'Z:\Downloads\react2020-course-examples-master\03-react-on-windows\before\public' directory
asset main.js 3.41 MiB [emitted] (name: main)
asset main.css 579 bytes [emitted] (name: main)
asset index.html 233 bytes [emitted]
Entrypoint main 3.41 MiB = main.css 579 bytes main.js 3.41 MiB
runtime modules 44 KiB 23 modules
orphan modules 3.35 KiB [orphan] 3 modules
modules by path ./node_modules/ 1.26 MiB
modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
modules by path ./node_modules/webpack/hot/*.js 5.17 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 78.9 KiB 4 modules
modules by path ./node_modules/react/ 85.7 KiB 2 modules
modules by path ./node_modules/react-dom/ 1010 KiB 2 modules
modules by path ./node_modules/mini-css-extract-plugin/dist/hmr/*.js 5.92 KiB 2 modules
modules by path ./node_modules/scheduler/ 17.3 KiB 2 modules
+ 2 modules
modules by path ./css/*.css 704 bytes (javascript) 30 bytes (css/mini-extract)
./css/main.css 704 bytes [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./css/main.css 30 bytes [built] [code generated]
./src/main.js 351 bytes [built] [code generated]
webpack 5.97.1 compiled successfully in 4402 ms
ואז הפרויקט רץ ואפשר להתחבר אליו דרך הדפדפן לכתובת localhost:8080
אפשרות שנייה היא להתקין את התלויות מתוך תיקיית הדוגמאות הראשית. בצורה כזאת לא צריך לכל פרויקט להריץ npm install מחדש אז זה קצת יותר נוח (בגלל זה שמתי שם את קובץ ה package.json). בשביל זה אני מריץ קודם כל בתיקיית הדוגמאות הראשית:
Z:\Downloads\react2020-course-examples-master>npm install
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
added 1147 packages, and audited 1148 packages in 30s
101 packages are looking for funding
run `npm fund` for details
29 vulnerabilities (3 low, 7 moderate, 13 high, 6 critical)
To address issues that do not require attention, run:
npm audit fix
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
Z:\Downloads\react2020-course-examples-master>
אחרי זה אני יכול להיכנס לכל תיקיית פרויקט שנמצאת בתוך תיקיית הדוגמאות הראשית ורק להפעיל בה את ה webpack-dev-server באמצעות:
Z:\Downloads\react2020-course-examples-master\03-react-on-windows\after>npx webpack-dev-server
שימי לב למחוק את תיקיית node_modules מתיקיות הפרויקטים עצמם אם את מתקינה את התלויות מתיקיית הדוגמאות הראשית, כלומר צריך לבחור איפה להתקין את התלויות או בתיקיית הפרויקט או בתיקיית הדוגמאות הראשית, ושם לשים את ה package.json.
לגבי vite - ויט הוא כלי ליצירת פרויקטים שצבר הרבה פופולריות בשנים האחרונות ובהרבה פרויקטים משתמשים בו ולא ב webpack. בשביל ליצור פרויקט ריאקט באמצעות vite אני מפעיל בתיקייה חדשה לגמרי את הפקודה:
C:\Users\ynonp>npm create vite@latest 03-react-on-windows -- --template react
Scaffolding project in C:\Users\ynonp\03-react-on-windows...
Done. Now run:
cd 03-react-on-windows
npm install
npm run dev
לאחר מכן אני מבצע את שלושת הפקודות שהוא הדפיס לי:
C:\Users\ynonp\03-react-on-windows>npm install
added 259 packages, and audited 260 packages in 42s
108 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
C:\Users\ynonp\03-react-on-windows>code .
C:\Users\ynonp\03-react-on-windows>npm run dev
> 03-react-on-windows@0.0.0 dev
> vite
VITE v6.0.11 ready in 785 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
וזה מריץ את הפרויקט על פורט 5173 כלומר נכנסים לדפדפן לכתובת localhost:5173 כדי לראות את העמוד. שימי לב שפרויקט vite חדש כולל קצת קוד סטארטר אז בשביל לעבוד עם כלי זה את לוקחת את קבצי הקומפוננטות מהדוגמאות ומעתיקה אותן לתוך הסטארטר במקום הקובץ src/App.jsx שיש בפרויקט vite החדש.
לגבי השגיאה שהדבקת - זה נראה שלא התקנת את התלויות כמו שצריך או לא במקום הנכון. שימי לב להריץ
npm install
מאותה תיקייה שמכילה את הקובץ package.json, וזה נכון בכל אחת מ-3 הדרכים להרצת הפרויקט.
נא עדכני אם אחרי ההוראות כאן זה עובד או אם עדיין דברים לא עולים
כשאני מנסה להתקין את התלויות מהפרויקט הראשי אני מקבלת שגיאה
C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master>npm install
npm warn deprecated urix@0.1.0: Please see GitHub - lydell/urix: [DEPRECATED] Makes Windows-style paths more unix and URI friendly.
npm warn deprecated source-map-url@0.4.1: See GitHub - lydell/source-map-url: [DEPRECATED] Tools for working with sourceMappingURL comments.
npm warn deprecated source-map-resolve@0.5.3: See GitHub - lydell/source-map-resolve: [DEPRECATED] Resolve the source map and/or sources for a generated file.
npm warn deprecated resolve-url@0.2.1: GitHub - lydell/resolve-url: [DEPRECATED] Like Node.js’ `path.resolve`/`url.resolve` for the browser.
npm warn deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm warn deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
added 1147 packages, and audited 1148 packages in 13s
101 packages are looking for funding
run npm fund for details
29 vulnerabilities (3 low, 7 moderate, 13 high, 6 critical)
To address issues that do not require attention, run:
npm audit fix
Some issues need review, and may require choosing
a different dependency.
Run npm audit for details.
C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master>cd 05b-project-templates
C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master\05b-project-templates>npx webpack-dev-server
[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: http://localhost:8080/
[webpack-dev-server] Content not from webpack is served from ‘C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master\05b-project-templates\public’ directory
assets by status 116 KiB [cached] 1 asset
runtime modules 27.2 KiB 12 modules
orphan modules 18.8 KiB [orphan] 8 modules
cacheable modules 160 KiB
modules by path …/node_modules/webpack-dev-server/client/ 55.8 KiB
…/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true + 8 modules 27.4 KiB [built] [code generated]
+ 3 modules
modules by path …/node_modules/webpack/hot/.js 4.59 KiB
…/node_modules/webpack/hot/dev-server.js 1.88 KiB [built] [code generated]
+ 3 modules
modules by path …/node_modules/html-entities/lib/.js 81.3 KiB
…/node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]
…/node_modules/html-entities/lib/named-references.js 72.7 KiB [built] [code generated]
+ 2 modules
…/node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
…/node_modules/events/events.js 14.5 KiB [built] [code generated]
WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.
Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: Mode | webpack
ERROR in main
Module not found: Error: Can’t resolve ‘./src’ in ‘C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master\05b-project-templates’
resolve ‘./src’ in ‘C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master\05b-project-templates’
using description file: C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master\package.json (relative path: ./05b-project-templates)
Field ‘browser’ doesn’t contain a valid alias configuration
using description file: C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master\package.json (relative path: ./05b-project-templates/src)
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master\05b-project-templates\src doesn’t exist
.js
Field ‘browser’ doesn’t contain a valid alias configuration
C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master\05b-project-templates\src.js doesn’t exist
.json
Field ‘browser’ doesn’t contain a valid alias configuration
C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master\05b-project-templates\src.json doesn’t exist
.wasm
Field ‘browser’ doesn’t contain a valid alias configuration
C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master\05b-project-templates\src.wasm doesn’t exist
as directory
C:\Users\user1\Desktop\courses\React course\react2020-course-examples-master\05b-project-templates\src doesn’t exist
webpack 5.75.0 compiled with 1 error and 1 warning in 1006 ms
אשמח לעזרה
תגובה אחת
הי
התיקייה שבחרת מכילה פרויקט מהשיעור על
create-react-app
תתחילי עם הרצת הפרויקט משיעור זה כלומר מהתיקייה:
03-react-on-windows/after
תראי אם זה עובד.
הפרויקט שבחרת משתמש בתבנית של create-react-app. אני לא ממליץ עליה יותר השארתי אותה כאן כי עדיין יש פרויקטים ישנים איתה אבל בגדול לא מומלץ לפרויקטים חדשים. אפשר להריץ אותו באופן הבא (מתוך התיקייה 05b-project-templates/react-demo-1)
npm install
npm run start
וזה מקשיב על localhost:3000
סוג שלישי של פרויקטים שתמצאי בתיקיות שם זה פרויקטים שבניתי עם vite (יש על זה גם שיעור בקורס). לדעתי vite זו שיטת בניית פרויקטים מומלצת היום והם נמצאים תמיד בתיקיות בשם after-vite. דוגמה לפרויקט כזה יש בתיקיה 05-jsx/after-vite
אנחנו מריצים אותם עם:
npm install
npm run dev
מתוך תיקיית פרויקט.