О инструменте:

Минимальный стратовый набор для проектирования браузерных SPA приложений. С помощью Svelte.js и используя компонентный подход построения интерфейса

Note

В инструмент уже включён плагин для роутинга (перенаправления) - Svelte Routing

Warning

=В ИНСТРУМЕНТ НЕ ВКЛЮЧЁН BABEL - ДЛЯ ТРАНСПИЛЯЦИИ НОВОГО СИНТАКСИСА JAVA SCRIPT КОДА В СТАРЫЙ, ПРЕДПОЛАГАЕТСЯ ЧТО ПРИЛОЖЕНИЕ БУДЕТ ИСПОЛЬЗОВАТЬСЯ В СОВРЕМЕННЫХ БРАУЗЕРАХ. BABEL ОТКЛЮЧЁН ИЗ-ЗА КОНФЛИКТА С ПЛАГИНОМ ДЛЯ РОУТИНГА.=

Что внутри?

Зависимости	Описание
Svelte 4.2.8	Svelte — это новый способ создания веб-приложений. Это компилятор, который берет ваши декларативные компоненты и преобразует их в эффективный JavaScript, который хирургически обновляет DOM.
svelte-routing 2.10.0	Декларативная библиотека маршрутизации Svelte с поддержкой SSR
svelte-preprocess 5.1.2	✨Волшебный✨ препроцессор Svelte с разумными настройками по умолчанию и поддержкой: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug и многих других.
rollup 4.8.0	Rollup — это сборщик модулей для JavaScript, который компилирует небольшие фрагменты кода в нечто большее и более сложное, например библиотеку или приложение. Он использует стандартизированный формат модуля ES для кода вместо предыдущих уникальных решений, таких как CommonJS и AMD. Модули ES позволяют вам свободно и легко комбинировать наиболее полезные отдельные функции из ваших любимых библиотек. Rollup может оптимизировать модули ES для более быстрой загрузки в современных браузерах или выводить устаревший формат модулей, позволяющий использовать рабочие процессы модулей ES сегодня.
rollup-plugin-livereload 2.0.5	Плагин для сборщика Rollup, позволяет обновлять в живую проект и ототбражать изменения в браузере
rollup-plugin-scss 4.0.0	Поддержка компиляции scss,sass для работы необходим sass
rollup-plugin-svelte 7.1.6	Компилируйте компоненты Svelte с помощью Rollup
sass 1.69.5	Sass - популярный препроцессор css
postcss 8.4.32	Преобразование стилей с помощью плагинов JS - необходим для использования вместе с Sass + cssnano + autoprefixer + postcss-sort-media-queries
cssnano 6.0.1	Модульный минификатор, построенный на основе экосистемы PostCSS.
cssnano-preset-advanced 6.0.1	Расширение для cssnano
autoprefixer 10.4.16	Разбор CSS и добавление префиксов поставщиков в правила с помощью Can I Use построенный на основе экосистемы PostCss
postcss-sort-media-queries 5.2.0	Плагин PostCSS для сортировки и объединения медиа-запросов CSS с методологиями «сначала мобильные устройства» и «настольные компьютеры».
@rollup/plugin-node-resolve 6.0.1	Плагин Rollup, который находит модули с помощью алгоритма разрешения узлов для использования сторонних модулей в node_modules
@rollup/plugin-json 15.2.3	Плагин Rollup, конвертирующий файлы .json в модули ES6.
@rollup/plugin-terser 0.4.4	Плагин Rollup для создания минифицированного пакета с помощью terser.
prettier 3.1.1	Prettier — самоуверенный форматировщик кода. Он обеспечивает согласованный стиль, анализируя ваш код и перепечатывая его по своим собственным правилам, которые учитывают максимальную длину строки и при необходимости переносят код.
prettier-plugin-svelte 3.1.2	Отформатируйте компоненты Svelte с помощью Prettier.
del + del-cli	Удаление файлов и каталогов
chalk 5.3.0	Правильно выполнено оформление терминальной строки
npm-run-all 4.1.5	Инструмент CLI для параллельного или последовательного запуска нескольких npm-скриптов.
sirv-cli 2.0.2	Быстро запустите сервер, чтобы просмотреть ресурсы любого каталога!

Установка инструмента

Important

Проект разрабатывался и тестировался на node.js версии 20.10.0 (lts/iron) но должна подойти и версия 18 (lts/hydrogen). На младших версиях работоспособность не гарантируется.

Убедитесь что у вас в системе есть git и node.js, далее клонируйте этот репозиторий:

git clone https://github.com/Template-Craft/rollup-svelte-starter-kit.git

После клонирования на свою машину, перейдите в папку с проектом:

cd rollup-svelte-starter-kit

В папке с проектом вам необходимо будет установить все зависимости инструмента, командой:

npm i

После успешной установки всех зависимостей, вы можете запустить локальный сервер в режиме разработки, командой:

npm run dev

Обратите внимание на вывод информации в терминале, там вы увидете адрес локального сервера на котором доступен проект, пример:

Тем временем в браузере:

Если хотите просто запустить тестовый локальный сервер с проектом в браузере то воспользуйтесь командой:

npm run start

Вывод терминала:

Что бы перейти в браузер перейдите по предложенной ссылке в выводе терминала.

Команды и их описание

Все команды вы можете посмотреть или отредактировать в файле package.json в корне вашего проекта, в разделе:

  "scripts": {
    "prebuild": "del-cli ./public/**/*.map ./public/build/**/*.map",
    "build": "rollup -c --no-sourcemap",
    "watch": "rollup -c -w",
    "dev": "npm-run-all --parallel start watch",
    "start": "sirv public -D --single"
  }

Запуск режимов

Запускает локальный сервер для разработки вашего SPA

npm run dev

---

Запускает режим сборки проекта, перед сборкой запустит команду prebuild

npm run build

---

Команда запускается автоматически, во время запуска команды build. Она необходима для очистки директории public от исходных карт

npm run prebuild

---

Команда для слежения за файлами в вашем проекте, включена в команду dev

npm run watch

---

Команда для запуска локального сервера в режиме разработки включена в команду dev

npm run start

Структура проекта

project_dir
├── .editorconfig
├── .gitignore
├── .kitpreview
├── .prettierignore
├── .prettierrc
├── package.json
├── public
│  └── index.html
├── README.md
├── rollup.config.mjs
└── src
   ├── App.mjs
   ├── App.svelte
   ├── assets
   │  └── .gitkeep
   ├── components
   │  └── .gitkeep
   ├── modules
   │  └── .gitkeep
   ├── routes
   │  ├── About.svelte
   │  └── Home.svelte
   └── stylesheets
      ├── _mixins.scss
      ├── _var-collection.scss
      └── stylesheets.scss

В директории src находятся все основные файлы, с котороми предполагается работа. При сборке проекта в дир-рии public появится файл стилей проекта и его java script код.