JavaScript meta framework Astro עודכן, ומתגאה במבחר תכונות חדשות.

AstroJS הוא כלי פנטסטי מבוסס JavaScript המשמש ליצירת אתרים סטטיים מהירים במיוחד. זה מאפשר לך ליצור אתרים באמצעות מסגרות JavaScript מרובות כמו React, Vue ו-Svelte. Astro 2.5 מביאה סט חדש לגמרי של תכונות שחלקן יסוקרו כאן.

1. אוספי נתונים

Astro 2.5 תומך כעת באחסון JSON ו-YAML באוספים. מאפיין הסוג החדש: 'נתונים' מאפשר פונקציונליות זו. כדי להדגים זאת, צור אוסף נתונים 'כותבים' בתיקיית src/content, שם JSON אוֹ YAML ניתן להוסיף קבצים.

לאחר מכן, הגדר את האוספים ב-src/content/config.ts באמצעות ה- defineCollection ו ז כלי עזר מ אסטרו: תוכן מודול והגדרת הסוג לנתונים.

יְבוּא { z, defineCollection } מ"astro: תוכן";
const writers = defineCollection({
סוּג: "נתונים",
סכֵימָה: ז.לְהִתְנַגֵד({ שֵׁם:ז.חוּט() }),
});

לבסוף, ייצא את אובייקט האוסף כדי לרשום את האוספים שלך.

יְצוּאconst אוספים = {סופרים:סופרים}

2. צמצום HTML

Astro 2.5 מציגה את אפשרות compressHTML המסירה את כל הרווחים הלבנים (ומעברי השורות) מה-HTML שלך. רכיבים נדחסים רק פעם אחת על ידי מהדר Astro ולאחר מכן במהלך הבנייה. זה נעשה כדי להפחית את עלויות הביצועים.

instagram viewer

הפעלת אפשרות זו בפרויקט שלך היא קלה. פשוט הוסף את השורות הבאות לקובץ התצורה שלך. הקטנת HTML פועלת רק עם רכיבים שנכתבו בפורמט קובץ .astro.

יְצוּאבְּרִירַת מֶחדָלdefineConfig({compressHTML:נָכוֹן})

3. עיבוד מקביל

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

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

Astro 2.5 מביא גם קבוצה חדשה לגמרי של תכונות ניסיוניות אשר נספרות להלן.

4. עיבוד היברידי

Astro 2.5 מאפשרת לך כעת להגדיר אפשרות פלט חדשה של שרת בקובץ התצורה שלך שתוקפת את התנהגות ברירת המחדל של העיבוד המוקדם של SSR.

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

פעולה זו תציג מראש את כל האתר שלך כברירת מחדל, אך תוכל לבטל את הסכמתך להתנהגות זו על ידי הגדרת ה עיבוד מראש ייצוא של כל נתיב או דף ל-false:

יְצוּאconst prerender = שֶׁקֶר;

5. הנחיות לקוח מותאמות אישית

Astro 2.5 מציגה את ה-addClientDirective API לבקרת הידרציה מותאמת אישית של רכיבים בצד הלקוח באמצעות התאמה אישית לָקוּחַ:* הנחיות.

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

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

יְבוּא { ClientDirective } מ"אסטרו";
const clickDirective: ClientDirective = (לטעון, בוחר, אל) => {
חַלוֹן.addEventListener(
"נְקִישָׁה",
אסינכרון () => {
const לחות = לְהַמתִין לִטעוֹן();
לְהַמתִין מֵימָה();
 },
 { פַּעַם: נכון }
 );
};
יְצוּאבְּרִירַת מֶחדָל clickDirective;

עַכשָׁיו לקוח: לחץ ניתן להשתמש ברכיבים שלך עם תמיכה מלאה.

כיצד להתקין את אסטרו

Astro מספק ממשק שורת פקודה (CLI) הנקרא ליצור אסטרו כדי להתחיל. אתה צריך NodeJS 16+ ו-npm מותקנים במחשב שלך.

npm ליצור אסטרו@הכי מאוחר

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

npm run dev

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

אם אתה לא אוהב NPM, אתה יכול לבחור באחר מנהלי חבילות JavaScript כמו Yarn ו-PNPM.

שיפור חוויית המפתחים עם Astro

All-in-one Frameworks כמו Astro הופכות את פיתוח אתרים מהיר לחלק ככל האפשר. זה פנטסטי, אופי אגנסטי של ממשק משתמש, אומר שאתה יכול לעבוד עם כל מסגרת JavaScript פופולרית לבחירתך בלי טרחה.