Структура проекта

Обычный проект на SvelteKit имеет следующую структуру:

• Директорияmy-project/

  • Директорияsrc/ # Исходный код приложения

    • Директорияlib/ # Вспомогательные модули

      • Директорияserver/ # Серверные библиотеки (только для backend)

        • … [ваши серверные модули]
      • … [ваши общие модули] # Доступны через #lib
    • Директорияroutes/ # Маршруты приложения

      • … [ваши маршруты] # Файловая система = структура URL
    • app.html # Основной HTML-шаблон
    • error.html # Шаблон для ошибок
    • hooks.client.js # Клиентские хуки
    • hooks.server.js # Серверные хуки
    • service-worker.js # Сервис-воркер (PWA)
    • instrumentation.server.js # Метрики, логи и прочая телеметрия
    • params.js # Параметры маршрутов
    • Директорияstatic/ # Статические ресурсы

      • … [ваши ресурсы] # Изображения, шрифты и т. д.
    • Директорияtests/ # Тесты

      • … [ваши тесты] # Тесты Unit/e2e
    • package.json # Зависимости и скрипты
    • tsconfig.json # Настройки TypeScript
    • vite.config.js # Конфигурация Vite

Вы также найдете такие распространенные файлы, как .gitignore и .npmrc (а также .prettierrc и eslint.config.js и так далее, если вы выбрали эти параметры при запуске npx sv create).

Детализация структуры

Директория src

Содержит основную логику приложения. Обязательные элементы — только routes/ и app.html.

• lib содержит код вашей библиотеки (утилиты и компоненты), который можно импортировать через псевдоним #lib или упаковать для распространения с помощью svelte-package.
  • директории с именем server на любом уровне вложенности помечают весь содержащийся в них код как доступный только на сервере. SvelteKit не позволит импортировать такой код в клиентский код.
• routes содержит маршруты вашего приложения. Также здесь можно размещать компоненты, используемые только внутри одного маршрута.
• service-worker.js содержит ваш service worker.
• app.html — это шаблон страницы — HTML-документ, содержащий следующие плейсхолдеры:
  • %sveltekit.head% — элементы <link> и <script>, необходимые для работы приложения, а также содержимое <svelte:head>.
  • %sveltekit.body% — разметка отрендеренной страницы. Она должна располагаться внутри <div> или другого контейнера, а не напрямую в <body>, чтобы избежать ошибок, вызванных расширениями браузера, которые могут внедрять элементы, уничтожаемые при гидратации. SvelteKit предупредит об этом в режиме разработки.
  • %sveltekit.assets% — либо путь, указанный в paths.assets, либо относительный путь к paths.base.
  • %sveltekit.nonce% — CSP nonce для вручную добавленных ссылок и скриптов, если используется.
  • %sveltekit.env.[NAME]% — во время рендеринга это будет заменено переменной окружения [NAME], которая должна быть определена как публичная переменная в src/env. Если соответствующая переменная не найдена, будет использовано значение ''.
• error.html — страница, отображаемая при фатальной ошибке. Может содержать следующие плейсхолдеры:
  • %sveltekit.status% — HTTP-статус.
  • %sveltekit.error.message% — сообщение об ошибке.
• hooks.client.js содержит клиентские хуки.
• hooks.server.js содержит серверные хуки.
• params.js содержит все сопоставители параметров, которые нужны вашему приложению

(Наличие файлов с расширениями .js или .ts зависит от того, выбрали ли вы TypeScript при создании проекта.)

Если при создании проекта вы добавили Vitest, ваши модульные тесты будут располагаться в директории src с расширением .test.js.

Директория static

Любые статические ресурсы, которые должны обслуживаться как есть (например, robots.txt или favicon.png), размещаются здесь.

Директория tests

Если вы добавили Playwright для браузерного тестирования при создании проекта, тесты будут располагаться в этой директории.

package.json

Ваш файл package.json должен включать @sveltejs/kit, svelte и vite в devDependencies.

При создании проекта с помощью npx sv create вы также увидите, что в package.json указано "type": "module". Это означает, что .js файлы интерпретируются как нативные модули JavaScript с использованием ключевых слов import и export. Старые CommonJS-файлы должны иметь расширение .cjs.

vite.config.js

Проект SvelteKit на самом деле является обычным проектом на Vite, который использует плагин @sveltejs/kit/vite, а также любую другую конфигурацию Vite.

tsconfig.json

Этот файл (или jsconfig.json, если вы предпочитаете проверку типов для файлов .js, а не .ts) настраивает TypeScript, если при выполнении npx sv create вы добавили проверку типов. Поскольку SvelteKit требует, чтобы определённые параметры конфигурации были настроены определённым образом, он генерирует модуль конфигурации TypeScript, который расширяет ваша собственная конфигурация extends.

Прочие файлы

.svelte-kit

Во время разработки и сборки проекта SvelteKit будет генерировать файлы в директории .svelte-kit (можно изменить через outDir). Содержимое этой директории можно игнорировать и удалять в любой момент — при следующем запуске dev или build всё будет сгенерировано заново.