نحوه ساخت و تست یک وبلاگ با Svelte و SvelteKit

اگر به دنبال روشی مدرن برای ساختن وبلاگ هستید، Svelte و SvelteKit گزینه های عالی هستند. Svelte یک چارچوب سبک وزن و واکنشی است که کد شما را در جاوا اسکریپت وانیلی بسیار بهینه سازی شده کامپایل می کند. SvelteKit چارچوبی برای ساخت برنامه های تحت وب است که بر روی Svelte ساخته می شود و رندر سمت سرور، مسیریابی و سایر ویژگی ها را ارائه می دهد.

در این آموزش، ما به شما نشان خواهیم داد که چگونه با SvelteKit یک وبلاگ ساده بسازید، و چگونه با استفاده از jest و svelte-jester برای آن تست واحد بنویسید. در پایان آموزش، شما یک وبلاگ کاملاً کاربردی خواهید داشت که آماده استقرار است و ابزارهایی برای آزمایش آن و اطمینان از کیفیت آن در اختیار خواهید داشت.

ساخت وبلاگ

ایجاد یک پروژه جدید SvelteKit
برای شروع، باید یک پروژه SvelteKit جدید ایجاد کنید. ساده ترین راه برای انجام این کار استفاده از degit است که ابزاری برای شبیه سازی مخازن است.

یک ترمینال را باز کنید و دستور زیر را اجرا کنید:

npx degit
sveltejs/sveltekit
my-blog

با این کار یک دایرکتوری جدید به نام my-blog ایجاد می شود و الگوی شروع SvelteKit در آن کلون می شود.

ایجاد صفحات و مسیرهای اساسی
در مرحله بعد، صفحات و مسیرهای اصلی وبلاگ را ایجاد می کنیم. در SvelteKit، صفحات به صورت فایل های .svelte در دایرکتوری src/routes ایجاد می شوند.

بیایید با ایجاد صفحه اصلی شروع کنیم. یک فایل جدید به نام index.svelte در دایرکتوری src/routes ایجاد کنید و کد زیر را اضافه کنید:

<script>
  export let posts = [];
</script>

<h1>Welcome to my blog!</h1>

{#if posts.length}
  <ul>
    {#each posts as post}
      <li>
        <a href={`blog/${post.id}`}>
          {post.title}
        </a>
      </li>
    {/each}
  </ul>
{:else}
  <p>No posts yet.</p>
{/if}

این کد یک جزء Svelte را تعریف می کند که لیستی از پست های وبلاگ را نمایش می دهد. خط صادرات let posts خصوصیتی را تعریف می‌کند که می‌تواند از یک جزء والد یا از تعریف مسیر به کامپوننت ارسال شود.

در مرحله بعد، بیایید یک تعریف مسیر برای صفحه اصلی ایجاد کنیم. یک فایل جدید به نام index.json.js در دایرکتوری src/routes ایجاد کنید و کد زیر را اضافه کنید:

import posts from './_posts.js';

export async function get() {
  return {
    body: {
      posts
    }
  };
}

این کد مسیری را تعریف می کند که یک شی JSON حاوی لیست پست های وبلاگ را برمی گرداند. آرایه پست ها از فایلی به نام _posts.js وارد می شود که در ادامه آن را ایجاد می کنیم.

حالا بیایید فایل _posts.js را ایجاد کنیم. یک فایل جدید به نام _posts.js در پوشه src/routes ایجاد کنید و کد زیر را اضافه کنید:

export default [
  {
    id: '1',
    title: 'My First Blog Post',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
  },
  {
    id: '2',
    title: 'My Second Blog Post',
    content: 'Vivamus euismod metus sit amet arcu consectetur, vel ultricies dolor fringilla.'
  }
];

این کد آرایه ای از دو شیء پست وبلاگ را تعریف می کند. هر شی یک شناسه، یک عنوان و یک ویژگی محتوا دارد.

اکنون یک صفحه اصلی اصلی داریم که لیستی از پست های وبلاگ را نمایش می دهد. بیایید چند صفحه دیگر برای وبلاگ ایجاد کنیم

ایجاد صفحات پست وبلاگ فردی

در مرحله بعد، ما صفحات جداگانه ای برای هر پست وبلاگ ایجاد می کنیم. یک فایل جدید به نام ایجاد کنید [_id]در پوشه src/routes .svelte کنید و کد زیر را اضافه کنید:

<script>
  export let post = {};
</script>

<h1>{post.title}</h1>

<p>{post.content}</p>

این کد یک جزء Svelte را تعریف می کند که یک پست وبلاگ را نمایش می دهد. خط صادرات let post یک خاصیت را تعریف می کند که می تواند از یک جزء والد یا از تعریف مسیر به کامپوننت ارسال شود.

در مرحله بعد، بیایید یک تعریف مسیر برای صفحات پست وبلاگ جداگانه ایجاد کنیم. یک فایل جدید به نام ایجاد کنید [_id]json.js را در دایرکتوری src/routes قرار دهید و کد زیر را اضافه کنید:

import posts from './_posts.js';

export async function get({ params }) {
  const post = posts.find(p => p.id === params.id);
  if (post) {
    return {
      body: {
        post
      }
    };
  } else {
    return {
      status: 404
    };
  }
}

این کد یک مسیر پویا را تعریف می کند که پارامتر id را از URL می گیرد. سپس یک شی پست وبلاگ را با آن شناسه در آرایه پست ها جستجو می کند و آن را به عنوان یک شی JSON برمی گرداند. اگر شناسه با هیچ پست وبلاگ مطابقت نداشته باشد، وضعیت 404 را برمی‌گرداند.

سبک دادن به وبلاگ
اکنون که صفحات و مسیرهای اصلی را تنظیم کرده ایم، بیایید چند سبک به وبلاگ اضافه کنیم. SvelteKit با پشتیبانی از ماژول های CSS خارج از جعبه ارائه می شود، بنابراین ما از آن برای استایل دادن به اجزای خود استفاده خواهیم کرد.

یک فایل جدید به نام global.css در دایرکتوری src ایجاد کنید و کد زیر را اضافه کنید:

h1 {
  font-size: 2.5rem;
  margin: 2rem 0;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 1rem 0;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

این کد برخی از سبک های اساسی را برای وبلاگ تعریف می کند، مانند اندازه فونت، حاشیه و تزئین متن.

بعد، ما این فایل CSS را به اجزای Svelte خود وارد می کنیم. در هر فایل .svelte، خط زیر را در بالا اضافه کنید:

<style global>
  @import './global.css';
</style>

این کد فایل global.css را به استایل های مؤلفه وارد می کند.

ساخت و تست وبلاگ

اکنون که وبلاگ خود را ساخته ایم، بیایید آن را بسازیم و آزمایش کنیم. برای ساخت وبلاگ، دستور زیر را در ترمینال اجرا کنید:

npm run build

این کد Svelte را کامپایل می کند و یک ساخت آماده تولید در فهرست ساخت ایجاد می کند.

برای آزمایش وبلاگ، از شوخی و شوخی استفاده می کنیم. jest یک فریمورک تست محبوب جاوا اسکریپت است و svelte-jester افزونه ای است که به ما امکان می دهد تست های واحد را برای اجزای Svelte بنویسیم.

ابتدا بیایید وابستگی ها را نصب کنیم. دستور زیر را در ترمینال اجرا کنید:

npm install --save-dev jest svelte-jester

سپس یک فایل جدید به نام example.test.js در پوشه src ایجاد کنید و کد زیر را اضافه کنید:

import { render } from '@testing-library/svelte';
import Example from './Example.svelte';

test('renders the text "Hello, world!"', () => {
  const { getByText } = render(Example);
  expect(getByText('Hello, world!')).toBeInTheDocument();
});

این کد یک تست واحد برای یک جزء Svelte به نام Example تعریف می کند. از تابع render از @testing-library/svelte برای رندر کردن کامپوننت و تابع getByText برای یافتن عنصری با متن “Hello, world!” استفاده می کند. تابع expect بررسی می کند که عنصر در سند باشد.

با اجرای دستور زیر در ترمینال می توانید تست ها را اجرا کنید:

npm run test

با این کار تمام تست های موجود در دایرکتوری src اجرا می شود.

در این آموزش، نحوه ساخت وبلاگ با استفاده از Svelte و SvelteKit را دیدیم. ما یک صفحه اصلی ایجاد کرده‌ایم که فهرستی از پست‌های وبلاگ، صفحات مجزا برای هر پست وبلاگ را نمایش می‌دهد و برخی سبک‌های اساسی را به وبلاگ اضافه می‌کند. ما همچنین یاد گرفتیم که چگونه اجزای Svelte خود را با استفاده از jest و svelte-jester آزمایش کنیم.

Svelte و SvelteKit یک راه قدرتمند و ساده برای ساخت برنامه های کاربردی وب ارائه می دهند و اندازه و عملکرد کوچک آنها آنها را برای توسعه وب مدرن ایده آل می کند.