متا فریم ورک جاوا اسکریپت Astro به روز شده است و دارای مجموعه ای از ویژگی های جدید است.
AstroJS یک ابزار خارق العاده مبتنی بر جاوا اسکریپت است که برای ایجاد وب سایت های ایستا فوق سریع استفاده می شود. این به شما اجازه می دهد تا با استفاده از چندین چارچوب جاوا اسکریپت مانند React، Vue و Svelte وب سایت ایجاد کنید. Astro 2.5 مجموعه کاملا جدیدی از ویژگی ها را به ارمغان می آورد که برخی از آنها در اینجا پوشش داده می شوند.
1. مجموعه داده ها
Astro 2.5 اکنون از ذخیره سازی JSON و YAML در مجموعه ها پشتیبانی می کند. نوع جدید: ویژگی ‘data’ این قابلیت را فعال می کند. برای نشان دادن این موضوع، یک مجموعه داده «نویسندگان» در پوشه src/content ایجاد کنید، جایی که فایل‌های JSON یا YAML می‌توانند اضافه شوند.
سپس، مجموعه‌ها را در src/content/config.ts با استفاده از ابزار defineCollection و z از ماژول astro:content پیکربندی کنید و نوع را روی داده تنظیم کنید.
import { z, defineCollection } from "astro:content";
const writers = defineCollection({
type: "data",
schema: z.object({ name: z.string() }),
});
در نهایت، شی مجموعه را برای ثبت مجموعه های خود صادر کنید.
export const collections = {writers:writers}
2. کوچک سازی HTML
Astro 2.5 گزینه compressHTML را معرفی می کند که تمام فضاهای سفید (و خطوط شکسته) را از HTML شما حذف می کند. کامپوننت ها فقط یک بار توسط کامپایلر Astro و سپس در حین ساخت فشرده می شوند. این کار برای کاهش هزینه های عملکرد انجام می شود.
فعال کردن این گزینه در پروژه شما آسان است. فقط خطوط زیر را به فایل کانفیگ خود اضافه کنید. کوچک‌سازی HTML فقط با کامپوننت‌هایی که در قالب فایل .astro نوشته شده‌اند کار می‌کند.
export default defineConfig({compressHTML:true})
3. رندر موازی
رندر کردن اجزا به صورت موازی یکی از ویژگی های مورد انتظار Astro است. در مواردی که مؤلفه‌های فرزند در زیردرخت‌های مختلف داده‌ها را واکشی می‌کنند، Astro 2.5 زمان بارگذاری را با واکشی موازی داده‌ها بهبود می‌بخشد.
این اجازه می دهد تا یک مؤلفه در پایین تر درخت بدون مسدود شدن توسط مؤلفه واکشی داده بالاتر در درخت رندر شود. در حال حاضر، رندر موازی با قطعات ناهمزمان array.map به درستی کار نمی کند.
Astro 2.5 همچنین مجموعه جدیدی از ویژگی های آزمایشی را ارائه می دهد که در زیر پوشش داده شده است.
4. رندر ترکیبی
Astro 2.5 اکنون به شما امکان می دهد یک گزینه خروجی سرور جدید را در فایل پیکربندی خود تعریف کنید که رفتار پیش فرض پیش رندر SSR را لغو می کند.
برای استفاده از رندر ترکیبی، hybridOutput را در قسمت آزمایشی پیکربندی خود روی true تنظیم کنید و یک آداپتور اضافه کنید.
انجام این کار به طور پیش‌فرض کل سایت شما را از قبل رندر می‌کند، اما می‌توانید با تنظیم صادرات پیش‌اجرای هر مسیر یا صفحه روی false، از این رفتار انصراف دهید:
export const prerender = false;
5. دستورالعمل های مشتری سفارشی
Astro 2.5 API addClientDirective را برای کنترل هیدراتاسیون اجزای سفارشی در سمت مشتری با استفاده از دستورالعمل های مشتری سفارشی:* معرفی می کند.
برای استفاده از این ویژگی، Experimental.customClientDirectives را در فایل پیکربندی فعال کنید و نقاط ورودی دستورالعمل را حداقل نگه دارید تا از هرگونه تأثیر منفی بر هیدراتاسیون مؤلفه جلوگیری کنید.
تابعی از نوع ClientDirective باید از فایل راهنمای مشتری شما صادر شود. برای مثال، کد زیر با اولین کلیک روی پنجره، کامپوننت را هیدراته می کند.
import { ClientDirective } from "astro";
const clickDirective: ClientDirective = (load, opts, el) => {
window.addEventListener(
"click",
async () => {
const hydrate = await load();
await hydrate();
},
{ once: true }
);
};
export default clickDirective;
Now client:click می تواند در اجزای شما با پشتیبانی کامل از نوع استفاده شود.
نحوه نصب Astro
Astro یک رابط خط فرمان (CLI) به نام create astro را برای شروع شما فراهم می کند. باید NodeJS 16+ و npm را روی دستگاه خود نصب کنید.
npm create astro@latest
این یک پروژه جدید Astro را از ابتدا داربست خواهد کرد. دستورالعمل‌های روی صفحه را دنبال کنید تا موارد را تنظیم کنید (اگر مطمئن نیستید چه چیزی را انتخاب کنید، فقط گزینه‌های پیشنهادی را دنبال کنید). سپس سی دی را در پوشه پروژه وارد کنید و سپس اجرا کنید:
npm run dev
می توانید با استفاده از astro add فریم ورک هایی مانند React اضافه کنید. اگر همه چیز به درستی نصب شده باشد، می توانید localhost:3000 را روی دستگاه خود باز کنید و باید پیام “Welcome to Astro” را مشاهده کنید.
اگر NPM را دوست ندارید، می توانید سایر مدیران بسته جاوا اسکریپت مانند Yarn و PNPM را انتخاب کنید.
افزایش تجربه توسعه دهندگان با Astro
فریمورک های همه کاره مانند Astro توسعه وب سایت های سریع را تا حد امکان روان می کند. این فوق‌العاده است و طبیعت UI-Agnostic به این معنی است که شما می‌توانید با هر چارچوب محبوب جاوا اسکریپت دلخواه خود بدون هیچ زحمتی کار کنید.