Эта статья является частью серии статей о работе со Svelte. Мы напишем (или будем) освещать следующие темы и статьи:
- Настройка Svelte и установка Tailwind CSS и PostCSS
- Настройка маршрутизации с помощью Page.js
- Оптимизация маршрутизатора для крупных приложений (скоро)
- .. и др.
Svelte - отличный аутсайдер в фреймворках JavaScript, и в настоящее время он поднимается в рейтинге благодаря тому, как он компилирует ваши скрипты и HTML. Svelte по своей сути является компилятором, и все ваши файлы компонентов компилируются в чистый JavaScript. Вы можете узнать больше о Svelte на их сайте.
Установить Svelte
Для настройки Svelte нам потребуется установка Node.js и Degit. Я не буду рассказывать, как их настроить в этой статье, так как она требует некоторых знаний об узле и терминале. Вы можете заранее проследить за установкой каждого из них на соответствующих сайтах.
Давайте создадим копию базового шаблона, предоставленного Svelte, и установим все необходимые библиотеки со следующими.
npx degit sveltejs/template my-svelte-project cd my-svelte-project
yarn # or npm install
Чтобы проверить, что все работает правильно, мы можем запустить yarn dev
и увидеть страницу по умолчанию по адресу https: // localhost: 5000. Если вы не можете, вы можете убедиться, что с настройкой ничего не случилось.
Настроить попутный ветер
Я большой поклонник Tailwind и использую его в большинстве проектов, поэтому работа со Svelte ничем не отличается. Оставаясь в каталоге, в который мы установили Svelte, нам нужно будет установить несколько зависимостей, создать новый postcss.config.js
файл и, наконец, изменить пару существующих файлов.
Установить зависимости
Установите необходимые зависимости для разработки с помощью следующей команды:
yarn add --dev postcss postcss-load-config svelte-preprocess tailwindcss
Если вы хотите, чтобы неиспользуемые стили были удалены в процессе производства (сохраняя минимальный размер файла), вы также можете добавить следующую зависимость.
yarn add @fullhuman/postcss-purgecss
Создать конфигурацию попутного ветра
Чтобы перезаписать стили по умолчанию, предоставляемые Tailwind, нам нужно убедиться, что у нас есть tailwind.config.js
в нашем каталоге маршрутов, где мы можем разместить необходимые настройки. Вы можете сделать это, выполнив следующую команду.
npx tailwind init
Если вы откроете созданный файл, вы увидите, что он выглядит примерно так, как показано ниже.
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: []
}
Создание наших правил PostCSS
Нам нужно будет указать Svelte, как интерпретировать и компилировать наш необходимый код. Мы можем сделать это, создав файл postcss.config.js
в каталоге маршрута. Создайте его вручную или запустите в терминале следующее.
touch postcss.config.js
Откройте файл в своем любимом редакторе и скопируйте следующий код.
const purgecss = require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.svelte', './src/**/*.html'],
whitelistPatterns: [/svelte-/],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
module.exports = {
plugins: [
require('tailwindcss'),
...(!process.env.ROLLUP_WATCH ? [purgecss] : [])
]
}
Чтобы немного объяснить вышесказанное, мы сначала создаем набор правил для Purge CSS, который будет просматривать все файлы Svelte и HTML и удалять все классы, которые не соответствуют тому, что включено. Мы также добавим шаблон белого списка, чтобы гарантировать, что любые классы, созданные Svelte, не будут удалены без надобности.
Затем мы смотрим, соответствует ли process.env.ROLLUP_WATCH
true, если нет, мы очищаем, если true, то мы находимся в разработке и просто компилируем классы Tailwind.
Интеграция со Svelte
Нам нужно будет где-то включить помощников Tailwind, чтобы можно было использовать все необходимые стили. Откройте файл App.svelte
в папке src/
и добавьте следующий код внизу (заменяя все стили, которые уже есть).
<style global>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
Затем нам нужно будет убедиться, что Svelte запускает препроцессоры для любого кода в наших <style>
тегах. Для этого нам нужно открыть файл rollup.config.js
в вашем редакторе и добавить следующее вверху файла.
import sveltePreprocess from 'svelte-preprocess'
Затем измените раздел, который выглядит следующим образом
...
svelte({
...
preprocess: sveltePreprocess({ postcss: true }),
...
})
...
Теперь мы должны полностью интегрировать Tailwind в Svelte. Если вы повторно запустите yarn dev
в своем терминале, вы увидите, что он скомпилировал стили перед загрузкой страницы, и у вас будет обрезанная страница, на которую можно перейти.
использование
Теперь вы можете включить любой из стилей в качестве атрибутов класса для значений, которые уже существуют, как показано ниже, или вы можете интегрировать его, используя метод @apply
во всех ваших компонентах Svelte.
<h1 class="font-bold">Title</h1>
or
<style>
h1 {
@apply font-bold text-2xl;
}
</style>
Первоначально опубликовано на https://jackwhiting.co.uk. Вы можете найти больше подобных статей о PHP, JavaScript, Vue, Svelte или Freelancing на моем сайте.