Skip to main content

Svelte для новичков

Никогда не использовали Node.js или терминал? Не проблема!

Это краткое руководство предназначено для тех, кто уже прошёл наш учебник и горит идеями новых приложений на Svelte, но при этом не имеет большого опыта работы с инструментами сборки Javascript.

Если встретите что-то непонятное или вам покажется, что какие-то вещи нужно описать подробнее, напишите нам об этом или самостоятельно отредактируйте эту страницу — это поможет другим новичкам.

Если у вас возникнут трудности с прохождением этого руководства, лучшее место для где вы можете спросить совета — это русскоязычный канал в Telegram (@sveltejs).

Начнём с азов

Вы будете использовать командную строку, также известную как терминал. В Windows вы можете открыть терминал запустив приложение Командная строка из меню Пуск. В MacOS нажмите вместе на клавиатуре клавиши Cmd и Пробел для запуска Spotlight и введите в строку поиска Terminal.app. На большинстве Linux дистрибутивах достаточно нажать вместе Ctrl-Alt-T для открытия терминала.

Командная строка позволяет взаимодействовать с вашим компьютером(или удалённым компьютером, но об этом в другой раз) с гораздо большими возможностями и контролем, чем предоставляет GUI(графический интерфейс пользователя), который ежедневно используют большинство людей.

Оказавшись в командной строке, вы можете перемещаться по файловой системе, используя команду ls (dir на Windows) для отображения списка файлов в текущей директории и команду cd для перемещения в другую директорию. Например, если в вашей домашней папке есть директория Development, то нужно напечатать

cd Development

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

mkdir svelte-projects
cd svelte-projects

Знакомство с обширным списком всех доступных команд в терминале выходит за рамки этого руководства, но запомните еще несколько полезных команд:

  • cd .. — перемещает в родителькую директорию
  • cat my-file.txt — в Mac/Linux (type my-file.txt на Windows), отображает содержимое файла my-file.txt
  • open . (или start . в Windows) — открывает текущую папку в Finder или Проводнике

Установка Node.js

Node позволяет запускать JavaScript в терминале. Это приложение используется множеством инструментов, включая Svelte. Если оно еще не установлено на вашем компьютере, то проще всего скачать последнюю версию прямо с сайта Node.

После установки Node у вас появится три новые команды:

  • node my-file.js — запустит выполнение JavaScript в файле my-file.js
  • npm [команда]npm способ установки 'пакетов', от которых зависит ваше приложение, например svelte.
  • npx [команда] — удобный способ запуска приложений, доступных на npm, без их непосредственной установки на компьютере

Установка редактора кода

Чтобы писать код, необходим хороший редактор. Наиболее популярный выбор сейчас — это Visual Studio Code или VSCode, что вполне оправдывается его продуманностью, полнофункциональностью и богатством расширений (в т.ч. для Svelte, которое обеспечивает подсветку синтаксиса и проверку ошибок при написании кода компонентов).

Создание проекта

Мы последуем инструкциям из второй части статьи Легкий способ начать использовать Svelte.

Сначала, воспользуемся npx для запуска приложения degit, которое умеет копировать шаблоны проектов из репозиториев GitHub и других подобных сервисов. Вы можете и не использовать готовый шаблон приложения, но он позволяет не делать первоначальную настройку проекта и экономит ваше время. Для того, чтобы degit заработал, на компьютере уже должен быть установлен Git (Позднее, вам скорее всего придется узнать как работать с Git, который большинство разработчиков используют для управления своими проектами).

В командной строке перейдите в директорию, где вы хотите создать новый проект, затем напечатайте следуюшие команды (вы, безусловно, можете скопировать все команды сразу и вставить их в терминал, но лучше вручную напишите каждую строчку, чтобы они отложились в вашей мышечной памяти):

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install

После этого будет создана новая директория, my-svelte-project, произойдёт загрузка в неё файлов шаблона из репозитория sveltejs/template и установка некоторого количества пакетов из npm. Откройте эту папку в редакторе кода и осмотритесь. 'Исходный код' приложения находится в директории src, а ресурсы, которые приложение сможет использовать, в папке public.

В файле package.json есть раздел "scripts". Это команды для работы с вашим приложением — dev, build и start. Чтобы запустить приложение в режиме разработки, выполните такую команду:

npm run dev

Вызов скрипта dev приведёт к запуску программы, которая называется Rollup. Rollup занимается тем, что берёт исходный код вашего приложения (на данный момент у нас есть только src/main.js и src/App.svelte), передаёт его в другие программы (в нашем случае Svelte) и на выходе собирает в код, который будет выполняться, когда вы откроете своё приложение в браузере.

Раз мы упомянули браузер, то давайте откроем его и прейдем по адресу http://localhost:8080. Это ваше приложение, которое запущено на локальном web сервере на порту номер 8080.

Попробуйте отредактировать src/App.svelte и сохранить его. Приложение перезагрузится и отобразит ваши изменения.

Сборка приложения

Ранее мы запускали приложение в 'режиме разработчика'. В этом режиме Svelte добавляет дополнительный код, который помогает отлаживать приложение. Кроме того, Rollup не минимизирует итоговый JavaScript код при помощи плагина Terser.

Когда настанет время поделиться вашим приложением с миром, нужно собрать его как можно более компактным и эффективным. Для этого используйте команду build:

npm run build

После этого, в директории public уже будет минимизированный файл bundle.js, содержащий JavaScript код вашего приложения. Вы можете запустить его командой:

npm run start

Приложение будет запущено по адресу http://localhost:8080.

Дальнейшие шаги

Для распространения вашего приложения необходимо его где-то разместить. Существует множество вариантов как это сделать — наиболее популярные описаны в файле README.md, который вы найдете в папке вашего проекта.