テンプレートを使用しているsvelteの新しいコンポーネントを作成する方法

なぜ

新しいコンポーネントの作成は、おそらくあなたがSvelteで最も行うことの一つです.
そして、開発者の経験を最大限にするには、頻繁に行うすべてのタスクを自動化する必要があります.
それだけでなく、時間を節約するだけでなく、厄介な、私たちの開発者をそらす反復タスクを避けるために.
ここでは、カスタマイズされたコンポーネントのテンプレートを一度作成し、それを毎回使用するホットを学びます.

ハウ

このコマンドを書きましょう.npx t6e $name.svelte src/components name=my-componentそして、あなたがそれを書いたように、コンポーネントを得る.
簡単です.
1 )テンプレートを作成します.ここでは、Svelteプロジェクトに使用するものを見つけることができます.

<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import { writable } from 'svelte/store';
  const dispatch = createEventDispatcher();

  const store = writable({
    hello: ""
  });


</script>

<div class="$name">
    {$store.hello}
</div>

<style lang="scss">
    .$name {
        @apply block
    }
</style>

2 )それをsrc/componentという名前で、$name.svelteフォルダに入れます
3 )コンポーネントを作成するにはtemplates4 )完了しました.新しいコンポーネントはnpx t6e templates/$name.svelte src/components name=counterに保存されました.src/components/counter.svelteはファイル名とファイル内容の両方で$nameによって取り替えられました
これで、すべてのコンポーネントのテンプレートを再利用することができます.

T 6 Eとは

T 6 Eは、オープンソースの足場、boilerplaterまたは単にそれはあなたをことができます置く
任意のファイルをカスタムテンプレートに基づいて作成します.
私たちは上記のsvelte用のテンプレートを作成しましたが、任意のテンプレートを作成することができます
butopenで我々によって提供される小さなオープンソースツール
ここでT 6 Eを見つけることができます.
https://github.com/butopen/t6e