Svelte — это современный фреймворк для разработки пользовательских интерфейсов, который отличается от других популярных решений тем, что выполняет большую часть работы во время компиляции, а не в браузере. Это позволяет улучшить производительность и уменьшить размер скомпилированных файлов. Важной частью разработки с использованием Svelte является правильная организация структуры проекта и файлов. Знание того, как правильно организовать проект, помогает ускорить процесс разработки и облегчить его сопровождение в будущем.
Для создания нового проекта с использованием Svelte, рекомендуется воспользоваться официальным шаблоном, который позволяет настроить все необходимые зависимости и структуру файлов. Для этого необходимо выполнить команду:
npx degit sveltejs/template имя_проекта
cd имя_проекта
npm installЭта команда создаст новый проект и установит все нужные зависимости. После инициализации проект будет содержать несколько базовых файлов и папок, которые можно использовать и модифицировать по мере необходимости.
Стандартная структура Svelte проекта выглядит следующим образом:
имя_проекта/
├── public/
│ ├── global.css
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── routes/
│ └── main.js
├── .gitignore
├── package.json
└── rollup.config.jspublicПапка public содержит файлы, которые будут доступны на
сервере и использованы в процессе рендеринга. В ней хранятся статичные
ресурсы, такие как изображения, шрифты, favicon, а также главный HTML
файл, в котором будет подключена скомпилированная версия вашего
приложения.
srcВ этой папке хранятся все исходные файлы проекта, включая компоненты, маршруты и другие ресурсы, используемые приложением. Структура папки может быть модифицирована в зависимости от потребностей проекта, но стандартная организация выглядит следующим образом:
.svelte, который описывает логику, разметку и
стили для определённого элемента интерфейса.svelte-routing).
Каждый файл в этой папке представляет собой отдельный маршрут с
компонентами, связанными с этим маршрутом.rollup.config.jsЭтот файл конфигурации относится к сборщику модулей Rollup, который используется по умолчанию в проекте Svelte. Он определяет, как будет происходить сборка приложения, какие плагины использовать и как настраивать оптимизацию, код-сплиттинг и другие параметры. Обычно этот файл не требует изменений, если проект не выходит за пределы стандартных настроек, но его можно модифицировать для добавления новых возможностей, например, поддержки TypeScript или внедрения специфических плагинов.
package.jsonЭто основной файл конфигурации проекта, в котором указаны все зависимости и скрипты, используемые для сборки и разработки проекта. В этом файле указываются библиотеки, используемые в проекте, а также различные команды для запуска разработки, сборки и тестирования.
Пример базового package.json:
{
"name": "svelte-app",
"version": "1.0.0",
"scripts": {
"dev": "rollup -c -w",
"build": "rollup -c",
"start": "sirv public --no-clear"
},
"devDependencies": {
"rollup": "^2.60.0",
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",
"svelte": "^3.44.0",
"sirv-cli": "^1.0.0"
}
}В Svelte компоненты играют ключевую роль в структуре проекта.
Компоненты можно размещать в папке src/components, и каждый
компонент представляет собой файл с расширением .svelte.
Внутри компонента описываются три секции:
<script>):
содержит логику компонента, включая переменные, функции, события и
экспортированные свойства.<style>):
содержит стили для компонента. Эти стили инкапсулированы и применяются
только к данному компоненту, что позволяет избежать конфликтов с другими
частями приложения.Пример компонента:
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<style>
button {
padding: 10px;
font-size: 16px;
}
</style>
<button on:click={increment}>Clicked {count} times</button>Svelte не предоставляет встроенного маршрутизатора, но для работы с
маршрутами можно использовать сторонние библиотеки, такие как
svelte-routing или svelte-navigator. Структура
маршрутов обычно организуется через папку src/routes, где
каждый файл или папка представляет собой отдельный маршрут.
Пример использования svelte-routing для организации
маршрутов:
<script>
import { Router, Route, Link } from 'svelte-routing';
import Home from './routes/Home.svelte';
import About from './routes/About.svelte';
</script>
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Router>По мере роста проекта его структура может изменяться, и можно использовать более сложную организацию папок и файлов. Например, можно добавить папки для сервисов, утилит, хранилища (для работы с состоянием), тестов и других вспомогательных файлов.
Пример:
имя_проекта/
├── public/
│ ├── global.css
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── routes/
│ ├── services/
│ ├── store/
│ └── utils/
├── tests/
│ ├── components/
│ └── services/
├── package.json
└── rollup.config.jswritable, readable или derived
хранилища, для централизованного управления состоянием.Правильная организация файлов и папок позволяет сохранить порядок в проекте, ускоряет разработку и облегчает поддержку.