Svelte — это легкий фреймворк для создания веб-приложений.

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

В этом руководстве мы рассмотрим, как настроить ваше первое приложение Svelte с помощью SvelteKit. В Svelte есть несколько различных способов создания приложений, и SvelteKit является одним из официальных пакетов Svelte для этого. Если вас интересуют другие фреймворки, вам может понравиться аналогичное руководство по Создание вашего первого приложения Vue.

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

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

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

npm init svelte@next my-svelte-app

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

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

cd my-svelte-app

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

npm i

Тонкая файловая структура

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

static                 <-- where we store all of our public assets like favicons, images, and fonts
|- favicon.png         <-- our favicon
tests                  <-- a folder to store our tests
|- test.js             <-- an example test using @playwright
src                    <-- our main Svelte app files
|- routes              <-- a folder to store all of our routes in
|-- index.svelte       <-- our index route file. This will be the file displayed at the route of the site
|- app.d.ts            <-- our core Svelte app file
|- app.html            <-- our main index file where the app will appear
.gitignore             <-- files we wish to ignore for git
.npmrc                 <-- config file for npm
.prettierrc            <-- config file for prettier
.eslintrc.cjs          <-- config file for eslint
package.json           <-- our NPM installed packages
playwright.config.js   <-- config file for playwright
svelte.config.js       <-- config file for svelte itself
tsconfig.json          <-- config file for typescript

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

npm run dev

Если вы посетите 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 кодом ниже, но мы изменим только две строки — импорт нашего адаптера, а затем добавим каталог сборки в вашу конфигурацию:

// We have changed the adapter line to use adapter-node@next
import adapter from '@sveltejs/adapter-node@next';
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),
    kit: {
        // We have changed this to point to a build directory
        adapter: adapter({ out: 'build' })
    }
};
export default config;

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

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

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

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

npm run build

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

npm run preview

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

node build/index.js

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

Заключение

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

1. Как настроить SvelteKit и создать базовую структуру вашего приложения Svelte.
2. Как использовать маршруты в SvelteKit, чтобы в вашем приложении было несколько страниц.
3. Как обновить файл конфигурации, чтобы использовать правильный адаптер в зависимости от того, где вы хотите развернуть свое приложение.
4. Как собрать и запустить приложение локально на сервере Node.JS.

Затем вы можете попробовать поиграть со Svelte, чтобы начать настройку своего приложения. Чтобы узнать больше веб-контента, не забудьте подписаться на меня в Twitter.