Эта статья является частью серии статей о работе со Svelte. Мы напишем (или будем) освещать следующие темы и статьи:

  1. Настройка Svelte и установка Tailwind CSS и PostCSS
  2. Настройка маршрутизации с помощью Page.js
  3. Оптимизация маршрутизатора для крупных приложений (скоро)
  4. .. и др.

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 на моем сайте.