基于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包的链接。 发电机苗条，工作台