מבוא ל- Parcel.js, מגביל יישומי האינטרנט ללא הגדרת תצורה

מבוא ל- Parcel.js, מגביל יישומי האינטרנט ללא הגדרת תצורה

מבוא ל- Parcel.js, מגביל יישומי האינטרנט ללא הגדרת תצורה
СОДЕРЖАНИЕ
02 июня 2020

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


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

Webpack הוא הקבלן הפופולרי ביותר והוא עקב אחר בעקבים של Require.js, Rollup ופתרונות דומים. אך עקומת הלמידה לכלי כמו webpack היא תלולה. תחילת העבודה עם webpack אינה קלה בגלל התצורות המורכבות שלה. כתוצאה מכך, בשנים האחרונות עלה פיתרון אחר. כלי זה אינו בהכרח רץ קדמי, אלא אלטרנטיבה קלה יותר לעיכול בנוף חבילות המודולים הקדמיות. הצגת Parcel.js.

מבוא ל- Parcel.js

Parcel.js (parceljs.org) הוא בדיוק מה שרבים מתחילים לבנות מפתחים ביניים: צרור פשוט בעל תצורה נמוכה, שתוכלו להתחיל לעבוד איתו במהירות.

אני מקווה שהמדריך לחבילות זה יספק מבוא קל לעקוב אחר הכלי הזה. אסקור את היסודות ואז אראה לך כיצד להשתמש בחבילה כדי לקבץ אפליקציית אינטרנט פשוטה המשלבת Babel ו- Sass.

�� תוכן עניינים:

  1. מדוע להשתמש במצרף יישומי אינטרנט? #
  2. התקנת Parcel.js #
  3. יצירת נקודת הזנת קובץ #
  4. המסך / תיקיה מספר
  5. שימוש ב- Parcel.js עם Babel #
  6. שימוש ב- Parcel.js עם Sass #
  7. צרור סקריפטים מרובים עם חבילה מספר
  8. פיצול קוד עם Parcel.js #
  9. ייצור בונה באמצעות Parcel.js #
  10. יש חסרונות בשימוש בחבילה? #

אתר Parcel.js

מדוע להשתמש במצרף אפליקציות אינטרנט?

אני לא מבזבז יותר מדי זמן בדיון בסיבות השימוש במצרף אפליקציות כמו Parcel.js, מכיוון שנושא זה בוודאי עוסק בעבר. להלן סקירה בסיסית של היתרונות בשימוש בכלי כזה:

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

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

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

התקנת Parcel.js

אתה יכול להתקין Parcel.js במסוף שלך באמצעות חוט או npm. במדריך זה אשתמש ב- npm. הנה הפקודה להתקין אותה באופן גלובלי, כך שתוכלו להשתמש בו בכל פרויקט:

npm התקן חבילות חבילות-גרם

דגל ה- g מתקין אותו ברחבי העולם. אם אתה רק רוצה להתקין אותו לפרויקט בודד ולהוסיף אותו לתלות התלויות של הפרויקט שלך ב- package.json, אתה יכול להריץ את אותה הפקודה בתיקיית השורש של הפרויקט באמצעות דגל – שמור-dev במקום -g:

npm התקנת חבילות חבילות – save-dev

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

npm init -y

הדגל -y מונע מ- npm לשאול שאלות כלשהן, באמצעות ברירות המחדל להגדרה. בהנחה שהפרויקט שלי נקרא parcel-demo, זה יוצר קובץ package.json בשורש שנראה כך:

{
"שם": "הדגמה של חבילות",
"גרסה": "1.0.0",
"תיאור": "",
"עיקרי": "index.js",
"תסריטים": {
"מבחן": "הד \"שגיאה: לא צוינה בדיקה \" && יציאה 1"
},
"מילות מפתח": [],
"מחבר": "",
"רישיון": "ISC"
}

אם אתה מוצא את אחד הדברים האמורים מבלבלים בגלל חוסר ההיכרות שלך עם npm, תוכל לבדוק את המקיף שלי הדרכה בשעה 19:00. הוא מתמקד בסיוע למפתחי אתרים מקדימים להבין את הכלי.

יצירת נקודת הזנת קובץ

לצורך הגדרת פרויקט בסיסי, אני הולך להשתמש ב- Parcel.js בקובץ index.html שמצביע על קובץ JavaScript ראשי הנקרא index.js (כפי שמוצג בקובץ package.json). קובץ HTML זה ישמש כנקודת הכניסה לחבילה שלי. לקובץ ה- HTML שלי יהיה אלמנט סקריפט שמצביע על קובץ ה- JavaScript שלי, כך שהוא ייראה כמו זה:

html>
<html>
<ראש>
<כותרת>פריטת חבילה>
ראש>
<גוף>
<סקריפט src ="./js/index.js">תסריט>
גוף>
html>

ברגע שיש לי את קובץ ה- HTML וקובץ ה- JavaScript הנכונים, אוכל להפעיל את שרת הפיתוח המובנה של Parcel על ידי הפעלת הדברים הבאים במסוף שלי בתוך תיקיית הפרויקט שלי:

אינדקס חבילות .html

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

שרת פועל בכתובת http: // localhost: 1234
√ בנוי 887ms.

כעת אוכל לפתוח http: // localhost: 1234 / בדפדפן שלי בכדי לראות את מה שבניתי עד כה. השרת החי משתמש בטעינה מחודשת ומשהו שנקרא החלפת מודול חם. זה יעודכן אוטומטית מודולים בעמוד מבלי לבצע רענון של עמוד מלא. בדרך זו אני יכול לראות את התקדמות הצטברותי במרווחים מהירים יותר בזמן שאני עובד.

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

אינדקס חבילות $.html
שרת פועל בכתובת http: // localhost: 1234
√ בנוי 1.08 שניות.
√ בנוי 28ms.

כל שורה “נבנה …” מייצגת בנייה אחת, המופעלת על ידי שינוי בתוכן ושמירה.

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

index.html שעון חבילות

אני מקבל אותה תוצאה במפגש המסוף שלי, כאשר Parcel.js בונה את האפליקציה שלי ואז ממתין לשינויים:

אינדקס שעון שעוני חבילה $ .html
√ בנוי 855ms.

התיקיה / dist

לאחר שהתחלתי את Parcel.js במצב צפייה או דרך השרת המובנה, אם אני מסתכל בתוך תיקיית הפרוייקט שלי, אני אראה תיקיה ומבנה קבצים כמו הבאים:

index.html
package.json
js /
└───── index.js
dist /
└───── index.html
└───── js.00a46daa.js
Ap js.00a46daa.js.map

שימו לב לתיקיה המרוחקת שנוצרת אוטומטית. כאן נמצאים קבצי הייצור שלי; אני לא נוגע באף אחד מהקבצים האלה. שימו לב כי בניית החבילות שלי המירה אוטומטית את קובץ ה- index.js לקובץ עם גרסה ייחודית למטמון (עם שם קובץ מתוקן או “revved”). זה נוסף גם קובץ מפת מקור (אתה יכול לקרוא על מפות המקור בפוסט הזה).

אם אני מסתכל בקובץ index.html שלי בתוך התיקיה המרוחקת, אראה את הדברים הבאים:

html>
<html>
<ראש>
<כותרת>פריטת חבילה>
ראש>
<גוף>

<סקריפט src ="/js.00a46daa.js">תסריט>
גוף>
html>

שימו לב לגירסה המרוחקת של קובץ ה- index.html שלי מצביע נכון ובנוחות לגירסה המרוחקת של קובץ ה- .js שלי.

אם האתר שלי כולל קבצים מרובים שמצביעים על אותם סקריפטים (לדוגמה, בערך .html, contact.html וכו ‘), אני יכול להשתמש בפקודה הבאה:

index.html חבילה בערך.html contact.html

זה אומר לחבילה שאני רוצה להשתמש במספר נקודות כניסה לבנות מהן. אני יכול להשתמש בפקודה הבאה כדי לומר ל- Parcel.js להשתמש בכל קבצי ה- HTML שלי כנקודות כניסה:

חבילה * .html

שימוש ב- Parcel.js עם Babel

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

אני הולך להוסיף את הקוד הבא לקובץ index.js שלי:

פונקציה getInfo (שם, שנה = 2018, צבע = ‘כחול’) {
console.log (שם, שנה, צבע);
}

getInfo (‘שברולט’, 1957, ‘ירוק’);
getInfo (‘בנץ’, 1975);
getInfo (‘הונדה’);

קוד זה משתמש בתכונה ES6 הנקראת פרמטרים של ברירת מחדל, שתוכלו לראות ספציפית בראש הפונקציה. דפדפנים ישנים אינם תומכים בפרמטרי ברירת מחדל לפונקציות. כדי לוודא שהקוד לא זורק שגיאה, אני זקוק לבבל כדי להעביר את הקוד לקוד שווה שעובד בכל הדפדפנים. לאחר ששמרתי את קובץ ה- index.js, Parcel.js יבנה מחדש את האפליקציה שלי וייצור את הדברים הבאים במקום קוד ES6 שכתבתי:

פונקציה getInfo (שם) {
שנה שנה = טיעונים. אורך > 1 && טיעונים [1]! == לא מוגדרים? טיעונים [1]: 2018;
צבע var = argumenter. אורך > 2 && טיעונים [2]! == לא מוגדרים? טיעונים [2]: ‘כחול’;
console.log (שם, שנה, צבע);
}

getInfo (‘שברולט’, 1957, ‘ירוק’);
getInfo (‘בנץ’, 1975);
getInfo (‘הונדה’);

אתה יכול להשתמש בתשובה המקוונת של Babel ל- בדוק את זה.

ושימו לב לגורם החשוב ביותר כאן: לא עשיתי שום דבר להתקנה או להגדרת תצורה של Babel – זה פשוט עובד מחוץ לתיבה כחלק מההגדרה המוגדרת כברירת מחדל של Parcel! כמובן, ייתכן שתרצה להוסיף כמה אפשרויות תצורה כדי לשנות את Babel כדי לעשות מה שאתה רוצה. אם זה המקרה, אתה יכול להוסיף קובץ .babelrc בתיקיית השורש של הפרוייקט שלך, וכלול העדפות התצורה שלך. אתה יכול לקרוא עוד על באמצעות קובץ .babelrc באתר Parcel.js.

שימוש ב- Parcel.js עם Sass

בדומה ל- Babel, חבילה תקבץ כברירת מחדל אוטומטית את קבצי ה- SCSS (Sass) שלי ל- CSS תקף. כדי להדגים זאת, אני הולך להוסיף תיקיה בשם “css” לשורש הפרויקט לדוגמה שלי. בתיקיה זו אוסיף קובץ style.scss עם קוד Sass הבא:

גוף {
צבע שחור;

.מודול {
צבע אדום;
}
}

אני משתמש בתכונת קינון הבורר של Sass. אוסיף את השורה הבאה לקטע של קבצי ה- HTML שלי:

<קישור rel ="גיליון סגנונות" href ="./css/style.scss">

לאחר שנשמר כל הקבצים שלי, Parcel תפיק מבנה חדש בתיקייה / התיקייה שלי עם קובץ CSS מורכב שהמיר את ה- SCSS שלי לדברים הבאים:

גוף {
צבע שחור;
}
גוף. מודול {
צבע אדום;
}

כל עוד התקנתי את Sass במערכת שלי ברחבי העולם, חבילה תעשה זאת באופן אוטומטי, ללא צורך בתצורה. אם אין לי התקנה עולמית של Sass, אין בעיה. אני יכול פשוט לכתוב את ה- SCSS שלי, ואז להפעיל את Parcel ו- Parcel יתקין את Sass באופן אוטומטי כתלות ספציפית לפרויקט. מאוד נוח! ושוב זה שימושי במיוחד מכיוון שהוא אינו דורש שום תצורה.

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

צרור סקריפטים מרובים באמצעות חבילה

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

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

כדי להדגים זאת, אני הולך להוסיף קובץ נפרד בשם module.js שיכיל את JavaScript הבא:

ייצוא תן צבע = ‘ירוק’;

הוסף פונקציית ייצוא (n1, n2) {
להחזיר n1 + n2;
}

זהו רק איזה קוד בסיסי לייצוא של שני אובייקטים: משתנה ופונקציה. בקובץ index.js שלי אני הולך לייבא את המשאבים האלה עם הקוד הבא:

ייבא {צבע, הוסף} מ- ‘../js/module.js’;

console.log (צבע); // "ירוק"
console.log (הוסף (20, 40)); // 60

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

<סקריפט src ="./js/index.js" סוג ="מודול">תסריט>

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

פיצול קוד עם Parcel.js

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

מוקדם יותר ציינתי שפרויקט הדוגמה שלי כולל שלושה עמודים: index.html, about.html ו- contact.html. נניח שאני רוצה להריץ את אותו צרור JavaScript בכל שלושת העמודים, אבל בדף about.html יש לי כפתור שמפעיל משהו ספציפי. אבל אני רוצה שהקוד יטען רק כשתלחץ על הכפתור.

כך נראה קוד זה באמצעות התכונה לפיצול קוד:

if (document.querySelector (‘. בערך’)) {
document.querySelector (‘. אודות’). addEventListener (‘לחץ’, () => {
ייבוא ​​(‘../ js / about.js’). ואז (
document.body.innerHTML + = ‘אודות דף מעודכן’;
);
});
}

שימו לב שזה משלב תכונה חדשה של JavaScript, יבוא דינמי באמצעות פונקציית הייבוא ​​(). זה מאפשר לי לטעון באופן דינמי את הקוד שאני רוצה במקרה ספציפי. במקרה זה, אני עושה את זה כאשר לוחצים על כפתור בדף אודות. תכונת הייבוא ​​() מחזירה הבטחה, כך שאוכל לעשות כל מה שבא לי בתוך סעיף ה- .then (), שמפעיל ברגע שטעינת הסקריפט המיובא. סקריפט ה- about.js נטען לפי דרישה וקוד זה יועבר על ידי Babel לדפדפן ES5 הדדית, על מנת להבטיח שהוא יעבוד בכל מקום. כשנוצר החבילה שלי, החלק בערך.js מכניס לקובץ משלו בתיקייה dist / בכדי לאפשר טעינת קובץ זה לפי דרישה..

כמו תכונות אחרות בהן דנתי, תכונת הייבוא ​​() עובדת ב- Parcel ללא כל תצורה.

הייצור בונה באמצעות Parcel.js

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

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

index.html חבילה לבניית אודות.html contact.html

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

כל החסרונות בשימוש בחבילה?

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

ראשית, תבחין כי חבילה ממקמת תמיד את הסקריפטים וגיליונות הסגנונות המצורפים שלך באותה ספרייה כמו קבצי HTML של נקודת הכניסה. זה קורה גם אם יש לך קבצי CSS ו- JavaScript בתיקיות נפרדות. מכיוון שמדובר בקבצי ייצור, זה אולי לא משנה הרבה. אבל זה משהו שכדאי לזכור. החדשות הטובות הן זו נראה שתוקן בגירסת החבילה הקרובה 2 (עדיין באלפא). לכן צריכה להיות דרך לעקוף את ההתנהגות הזו כאשר אותה גרסה של חבילה היא יציבה (גרסה יציבה נוכחית היא 1.12.4).

חיסרון נוסף הוא שמצאתי כי תיעוד החבילות הוא די מינימלי בכל מה שקשור למידע על התאמה אישית של אפשרויות התצורה של התכונות השונות. נכון שאחד היתרונות האדירים של חבילה הוא עד כמה זה עובד מחוץ לקופסה. אבל אני חושב שתיעוד נרחב יותר לגבי התאמה אישית של זה יהיה שימושי. לדוגמה, כיצד אוכל להשבית את צריכת ה- HTML ב- builds שלי, תוך שמירה על צריכת CSS ו- JavaScript? אני לא רואה תיאור של זה במסמכים. כשבחנתי את הגיליונות הסגורים ב- GitHub, יש דרך לעקיפת הבעיה (חשבתי שזה לא מאוד נוח).

סיכום

דבר אחרון שאציין הוא כלי שנקרא צור אפליקציה, בהן תוכלו להשתמש כדי לייצר אוטומטית קבצי תצורה עבור חבילה. זה מאפשר לך לבחור את ספריית ה- JavaScript, המוביל, המשקוף וכדומה, וכל אלה יתווספו לקובץ package.json שלך, מוכן לאתחל..

צור אפליקציה ב- Parcel.js

זהו זה של מדריך חבילות זה למתחילים. אני מקווה שתוכל להשתמש במידע זה כדי להתקדם במהירות עם Parcel ולהשתמש בו בפרויקטים עתידיים. ואם אתה חדש בצרור אפליקציות, או שמעולם לא ניסית אותו בפרויקט כלשהו, ​​אולי הקדמה זו תעודד אותך לנסות ל- Parcel.

אל תשכח להצטרף לקורס ההתרסקות שלנו בנושא זירוז אתר וורדפרס שלך. עם כמה תיקונים פשוטים, אתה יכול להפחית את זמן הטעינה שלך אפילו ב 50-80%:

מתווה ומצגת מאת קרול ק.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector