עזרה בייבוא ספריה לתוך פרוייקט ב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")

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

0_1541021942034_f9680262-07b9-445a-be1f-7d848f2e3f8c-image.png

ב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

תחומים - פורום חרדי מקצועי

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