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文件的要点，展示了它的工作原理。 Link here

[编辑2] 有一个Yeoman生成器为你设置这一切，这里是npm包的链接。 generator-svelte-workbench

基于Svelte类的组件示例

1 个答案: