Пример компонента на основе классов Svelte

Question

Я пытаюсь выучить Svelte и TypeScript. Мне было интересно, есть ли шаблон для включения или программирования компонента svelte с использованием классов ES6. В настоящее время файл содержит все сценарии, HTML и данные, CSS. Я хочу сделать их отдельными файлами. Пожалуйста, помогите мне!

Answer 1

Вы можете использовать бегун задач, чтобы автоматизировать это. Если вы используете классы ES6, я бы порекомендовал использовать rollup с rollup-plugin-svelte а также rollup-plugin-buble,

Я использую Gulp, чтобы взять отдельные файлы js, html и css и объединить их в один файл с соответствующими тегами, содержащими скрипт и стили. Объединенный файл может быть скомпилирован, а затем удален.

Состав

Чтобы сохранить файлы в чистоте и легко работать с HTML, CSS и JavaScript могут быть разделены.

ЦСИ / привет /hello.css

.message {
    font-size: 10pt;
}

ЦСИ / привет /hello.html

<div class="message">{{message}}</div>

SRC / привет / hello.js

export default {
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
}

скомбинировать

Svelte требует, чтобы компоненты были только одним HTML-файлом, поэтому три отдельных файла должны быть объединены в один файл. Поскольку этот файл является HTML, JavaScript должен быть заключен в теги, а CSS - в теги.

ЦСИ / привет /hello.temp.html

<style>
.message {
  font-size: 10pt;
}
</style>

<div class="message">{{message}}</div>

<script>
export default {
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

компилировать

Временный файл может быть скомпилирован с использованием svelte или накопительного пакета с плагином svelte, а затем удален.

[Edit] Вот суть файла с глотком, показывающего, как это работает. Ссылка здесь

[Edit 2]Есть генератор Yeoman, чтобы настроить все это для вас, вот ссылка на пакет npm. Генератор-стройной-столешниц