基於Svelte類的組件示例

Question

我正在嘗試學習Svelte和TypeScript。 我想知道是否有任何模式要使用ES6類來包含或編寫svelte組件。 目前文件包含所有腳本，html和數據，css。 我想讓它們成為單獨的文件。 請幫我！

Answer 1

您可以使用任務運行器來自動執行此操作。 如果您使用的是es6類，我建議使用rollup和rollup-plugin-svelte以及rollup-plugin-buble 。

我使用Gulp獲取單獨的js，html和css文件，並將它們連接成一個文件，其中包含腳本和樣式的相應標記。 組合文件可以編譯然后刪除。

結構體

為了幫助保持文件文件的清晰和易於使用HTML，CSS和JavaScript可以分開。

SRC /你好/ hello.css

.message {
    font-size: 10pt;
}

SRC /你好/ hello.html的

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

SRC /你好/ hello.js

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

結合

Svelte要求組件只是一個單獨的html文件，因此需要將三個單獨的文件合並為一個文件。 由於此文件是HTML，因此必須將JavaScript包裝在標記中，並且CSS必須包含在標記中。

SRC /你好/ 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插件。

[編輯]這是一個gulp文件的要點，顯示了它的工作原理。 鏈接在這里

[編輯2] 有一個Yeoman生成器為你設置這一切，這里是npm包的鏈接。 發電機苗條，工作台