معرفی SvelteKit 1.0: چارچوب کامل پشته برای Svelte

SvelteKit 1.0 اینجا است و دارای ویژگی هایی برای توسعه دهندگان full stack است. در اینجا یک تور سریع از چارچوب جاوا اسکریپت جدید و درخشان Svelte آورده شده است.

• طرح کلی SvelteKit 1.0
• عملکرد بارگیری جهانی با +page.js
• کنش‌های سمت سرور بارگیری و فرم با +page.server.js
• API سرور با +server.js
• پیوند
• تایپ قوی با TypeScript یا JSDoc
• استقرار با آداپتورها
• پیش ارائه محتوای ثابت
• ایجاد یک برنامه
• نتیجه‌گیری

همانطور که اخیراً اعلام شد، SvelteKit پس از یک بتا طولانی، به نقطه عطف مورد انتظار ۱.۰ خود رسیده است. SvelteKit 1.0 یک چارچوب کاربردی کاملاً تحقق یافته برای ساخت برنامه های جاوا اسکریپت تمام پشته با قسمت های جلویی Svelte به ارمغان می آورد. بیایید نگاهی بیندازیم.

طرح کلی SvelteKit 1.0

Svelte یک چارچوب واکنش‌گرای جلویی است که در سطح بالایی با React یا Vue قابل مقایسه است، اما با زاویه خاص خود روی چیزها. SvelteKit یک چارچوب برنامه کامل پشته برای Svelte است، در امتداد خطوط Next یا Nuxt، اما دوباره با قراردادهای خاص خود.

ماهیت یک چارچوب برنامه فول استک این است که باید بتواند قسمت جلویی و پشتی برنامه شما را زیر یک چتر واحد متحد کند. یک چارچوب تمام پشته باید به این سؤالات پاسخ دهد:

• نشانی‌های اینترنتی چگونه به صفحات جلویی و نقاط انتهایی انتهایی نگاشت می‌شوند؟
• مسیرهای back-end چگونه توسط front end قابل دسترسی هستند؟
• صفحات جلویی و نقاط انتهایی انتهایی چگونه تعریف می‌شوند؟

در قلب هر چارچوب برنامه کاربردی، موتور مسیریابی قرار دارد که کدی را که صفحات را تولید می کند به URL های موجود در مرورگر مرتبط می کند. اکثر چارچوب های جاوا اسکریپت مانند SvelteKit در طرح بندی کلی که Next.js استفاده می کند، جا افتاده اند، که در آن فایل ها و دایرکتوری ها به مسیر URL نگاشت می شوند.

دایرکتوری ریشه SvelteKit /src/routes است (به طور پیش فرض). بنابراین /src/routes با URL ریشه، به عنوان مثال localhost:5173/ در مرورگر مطابقت دارد. دایرکتوری های فرعی به مسیر URL نگاشت می شوند، بنابراین /src/routes/foo/bar به localhost:5173/foo/bar تبدیل می شود.

چندین قرارداد فایل در دایرکتوری ها صفحات و نقاط پایانی را تعریف می کنند. این نوع فایل ها با علامت مثبت (+) شروع می شوند که نشان می دهد اهمیت ویژه ای برای چارچوب دارند. (همه فایل های دیگر نادیده گرفته می شوند، بنابراین می توانید فایل های کمکی را در همان فهرست ها قرار دهید.)

هر صفحه یک جزء Svelte است که در فایل +page.svelte تعریف شده است. فایلی در /src/routes/foo/bar/+page.svelte به صفحه وب در localhost:5173/foo/bar تبدیل می‌شود که توسط مؤلفه Svelte ایجاد شده در آن فایل (با ارائه صفحه پیش‌فرض در مسیر، این فایل در نقشی مشابه index.jsx در چارچوب‌های دیگر عمل می‌کند.) به عبارت دیگر، +page.svelte فقط یک مؤلفه استاندارد Svelte که به دنبال نمونه Svelte معمولی است.

اگرچه +page.svelte فقط یک جزء جلویی Svelte است، اما می‌تواند برای انجام کار خود به فایل‌های ویژه دیگری تکیه کند. SvelteKit همچنین دارای برخی بهینه سازی های مفید در آستین خود است. به‌طور پیش‌فرض، SvelteKit در سمت سرور +page.svelte را ارائه می‌کند. برای کنترل این فرآیند از فایل خواهر و برادر +page.js (با پسوند .js) استفاده می کند. دو جزء +page.svelte و +page.js با هم کار می کنند تا رفتار صفحه را در پشته کامل تعریف کنند.

عملکرد بارگیری جهانی با +page.js

مؤلفه +page.js به ما اجازه می‌دهد تا یک تابع بارگذاری را تعریف کنیم که می‌تواند کارهای اولیه‌ای را که مؤلفه صفحه به آن نیاز دارد، انجام دهد، و همچنین کنترل نحوه برخورد چارچوب با صفحه با توجه به ارائه رفتار این جزء از سه صادرات const پشتیبانی می کند:

• export const prerender صفحه را از قبل اجرا می‌کند.
• export const ssr در سمت سرور صفحه را رندر می‌کند.
• صادرات const csr در سمت مشتری صفحه را رندر می‌کند.

می‌توانید از اسناد SvelteKit درباره رندر صفحه با این گزینه‌ها بیشتر بیاموزید. در اینجا، ما بر روی تابع بار صادر شده توسط +page.js تمرکز خواهیم کرد. به طور پیش فرض، در کنار +page.svelte هم در سرور و هم در کلاینت اجرا می شود. تابع بار با مولفه Svelte با یک متغیر داده ارتباط برقرار می کند. هر آنچه که تابع صادرات +page.js برمی‌گرداند، روی متغیر export let data در +page.svelte تنظیم می‌شود.

کنش‌های سمت سرور بارگیری و فرم با +page.server.js

از آنجایی که تابع بارگذاری +page.js هم در کلاینت و هم در سرور اجرا می‌شود، باید دارای عملکردی باشد که هم در محیط مرورگر و هم در محیط‌های بک‌اند کار کند. وقتی به تابعی نیاز دارید که به تنهایی روی سرور اجرا شود، می‌توانید از +page.server.js استفاده کنید. تابع بار در آنجا به تنهایی در قسمت پشتی اجرا می شود. هنگامی که رندر سمت سرور (SSR) تحت کنترل است، داده ها را می توان در رندر ادغام کرد. زمانی که رندر سمت کلاینت فعال است، کد روی سرور اجرا می شود و سریال سازی و ارسال می شود. (به مستندات SvelteKit مراجعه کنید تا درباره انتخاب بین “جهانی” بیشتر بدانید تابع بارگذاری و یک تابع بارگذاری فقط در سمت سرور.)

علاوه بر load، +page.server.js می تواند یک تابع عملکردها را برای داده‌های فرم را مدیریت کنید. (این شبیه به روشی است که Remix فرم می دهد و به فرم ها اجازه می دهد زمانی که جاوا اسکریپت در دسترس نیست کار کنند.)

پارامترهای مسیر

اگر به یک پارامتر URL (معروف “Slug”) نیاز دارید، می‌توانید آن را در پرانتز قرار دهید. برای مثال، /src/routes/foo/bar/[id] یک متغیر id را در معرض +page.js (یا < code>+page.server.js) به عنوان بخشی از آرگومان پارامتر تابع load: صادر کردن بار تابع همگام ({ fetch }) { param.id }.

API سرور با +server.js

همچنین می‌توانید با +server.js مسیرهای فقط سرور برای مدیریت نقاط پایانی API تعریف کنید. این تابع متدهای آشنای REST مانند GET، PUT و غیره را مدیریت می کند. هر یک از اینها با صادرات تابعی که با متد مطابقت دارد مدیریت می شود. برای مثال، عملکرد صادراتی GET({ url }) روش GET را که به آن فایل می رسد مدیریت می کند. بنابراین یک تابع /src/routes/foo/bar/+server.js GET به درخواست GET localhost:5173/foo/bar پاسخ می‌دهد.

در حالی که ما آنها را در اینجا پوشش نمی دهیم، چند صفحه ویژه دیگر وجود دارد که باید در مورد آنها بدانید:

• +error.svelte یک صفحه خطا را تعریف می کند. (در مورد خطاها اینجا بیشتر بیاموزید.)
• +layout.svelte یک جزء طرح بندی جلویی (مشابه +page.svelte) را تعریف می کند.
• +layout.js یک مؤلفه طرح بندی تابع load را تعریف می کند (مشابه +page.js).
• +layout.server.js یک طرح‌بندی سمت سرور را تعریف می‌کند (مشابه با +page.js).

توجه داشته باشید که طرح‌بندی‌ها از چیدمان‌های سلسله مراتبی پشتیبانی می‌کنند و می‌توانید تنظیم دقیق رفتار آنها.

پیوند

پیوندها به جای یک جزء خاص، پیوندهای ساده هستند. SvelteKit پیوندهای موجود در برنامه را بررسی می کند و اگر آنها به یک صفحه در خود برنامه (به جای یک پیوند خارجی) مراجعه کنند، ناوبری SvelteKit کار را به دست می گیرد. SvelteKit به دستورالعمل‌های استاندارد وب مانند واکشی اولیه روی پیوندها احترام می‌گذارد.

تایپ قوی با TypeScript یا JSDoc

مناطق اتصال بین لایه‌های برنامه، جایی که انتهای جلو و پشت با هم ارتباط برقرار می‌کنند، از تایپ قوی از طریق TypeScript یا JSDoc پشتیبانی می‌کنند @typedef یادداشت‌ها در جاوا اسکریپت. به عنوان مثال، اگر از جاوا اسکریپت استفاده می‌کردید، تابع load() با حاشیه‌نویسی مانند /** @type {import('./$types').PageLoad} تزئین می‌شود. */. SvelteKit از این دستورالعمل برای اطمینان از ایمنی نوع استفاده می کند. همچنین اطمینان حاصل می‌کند که نوع شی وارد شده به شی داده‌ای فایل +page.svelte یک PageData کلاس طبق تعریف /** @type {import('./$types').PageData} */.

به طور مشابه، برای +page.server.js، توابع بارگیری با /** @type {import('./$types').PageServerLoad} */ تزئین شده اند. کد>. همه این انواع به طور خودکار توسط SvelteKit برای استفاده در برنامه های خود تولید می شوند.

? Which Svelte app template? › - Use arrow-keys. Return to submit.
❯   SvelteKit demo app
    A demo app showcasing some of the features of SvelteKit - play a word guessing game that works without JavaScript!
    Skeleton project
    Library skeleton project

? Add type checking with TypeScript? › - Use arrow-keys. Return to submit.
❯   Yes, using JavaScript with JSDoc comments
    Yes, using TypeScript syntax
    No