Skip to main content

Легкий способ начать использовать Svelte

Это займет всего лишь 1 минуту.

Rich Harris

Svelte — это фреймворк нового типа. Не нужно помещать на страницу тег <script src='svelte.js'> или импортировать его в ваше приложение с помощью import или require! Svelte — это компилятор, превращающий ваши файлы компонентов в прекрасно оптимизированный ванильный JavaScript.

Из-за этого, начало работы с ним может сначала немного запутать. Как же таки сделать приложение на Svelte?

1. С использованием REPL

Svelte REPL (Read-Eval-Print Loop) — самый простой способ начать. Это интерактивная среда, которая позволяет изменять код и мгновенно видеть результат.

Вы можете выбрать из списка один из стартовых примеров, и пытаться изменить его, пока он не начнёт делать то, что вы хотите.

В какой-то момент, вы решите, что приложение переросло REPL. Нажмите кнопку download, чтобы сохранить файл svelte-app.zip на свой компьютер и распакуйте его.

Откройте терминал и выполните команды...

cd /путь/до/распакованного/svelte-app
npm install

...затем запустите сервер для разработки:

npm run dev

После этого ваше приложение будет доступно на localhost:8080 и оно будет пересобираться с помощью Rollup каждый раз, когда вы вносите изменения в файлы в svelte-app/src.

2. С использованием degit

При загрузке из REPL вы получаете настроенную версию репозитория sveltejs/template. Но есть путь и без всякой возни с zip-файлами, используя degit, инструмент для создания проектов.

Вы можете создать новый проект прямо из терминала:

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
# to use TypeScript run:
# node scripts/setupTypeScript.js

npm install
npm run dev

Нужные файлы загрузятся в папку my-svelte-project, установятся все зависимости и запустится сервер на http://localhost:8080.

Получить дополнительную информацию об использовании TypeScript можно здесь.

Когда вы немного поизучаете основы и поймёте как всё работает, можете форкнуть sveltejs/template и начать делать так:

npx degit your-name/template my-new-project

Вот, в принципе, и всё! Выполните npm run build, чтобы собрать готовую к продакшену версию своего приложения, и прочтите README шаблона проекта, чтобы узнать, как легко развернуть своё приложение в Интернете с помощью Vercel или Surge.

Вы не обязаны использовать Rollup — у нас есть интеграции с webpack, Browserify и прочими. Вы можете использовать Svelte CLI (Обновление от 2019 г.: с выходом Svelte 3 инструмент CLI убран, теперь мы используем в нашем шаблоне sirv-cli. Но вы можете использовать любую утилиту по своему выбору!) или API напрямую. Если вы сделали шаблон проекта с помощью одного из этих инструментов, расскажите об этом в чате Svelte Discord или в Twitter @sveltejs!