עזרה בייבוא ספריה לתוך פרוייקט בnodejs

[chagold]

הכינור הזה משתמש בספריה הזו בשביל הגרף (העיגול וה-V) של השלמת המשימה.
יש לי איזה פרוייקט בnodejs שאני לא מצליח להכניס את הספריה לשם.

כי כשאני כותב ככה,

 import circle from 'cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js';

אני מקבל שגיאה כשהוא 'מקמפל' אותו.

 ERROR in C:/xampp/htdocs/src/admin.js
 
 Module not found: Error: Can't resolve 'cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js' in 'C:\xampp\htdocs\src'
 
  @ C:/xampp/htdocs/src/admin.js 3:0-67
 
  @ multi ./src/admin.js

תודה

[dovid]

אם כשאתה אומר nodejs אתה מתכוון כמשמעו שזה בד"כ לקבצי סקריפט של צד שרת, שמה הimport מייבא מודולים של המשתמש או מתיקיית הנוד המקומית או הגלובלית במחשב.
בנוד אין טעינה מווב (זה אפשרי אבל זה משהו ממש לא נורמלי) אלא פשוט הכל נמצא בתיקיות האפליקציה. בשביל להתקין דבר שנמצא בnpm הכי קל זה להשתמש בו, במקרה הזה תריץ

npm install iview --save

ואז אתה מייבא עם 'import from 'iview.

אם כוונתך לצד לקוח עם ES6, אזי כל טעינת סקריפט מתבצעת ב"שורה תחתונה" עי תגית html.
יש כלים כמו systemjs שממפים כתובות URL לספריות בעלות שם כדי לבצע טעינה חכמה ולמנוע טעינות כפולות.

[אהרן]

סליחה, על ההתערבות
מדוע זה לא עובד?
http://jsfiddle.net/tba7nnww/5/

עריכה:
קבל צורת הגשה.

[chagold]

@dovid אמר בעזרה בייבוא ספריה לתוך פרוייקט בnodejs:

אם כשאתה אומר nodejs אתה מתכוון כמשמעו שזה בד"כ לקבצי סקריפט של צד שרת, שמה הimport מייבא מודולים של המשתמש או מתיקיית הנוד המקומית או הגלובלית במחשב.
בנוד אין טעינה מווב (זה אפשרי אבל זה משהו ממש לא נורמלי) אלא פשוט הכל נמצא בתיקיות האפליקציה. בשביל להתקין דבר שנמצא בnpm הכי קל זה להשתמש בו, במקרה הזה תריץ

npm install iview --save

ואז אתה מייבא עם 'import from 'iview.

אם כוונתך לצד לקוח עם ES6, אזי כל טעינת סקריפט מתבצעת ב"שורה תחתונה" עי תגית html.
יש כלים כמו systemjs שממפים כתובות URL לספריות בעלות שם כדי לבצע טעינה חכמה ולמנוע טעינות כפולות.

עשיתי את 2 הפקודות, ובקימפול אני מקבל שגיאה

 ERROR in C:/xampp/htdocs/src/admin.js 3:12
 
 Module parse failed: Unexpected token (3:12)
 
 You may need an appropriate loader to handle this file type.
 
 | import './admin.scss'
 
 | import Vue from 'vue/dist/vue.js';
 
 > import from 'iview';

ניסיתי גם

 import circle from 'iview';

וזה אמנם לא עשה שגיאה אבל הגרף לא נצפה בדף.

(import i-circle from 'iview'; בכלל עושה שגיאת קימפול כיון שהוא לא מזהה את המקף)

[chagold]

@dovid אמר בעזרה בייבוא ספריה לתוך פרוייקט בnodejs:

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

ניסיתי בצד לקוח, (אני מעריך שזה ES6). מדובר שם בכתיבה ב-scss.
כבר היה שם טעינות לקבצים באמצעות תגית script ככה:

 script(src="admin.js")

העתקתי את הקובץ לשרת ועשיתי אותו דבר, אבל הוא לא טוען אותו.
כשהרצתי npm run build הוא בכלל לא הופיע ברשימת הקבצים שנטענים. (למרות שיש קבצים באותה תיקיה שנטענים.
מה יכולה להיות הסיבה?
תודה.

[dovid]

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

[chagold]

@dovid הבנתי מהפוסט שלך שיש 2 אפשרויות להשתמש בספריה בפרוייקט, או להתקין עם הפקודה npm install iview --save ואח"כ לטעון עם 'import from 'iview. או (כאשר הנושא הוא סקריפט עבור שימוש בצד לקוח) לקרוא ישירות לספריה.
וכיון שכאן זה מיועד עבור צד לקוח, אז טענתי את הספריה באפשרות השניה שנתת.

scss - מה לעשות שככה קיבלתי את הפרוייקט...

דף האינטרנט כתוב במבנה היררכיוני כזה בערך..

 doctype html
 
 head
 
     title Dashboard
 
 
 
 body(class=login)
 
     .login
 
         .login_container
 
             .login_logo Dashboard
 
             .login-item
 
                 form#login_form.form.form-login(@submit.prevent="login")
 
                     .form-field

ובסופו ככה (כולל ההוספה שלי):

         footer.admin__footer
 
         
 
     script(src="iview.min.js")
 
     script(src="admin.js")
 
     link(rel="stylesheet", href="admin.css")

בהתחלה התקנתי את הספריה באמצעות הפקודה npm install iview --save הנ"ל אבל כשזה לא טען אז הוספתי את ספריית ה-JS הנ"ל לבין הקבצים שבשרת וקישרתי באמצעות התגית

      script(src="iview.min.js") 

כמו שבJSFIDDLE זה מקושר אליו. וכאמור זה לא עובד.
תודה.

[dovid]

טוב.
הקובץ שקראת לו scss זה לכאורה Jade שזה Template Engine כלומר תבנית שמרונדרת ע"י צד השרת (במקרה זה כנראה expressjs) לHTML רגיל.
התגית

 script(src="admin.js")

מרונדרת לתגית סקריפט רגילה, וזה אמור לעבוד לך, בתנאי שהקובץ בכתובת זהה לקובץ admin.js כלומר בשורש האתר הנגיש ללקוח.

[dovid]

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

[chagold]

נכון.
יש שגיאה

 GET http://localhost:3000/iview.min.js net::ERR_ABORTED 404 (Not Found)

אבל לadmin.js שממוקם באותו תיקיה אין שגיאה

[dovid]

אם http://localhost:3000/iview.min.js מחזיר שגיאה, ו http://localhost:3000/admin.js לא, אז אחרי שוידאת פעם נוספת שהקובץ נקרא בדיוק iview.min.js אז צריך לבדוק מה קורה עם הניתוב של express והאם יש בפרוייקט תיקיה סטטית.
בקיצור תצטרך לעבור על הקוד ולראות האם יש app.static. וא"כ לאיזה תיקיה זה מוביל. ייתכן שיש נטו לקובץ admin.js ניתוב אינדבדואלי, אם כי זה די משונה.

[zvizvi]

@dovid אמר בעזרה בייבוא ספריה לתוך פרוייקט בnodejs:

כאורה Jade שזה Template Engine כלומר תבנ

2 הערות:

• בגרסאות האחרונות של NPM כבר לא צריך להוסיף את המילה --save כי זה נשמר בפרוייקט גם בלי זה.
• Node עד גירסה 10 (ואולי אף מעבר - לא בדקתי) לא תומך בImport. יש להשתמש בכתיב הבא:

const iview = require('iview');

[chagold]

עשיתי, וזה עדיין לא עובד.
יצויין שה-vscode שלי טוען ש

 [ts] 'iview' is declared but its value is never read.

והוא באמת לא מופיע במסמך כי התגית היחידה היא i-circle .
יתכן שחסר עוד משהו חוץ מהייבוא הנ"ל?

[dovid]

@chagold אמר בעזרה בייבוא ספריה לתוך פרוייקט בnodejs:

עשיתי, וזה עדיין לא עובד.

מה עשית? @zvizvi דיבר אלי, עבורך זה לא רלוונטי. שוב, צד לקוח מתחיל ונגמר בhtml.

[chagold]

ובצד לקוח אמורה/עלולה להיות בעיה אם שמתי נתיב גלובלי ככה:

     script(src="https://cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js")

כי יש שגיאה זו:

בHTML הוא מופיע נכון

 <script src="https://cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js"></script>

[dovid]

הצורה הזו תקינה לגמרי, וגם השגיאה הזו מראה שהסקריפט נטען אלא שיש בו שגיאה.
אולי בגלל תלות חסרה ואולי להיפך - התנגשות עם משתנה גלבלי של ספריה אחרת.
בכל אופן את הדילמה איך לשים את הסקריפט פתרת עם הלינק החיצוני לCDN.
אולי תבחר גירסה שונה? למשל האחרונה:
https://cdn.bootcss.com/iview/3.1.4/iview.min.js

[chagold]

@dovid אין שינוי

[chagold]

@dovid אמר בעזרה בייבוא ספריה לתוך פרוייקט בnodejs:

אולי להיפך - התנגשות עם משתנה גלבלי של ספריה אחרת.

אולי כי התקנתי את הספריה הזו בשרת.
איך מסירים אותה?

[dovid]

@chagold אמר בעזרה בייבוא ספריה לתוך פרוייקט בnodejs:

@dovid אמר בעזרה בייבוא ספריה לתוך פרוייקט בnodejs:

אולי להיפך - התנגשות עם משתנה גלבלי של ספריה אחרת.

אולי כי התקנתי את הספריה הזו בשרת.
איך מסירים אותה?

אין שום קשר בין הצד שרת לצד לקוח - בצד הלקוח, כל דף, הוא עולם עצמאי עומד לחלוטין בפני עצמו וכלום לא משפיע עליו חוץ מתוכנו - HTML, וממנו נגזרים הJS והCSS שמפורשים בו.
אין לי תשובה למה יש לך את השגיאה.

[chagold]

עריכה:
https://docs.npmjs.com/getting-started/uninstalling-local-packages

[chagold]

@chagold אמר בעזרה בייבוא ספריה לתוך פרוייקט בnodejs:

ובצד לקוח אמורה/עלולה להיות בעיה אם שמתי נתיב גלובלי ככה:

     script(src="https://cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js")

כי יש שגיאה זו:

בHTML הוא מופיע נכון

 <script src="https://cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js"></script>

זה איזשהו בעיה של קידוד. בדפדפן שלי יש חלקי מהקוד שמוצגים בסינית עתיקה:

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

[dovid]

@chagold אמר בעזרה בייבוא ספריה לתוך פרוייקט בnodejs:

https://cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js

בקשר לסינית זו לא בעיה, זה באמת ככה בקובץ המקור (זה בשביל שיהיה כיתוב מתאים בכמה שפות).

[chagold]

נראה לי שזה תואם לבעיה שלי.
שאלה: איך אני ממיר את מה שכתוב שם לscss?

 <script type="text/javascript">
 
   window.iview= iview;
 
   window.iview[ "default" ] = iview;
 
 </script>

[dovid]

לא יודע מי תקע לך בראש את scss, זה בכלל בכלל לא זה.
זה jade כמו שכתבתי לך למעלה, וכותבים שמה ככה:

:javascript
  | window.iview= iview;
  | window.iview[ "default" ] = iview;

[chagold]

@dovid אכן טעיתי בהקשר של scss אבל לענ"ד זה תבנית אחרת ולא jade , כי בשורות אחרות בפרוייקט התגית סקריפט מוצגת ככה:

 script(src="https://cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js")

וזה התבטאות שלא מופיעה בjade בכ"א לפי מה שהספקתי לראות.

כמו"כ ניסיתי את מה שכתבת לי, וזה עשה שגיאה (דהיינו 'אחרי קימפול').

 C:\xampp\htdocs\views\admin.pug:57 unknown filter ":javascript"
 
 Error: C:\xampp\htdocs\views\admin.pug:57
 
 
 
 unknown filter ":javascript"
 
     at makeError (C:\xampp\htdocs\node_modules\pug-error\index.js:32:13)
 
     at filterWithFallback (C:\xampp\htdocs\node_modules\pug-filters\lib\handle-filters.js:47:17)
 
     at walk.includeDependencies (C:\xampp\htdocs\node_modules\pug-filters\lib\handle-filters.js:20:18)
 
     at walkAST (C:\xampp\htdocs\node_modules\pug-walk\index.js:23:18)
 
     at C:\xampp\htdocs\node_modules\pug-walk\index.js:104:20
 
     at Array.reduce (<anonymous>)
 
     at walkAndMergeNodes (C:\xampp\htdocs\node_modules\pug-walk\index.js:103:18)
 
     at walkAST (C:\xampp\htdocs\node_modules\pug-walk\index.js:37:19)
 
     at walkAST (C:\xampp\htdocs\node_modules\pug-walk\index.js:48:21)
 
     at C:\xampp\htdocs\node_modules\pug-walk\index.js:104:20

[dovid]

@chagold אמר בעזרה בייבוא ספריה לתוך פרוייקט בnodejs:

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

script(type='text/javascript').
  if (foo) bar(1 + 5)

מאידך מפה https://stackoverflow.com/questions/5858218/how-can-i-render-inline-javascript-with-jade
יצאתי מבולבל לחלוטין. זה לא ייאמן שדף הבית של פרוייקטים כה גדולים לא מעודכן! וגם חוסר התיעוד מחליא אותי. זה חלק מבעיות עולם הקוד הפתוח.