javascript - 基于 Svelte 类的组件示例

Question

我正在尝试学习 Svelte 和 TypeScript。我想知道是否有任何模式可以包含或使用 ES6 类编写纤细的组件。当前文件包含所有脚本、html 和数据、css。我想让它们分开文件。请帮我！

Answer 1

您可以使用任务运行器来自动执行此操作。如果您使用的是 es6 类，我建议您使用rollupwithrollup-plugin-svelte和rollup-plugin-buble。

我使用 Gulp 获取单独的 js、html 和 css 文件并将它们连接到一个文件中，并使用包含脚本和样式的适当标签。合并后的文件可以编译然后删除。

结构

为了帮助保持文件文件干净且易于使用 HTML，CSS 和 JavaScript 可以分开。

src/hello/hello.css

.message {
    font-size: 10pt;
}

src/hello/hello.html

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

src/hello/hello.js

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

结合

Svelte 要求组件只是一个 html 文件，因此需要将三个单独的文件合并到一个文件中。由于该文件是 HTML，因此 JavaScript 必须包含在标签中，而 CSS 必须包含在标签中。

src/hello/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 包的链接。 发电机-苗条-工作台