כיצד לפרסם את רכיב Vue.js שלך ל- NPM

יצרת רכיב נהדר ב- Vue.js שלדעתך מפתחים אחרים יכולים להשתמש בפרויקטים שלהם. איך תוכלו לחלוק את זה איתם?

במאמר זה, אראה לך כיצד להכין את הרכיב שלך כך שניתן יהיה לארוז אותו ב- NPM ולפרסם אותו. אני משתמש בפרויקט לדוגמא ומציג את הדברים הבאים:

  • ודא שהתלות לא כלולה בחבילה
  • השתמש ב- Webpack כדי ליצור תבניות נפרדות עבור הדפדפן והצומת
  • צור תוסף לדפדפן
  • תצורה חשובה של package.json
  • פרסם ל- NPM
הערה: מאמר זה פורסם במקור בתאריך 31/07/2017 כאן בבלוג של מפתחי Vue.js

פרויקט מחקר מקרה: שעון Vue

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

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

כלי מפתח: Webpack

רוב מה שאני צריך לעשות כדי להכין רכיב זה ל- NPM נעשה באמצעות Webpack. להלן ההתקנה הבסיסית של webpack שאוסיף למאמר זה. לא אמורות להיות הרבה הפתעות אם השתמשת בעבר ב- Vue ו- Webpack:

חיצוני

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

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

הסביבה בונה

ישנן שתי סביבות שונות ב- Vue.js שמשתמש אולי ירצה להתקין רכיב. ראשית, הדפדפן, למשל.

שנית, סביבות פיתוח מבוססות Node.js, למשל.

באופן אידיאלי, אני רוצה שמשתמשים יוכלו להשתמש בשעון Vue בשתי הסביבות. למרבה הצער, בסביבות אלה, יש לאגד את הקוד בצורה שונה, מה שאומר שאני צריך להגדיר שתי מבנים שונים.

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

התצורה הכללית הייתה בדיוק כמו שהייתה בעבר (גזמתי את רובם בכדי לחסוך מקום) אלא שהסרתי את אפשרויות הקלט ושם הקובץ לפלט. אני אפרט אלה בנפרד בתצורות הבנייה הנפרדות.

חבילת דפדפן

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

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

התוצאה המיועדת היא התקנה פשוטה זו:

חיבור

ראשית, אצור מעטפת תוספים כדי להקל על התקנת הרכיב:

תוסף זה רושם את הרכיב באופן גלובלי כך שהמשתמש יוכל לקרוא את רכיב השעון מכל מקום ביישום שלו.

תצורת Webpack

כעת אני משתמש בקובץ התוסף כנקודת כניסה ליצירת דפדפן. אני זורק לקובץ בשם "vue-clock.min.js" מכיוון שזה הכי ברור למשתמש.

ייצא כספרייה

Webpack יכול לחשוף את הסקריפט הכלול במספר דרכים, כגון: כמודול AMD או CommonJS, כאובייקט, כמשתנה גלובלי וכו '. ניתן לציין זאת באמצעות אפשרות libraryTarget.

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

אני גם נותן את שם הספרייה "VueClock". המשמעות היא שדפדפן שמכיל את החבילה יהיה זמין כחלון גלובלי.

צרור קשר

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

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

package.json

לפני פרסום ל- NPM, אקים את קובץ package.json שלי. תיאור מפורט של כל אפשרות ניתן למצוא באתר npmjs.com.

קיצרתי את רוב הקובץ הזה, אך הנה כמה נקודות מפתח שיש לזכור:

  1. קובץ התסריט הראשי, i. H. "ראשי": "dist / vue-clock.js". פעולה זו מתייחסת לקובץ צרור הניודים ומבטיחה כי מעמיסי המודולים יודעים איזה קובץ לקרוא; ח.

2. תלות. מכיוון שלא כללתי תלות בחבילה, המשתמשים יצטרכו להתקין את התלות כדי להשתמש בחבילה.

פרסם ל- NPM

לאחר שהרכיב שלי הוגדר כהלכה, הוא מוכן לפרסום ל- NPM. אני לא אחזור על ההוראות כאן מכיוון שהן מכוסות בפירוט ב- npmjs.com.

הנה התוצאה:

  • קוד Github
  • צד NPM
השתתף בקורס היכרות חינם של Vue.js! במדריך הווידאו הזה בן 30 הדקות, למד מהו Vue, איזה סוג של אפליקציות אתה יכול לבנות איתו, כיצד הם משתווים ל- React & Angular. הרשם בחינם!