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

[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
יצאתי מבולבל לחלוטין. זה לא ייאמן שדף הבית של פרוייקטים כה גדולים לא מעודכן! וגם חוסר התיעוד מחליא אותי. זה חלק מבעיות עולם הקוד הפתוח.