נשמע לי בינתיים מורכב מידי להשתמש בזה עם npm
אני ממליץ כן לעבוד בצורה של NPM. זה לא כל כך מורכב כמו שזה נראה.
אני אסביר מה קורה מאחורי הקלעים כדי שתבין:
אפליקציית VUE בנוייה מקומפוננטים. הדרך לבנות קומפוננט הוא על ידי קריאה לבנאי new Vue עם כל הפרטים על הקומפוננט בתוך אובייקט שאתה מעביר לבנאי, (דאטה, מתודות, הטמפלט של וה-HTML וכו').
אפליקצייה גדולה בנוייה מקומפוננטים רבים שכל אחד מורכב מעוד קומפוננטים וכל אחד מאלו מעוד וכו'.
כמו בכל אפליקציה גדולה, בשלב כלשהו חייבים לפצל את הקוד לקבצים שונים, והכי טוב שכל קומפוננט יהיה בקובץ נפרד.
והרי בצד לקוח אין לנו דרך לעשות require לקבצים אחרים?
לשם כך מאז ומתמיד נהוג להשתמש ב-webpack וכלים דומים, כלים אלו מה הם עושים? הם קוראים את כל הקבצים שכתבת ומערבלים את הכל לקובץ אחת ענקית, וכל פעם שכתבת require מחליפים את זה במשתנה שמכיל את האובייקט עצמו.
כך פחות או יותר.
מה ש-VUE עשו, שהם לקחו את זה צעד אחת קדימה.
אמרו, הרי בכל מקרה הקבצים עוברים שלב של תרגום וקמפול, אז במקום שתכתוב את כל ה-HTML של הטמפלייטים בתוך ה-JS, ובמקום שכל פעם תקרא לבנאי של הקומפוננט עם כל הפרמטרים מסודרים בתוך אובייקט כדי לבנות קומפוננט, נעשה סוג קובץ חדש עם סיומת Vue שיכלול 3 חלקים, א. סקריפט, ב. HTML, ג. CSS, וזה יהיה הקומפוננט, וכדי להשתמש בו פשוט תכתוב import somename from file.vue ובשלב הקמפול אנחנו נשנה את זה לקריאה לבנאי עם כל הפרמטרים מסודרים כמו שצריך.
ואיך נכנס נוד ו-NPM לתמונה?
אז על ראשון ראשון, למה צריך נוד? פשוט כי כלי webpack הוא אפליקציית CLI שנכתב ב-JS ומריצים את זה על ידי נוד.
ומה עם NPM?
זו דרך נוחה להוסיף ספרייות של אחרים במקום להוסיף תגי סקריפט לקובץ פשוט עושים require לספרייה ו-webpack מוסיפה אותה לבנדל הסופי.
ומה זה התחביר המשונה של export ו-import?
כלום, זה התחביר החדש שהוא חלק מ-ES6 עבור ייבוא וייצוא מודולים. זה מקביל פחות או יותר ל-require של נוד.