Skip to content

Latest commit

 

History

History
90 lines (65 loc) · 7.98 KB

30-project-structure.md

File metadata and controls

90 lines (65 loc) · 7.98 KB
Raw

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

Типичный проект SvelteKit выглядит следующим образом:

my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [ваши lib-файлы, предназначенные только для сервера]
│ │ └ [ваши lib-файлы]
│ ├ params/
│ │ └ [ваши сопоставители параметров (param matchers)]
│ ├ routes/
│ │ └ [ваши маршруты]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ └ hooks.server.js
├ static/
│ └ [ваши статические ресурсы]
├ tests/
│ └ [ваши тесты]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

Вы также найдете обычные файлы, такие как .gitignore и .npmrc (и .prettierrc и .eslintrc.cjs и так далее, если вы выбрали эти опции при запуске npm create svelte@latest).

Файлы проекта

src

В директории src находится "мясо" вашего проекта. Все, кроме src/routes и src/app.html, является необязательным.

  • lib содержит ваш библиотечный код (утилиты и компоненты), который может быть импортирован через псевдоним $lib или упакован для распространения с помощью svelte-package
    • server содержит код вашей библиотеки, предназначенной только для сервера. Его можно импортировать с помощью $lib/server псевдонима. SvelteKit не позволит вам импортировать их в клиентский код
  • params содержит любые сопоставители параметров необходимые вашему приложению
  • routes содержит маршруты вашего приложения. Вы также можете разместить здесь другие компоненты, которые используются только в рамках одного маршрута
  • 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], которая должна начинаться с publicPrefix (обычно PUBLIC_). В случае несовпадения он возвращается к ''.
  • error.html эта страница, которая отображается, когда все остальное не работает. Она может содержать следующие заполнители:
    • %sveltekit.status% — HTTP статус
    • %sveltekit.error.message% — сообщение об ошибке
  • hooks.client.js содержит ваши клиентские хуки
  • hooks.server.js содержит ваши серверные хуки
  • service-worker.js содержит ваш сервис-воркер

Вы можете использовать файлы .ts вместо файлов .js, если используете TypeScript.

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

static

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

tests

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

package.json

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

Когда вы создаете проект с помощью npm create svelte@latest, вы также заметите, что package.json включает "type": "module". Это означает, что файлы .js интерпретируются как собственные модули JavaScript с ключевыми словами import и export. Файлы Legacy CommonJS имеют расширение .cjs.

svelte.config.js

Этот файл содержит ваши Svelte и SvelteKit конфигурации.

tsconfig.json

Этот файл (или jsconfig.json, если вы предпочитаете файлы .js с проверкой типов, а не файлы .ts) настраивает TypeScript, если вы добавили проверку типов во время npm create svelte@latest. Поскольку SvelteKit полагается на то, что определенная конфигурация будет задана определенным образом, он генерирует свой собственный файл .svelte-kit/tsconfig.json, который ваша собственная конфигурация расширяет extends.

vite.config.js

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

Другие файлы

.svelte-kit

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