Приступаем к созданию приложения Svelte с помощью SvelteKit

Svelte — это легкий фреймворк для создания веб-приложений. Когда вы используете его, он выглядит и работает так же, как другие интерфейсные фреймворки, такие как React и Vue, но оставляет позади виртуальный DOM. Это, наряду с другими оптимизациями, означает, что он гораздо меньше работает в браузере, оптимизируя взаимодействие с пользователем и время загрузки.

В этом руководстве мы рассмотрим, как настроить ваше первое приложение Svelte с помощью SvelteKit. В Svelte есть несколько различных способов создания приложений, и SvelteKit является одним из официальных пакетов Svelte для этого. Если вас интересуют другие фреймворки, вам может понравиться аналогичное руководство по [созданию вашего первого приложения Vue] (https://fjolt.com/article/vue-create-your-first-app).

Создание вашего первого приложения Svelte

Чтобы начать, откройте новое окно терминала и запустите приложение svelte с помощью приведенной ниже команды. Обратите внимание, что если у вас не установлен npm, вам нужно его установить. Вы можете установить npm, установив Node.JS, по ссылке здесь.

После установки Node.JS и NPM выполните приведенную ниже команду. Прежде чем вы это сделаете, убедитесь, что вы используете cd, чтобы перейти в папку, в которой вы хотите создать новое приложение Svelte.

npm init svelte@next мое-svelte-приложение

Когда вы запустите эту команду, вы автоматически сгенерируете шаблон Svelte в папке с именем my-svelte-app. Svelte проведет вас через несколько вариантов. Выберите свои предпочтения. На изображении ниже показан тот, который я выбрал. Для целей этого руководства я буду использовать проект Skeleton.

Наконец, выполните следующую команду, чтобы перейти в каталог svelte:

cd мое-svelte-приложение

Затем установите все ваши зависимости, используя следующую строку:

нпм я

Структура файла Svelte

Если вы знакомы с другими фреймворками, то Svelte покажется вам знакомым. Вот обзор файловой структуры в Svelte для проекта, который мы только что сделали:

static <-- где мы храним все наши общедоступные активы, такие как значки, изображения и шрифты.

|- favicon.png <-- наш значок

тесты <-- папка для хранения наших тестов

|- test.js <-- пример теста с использованием @playwright

src <-- наши основные файлы приложения Svelte

|- route <-- папка для хранения всех наших маршрутов в

|-- index.svelte <-- наш файл индексного маршрута. Это будет файл, отображаемый на маршруте сайта

|- app.d.ts <-- наш основной файл приложения Svelte

|- app.html <-- наш основной индексный файл, в котором будет отображаться приложение

.gitignore <-- файлы, которые мы хотим игнорировать для git

.npmrc <-- файл конфигурации для npm

.prettierrc <-- файл конфигурации для более красивого

.eslintrc.cjs <-- файл конфигурации для eslint

package.json <- наши установленные пакеты NPM

playwright.config.js <-- файл конфигурации для драматурга

svelte.config.js <-- файл конфигурации для самого svelte

tsconfig.json <-- файл конфигурации для машинописного текста

Наше базовое приложение Svelte готово к работе. Если вы хотите посмотреть, как это выглядит, вы можете использовать его на своем локальном компьютере по URL-адресу http://localhost:3000, выполнив следующую команду в папке приложения Svelte:

нпм запустить разработчик

Если вы посетите http://localhost:3000 в своем браузере, вы должны увидеть что-то вроде этого:

Создание новых страниц или маршрутов в Svelte

Чтобы создать новый маршрут в Sveltekit, просто создайте новый файл в папке маршрутов. Например, если вы создадите файл с именем about.svelte, он будет отображаться по адресу http://localhost:3000/about. Другой способ сделать это — создать новую папку с именем about и поместить в нее index.svelte, http://localhost:3000/about будет работать.

Попробуй сам

Создайте новую страницу в папке /src/routes с именем about.svelte. Теперь, когда вы перейдете на http://localhost:3000/, вы сможете получить доступ к этой странице. Точно так же вы можете попробовать создать папку с именем about с файлом, расположенным внутри, с именем index.svelte.

Как запустить приложение SvelteKit на Node.JS

Чтобы запустить приложение Svelte на сервере или локально на сервере Node.JS, вам необходимо использовать адаптер. Если вы хотите запустить приложение Svelte на Node Server, установите @sveltejs/adapter-node@next с помощью следующей строки:

npm i @sveltejs/adapter-node@next

Теперь нам нужно изменить наш файл svelte.config.js. Нам нужно использовать новый адаптер и изменить наш объект kit.adapter в файле конфигурации. Вы можете заменить содержимое вашего svelte.config.js кодом ниже, но мы изменим только две строки – импорт нашего адаптера, а затем добавим каталог сборки в вашу конфигурацию:

```javascript

// Мы изменили строку адаптера, чтобы использовать adapter-node@next

импортировать адаптер из '@sveltejs/adapter-node@next';

импортировать препроцесс из 'svelte-preprocess';

/* @type {import('@sveltejs/kit').Config} /

константная конфигурация = {

// Обратитесь к https://github.com/sveltejs/svelte-preprocess

// для получения дополнительной информации о препроцессорах

предварительная обработка: предварительная обработка(),

Комплект: {

// Мы изменили это, чтобы указать на каталог сборки

адаптер: адаптер({выход: 'сборка'})

экспорт конфигурации по умолчанию;

Другие адаптеры SvelteKit

Если вы хотите запустить свое приложение Svelte на Cloudflare, Netlify или Vercel, вам нужно использовать один из этих адаптеров, вам не нужно ничего делать. Все они по умолчанию включены в adapter-auto, поэтому изменяйте файл svelte.config.js только в том случае, если вы не планируете использовать сервер Node.JS.

Как создать приложение SvelteKit для производства

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

npm запустить сборку

Теперь, если вы хотите предварительно просмотреть производственную сборку, просто выполните следующую команду:

Предварительный просмотр запуска npm

Если вы запускаете приложение на сервере Node.JS и обновили свой адаптер, как показано в предыдущем разделе, вы можете запустить новое приложение Svelte локально, выполнив следующую команду в каталоге Svelte:

сборка узла/index.js

Теперь, когда вы переходите к http://localhost:3000/, ваше приложение Svelte должно отображаться, только на этот раз оно будет готово к работе.

Вывод

В этом руководстве мы рассмотрели, как использовать SvelteKit для создания вашего первого приложения Svelte с маршрутами. Давайте посмотрим, что мы узнали:

1. Как настроить SvelteKit и создать базовую структуру вашего приложения Svelte.

1. Как использовать маршруты в SvelteKit, чтобы в вашем приложении было несколько страниц.

1. Как обновить файл конфигурации, чтобы использовать правильный адаптер в зависимости от того, где вы хотите развернуть свое приложение.

1. Как собрать и запустить приложение локально на сервере Node.JS.

Затем вы можете попробовать поиграть со Svelte, чтобы начать настройку своего приложения. Чтобы узнать больше о веб-контенте, не забудьте [подписаться на меня в Твиттере] (https://twitter.com/smpnjn).

Также опубликовано здесь