В моей последней статье я упомянул, начиная с веб-приложения Card Game, используя SVELTE в качестве интерфейса. (Кстати, это может звучать странно использовать рамки Frontend App для игры, но я думаю, что для карточной игры она работает нормально. Это не так, как мне нужен физический двигатель или что-нибудь;)
Как я узнаю больше о Svelte, я хочу написать некоторые статьи на некоторых ключевых науках, которые у меня есть по пути.
Что такое svelte?
Большинство Frontend Devs знакомы с реагированными и VUE. SVELTE – это еще одна структура в той же категории. Его фокус находится на уменьшении кода котел, используя ванильные JS и скорость (в силу того, что не имеет виртуального DOM). Его синтаксис сильно заимствован от Vue, с каждым компонентом выглядит что-то подобное:
Hello! Once this component loads, you will see an alert box in 3 seconds.
Как мне начать проект Svelte?
Право от Главная страница Svelte. , вы увидите несколько команд CLI, которые позволяют вам начать проект от sveltejs/шаблон Отказ Это отличное место для начала первого проекта. Он запускает вас только с одним компонентом SVELTE на одной странице, с помощью конфигурации по умолчанию. Рулон Предлагает ли Bundler Svelte, но вы можете использовать другие пакеты, если хотите.
Но как только вы начали с шаблона и начните кодирование, вы можете быстро прийти к вопросу …
Как мне сделать маршрутизацию?
Поскольку шаблон начинает вас с одной страницей и одним компонентом, вы быстро удивляетесь, как лучше всего делать маршрутирование, если вы пытаетесь создать веб-приложение любого разумного размера (не только одна страница).
Из того, что я собрал, есть ряд вариантов популярных библиотек, чтобы сделать маршрутизацию с разными целями.
Вероятно, самый осуществимый для более крупного веб-приложения Сапер Отказ Как их Док упоминается, это сильно вдохновлено Next.js. Саппер является самоуверенным и в основном дает вам SRC/маршруты Каталог, где вы помещаете свои страницы, на каждой странице являетесь компонентом. (Должно быть знакомым для тех, кто приходит из React/Next.js) SAPPER может быть легко настроен для использования в качестве статического генератора сайта (стек джема) или стандартная настройка боковых серверов с сервером NODEJS. Когда вы идете со Sapper, вы захотите использовать sapper-шаблон вместо sveltejs/шаблон начать, как их Начало работы Руководство упоминается.
(Помнишь, что в моей первой статье разработки я упомянул, как одна из секретных соусов dev.to настолько быстро было из-за его использования InstantClick, то есть предварительно загружающие ссылки на мыши? Sapper приходит с этой функциональностью, встроенной.)
Как вы можете себе представить, SAPPER добавляет значительное количество сложности в ваше приложение SVELTE. Если вы разработчик ветеранов Frontend, исходя из React и Next.js, это не будет проблемой для вас.
Что если вы хотите построить более простое приложение? В моем случае я строю простую карточную игру, с посадочной страницей и игровой страницей. Страница игры является хэш-идентификатор на основе разных «игровых комнат»; И он содержит много динамической интерактивности на нем.
Для этого использования я нашел SVELTE-SPA-RUTER Библиотека, чтобы быть отличным вариантом. Он только поддерживает маршрутизацию на основе клиента (с помощью A # Hash) и не делает серверный рендеринг. Тем не менее, вы можете легко запустить настройку стека для варенья со статическими настройками генератора сайта, которая поставляется с шаблоном SVELTE. Я в основном начинаю с sveltejs/шаблон Добавьте SVELTE-SPA-RUTER как зависимость в мой package.json И начать оттуда.
Вы в хорошем месте, чтобы начать кодирование
С помощью проекта SVELTE полностью настроен вместе с библиотекой маршрутизатора по вашему выбору, вы должны быть готовы начать кодирование вашего нового приложения Frestend. Наслаждаться!
Оригинал: “https://dev.to/bigi/bootstrapping-a-svelte-project-4hfm”